1# Content Modifier
2
3You can apply a content modifier to a component to customize its content area using a style builder.
4
5>  **NOTE**
6>
7>  This feature is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8
9## contentModifier
10
11contentModifier(modifier:ContentModifier\<T>)
12
13Creates a content modifier.
14
15**System capability**: SystemCapability.ArkUI.ArkUI.Full
16
17**Parameters**
18
19| Name  | Type              | Mandatory | Description                                                        |
20| -------- | ------------------ | ---- | ------------------------------------------------------------ |
21| modifier | ContentModifier\<T> | Yes  | Content modifier to apply to the current component.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API. |
22
23## ContentModifier\<T>
24
25You need a custom class to implement the **ContentModifier** API.
26
27### applyContent
28
29applyContent() : WrappedBuilder<[T]>
30
31Builder of the custom content area.
32
33**Atomic service API**: This API can be used in atomic services since API version 12.
34
35**Parameters**
36
37| Name | Description                                                        |
38| ---- | ------------------------------------------------------------ |
39| T    | Component attribute class, which is used to distinguish different information required by different components after content areas are customized, for example, **ButtonConfiguration** for the **Button** component and **CheckBoxConfiguration** of the **Checkbox** component. |
40
41**Value range of the T parameter:**
42
43ButtonConfiguration, CheckBoxConfiguration, DataPanelConfiguration, TextClockConfiguration, ToggleConfiguration, GaugeConfiguration, LoadingProgressConfiguration, RadioConfiguration, ProgressConfiguration, RatingConfiguration, SliderConfiguration
44
45**Supported attributes**
46
47The universal attribute **enabled** and **contentModifier** are supported.
48## CommonConfiguration\<T><sup>12+</sup>
49
50You need a custom class to implement the **ContentModifier** API.
51
52**Atomic service API**: This API can be used in atomic services since API version 12.
53
54| Name | Type   | Description             |
55| ------ | ------ | ---------------- |
56| enabled | boolean | Whether to enable the content modifier and respond to operations such as **triggerChange**. The value **true** means to enable the content modifier and respond to operations such as **triggerChange**, and **false** means the opposite. |
57| contentModifier | ContentModifier\<T> | Content modifier that sends the component information required by users to the custom content area. |
58
59
60## Example
61This example implements a custom check box. This check box comes in the custom pentagon style instead of the original check box style. When selected, the check box shows a red triangle pattern inside, and the title displays the word "Selected;" when deselected, the check box hides the red triangle pattern inside, and the title displays the word "Unselected."
62```ts
63// xxx.ets
64class MyCheckboxStyle implements ContentModifier<CheckBoxConfiguration> {
65  selectedColor: Color = Color.White
66  constructor(selectedColor: Color) {
67    this.selectedColor = selectedColor;
68  }
69  applyContent() : WrappedBuilder<[CheckBoxConfiguration]>
70  {
71    return wrapBuilder(buildCheckbox)
72  }
73}
74
75@Builder function buildCheckbox(config: CheckBoxConfiguration) {
76  Column({space:10}) {
77      Text(config.name + (config.selected ? "(Selected)" : "(Not selected)"))
78      Shape() {
79        Path().width(200).height(60).commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z').fillOpacity(0).strokeWidth(3)
80        Path().width(10).height(10).commands('M50 0 L100 100 L0 100 Z')
81          .visibility(config.selected ? Visibility.Visible : Visibility.Hidden)
82          .fill(config.selected ? (config.contentModifier as MyCheckboxStyle).selectedColor : Color.Black)
83          .stroke((config.contentModifier as MyCheckboxStyle).selectedColor)
84          .margin({left:11,top:10})
85      }
86      .width(300)
87      .height(200)
88      .viewPort({ x: 0, y: 0, width: 310, height: 310 })
89      .strokeLineJoin(LineJoinStyle.Miter)
90      .strokeMiterLimit(5)
91      .onClick(()=>{
92            if (config.selected) {
93              config.triggerChange(false)
94            } else {
95              config.triggerChange(true)
96            }
97      }).margin({left:150})
98    }
99  }
100
101@Entry
102@Component
103struct Index {
104  build() {
105    Row() {
106      Column() {
107        Checkbox({ name: 'Check box status', group: 'checkboxGroup' })
108        .select(true)
109        .contentModifier(new MyCheckboxStyle(Color.Red))
110        .onChange((value: boolean) => {
111          console.info('Checkbox change is' + value)
112        })
113      }
114      .width('100%')
115    }
116    .height('100%')
117  }
118}
119```
120
121![](figures/common_builder.gif)
122