ts-component-based-extend.md 684 字节
Newer Older
Z
zengyawen 已提交
1
# @Extend<a name="ZH-CN_TOPIC_0000001134698822"></a>
Z
zengyawen 已提交
2

Z
zengyawen 已提交
3
**@Extend**装饰器将新的属性函数添加到内置组件上,如**Text****Column****Button**等。通过**@Extend**装饰器可以快速定义并复用组件的自定义样式。
Z
zengyawen 已提交
4

Z
zengyawen 已提交
5
```
Z
zengyawen 已提交
6 7 8
@Extend(Text) function fancy(fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
Z
zengyawen 已提交
9 10 11 12 13 14 15 16 17
  .fontStyle(FontStyle.Italic)
}

@Entry
@Component
struct FancyUse {
  build() {
    Row({ space: 10 }) {
      Text("Fancy")
Z
zengyawen 已提交
18
        .fancy(16)
Z
zengyawen 已提交
19
      Text("Fancy")
Z
zengyawen 已提交
20
        .fancy(24)
Z
zengyawen 已提交
21 22 23 24 25
    }
  }
}
```

26
>![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** 
Z
zengyawen 已提交
27
>@Extend装饰器不能用在自定义组件struct定义框内。
Z
zengyawen 已提交
28