ts-component-based-extend.md 641 字节
Newer Older
Z
zengyawen 已提交
1 2
# @Extend

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

Z
zengyawen 已提交
5

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

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


H
HelloCrease 已提交
29
> **说明:**
L
liujinwei 已提交
30 31 32
>
> - @Extend装饰器不能用在自定义组件struct定义框内。
> - @Extend装饰器内仅支持属性函数语句。