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> The initial APIs of this module are 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>): 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**Return value** 24 25| Type| Description| 26| --- | --- | 27| T | Current component.| 28 29## ContentModifier\<T> 30 31You need a custom class to implement the **ContentModifier** API. 32 33### applyContent 34 35applyContent(): WrappedBuilder<[T]> 36 37Builder of the custom content area. 38 39**Atomic service API**: This API can be used in atomic services since API version 12. 40 41**System capability**: SystemCapability.ArkUI.ArkUI.Full 42 43**Parameters** 44 45| Name| Description | 46| ---- | ------------------------------------------------------------ | 47| 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.| 48 49**Value range of the T parameter:** 50 51ButtonConfiguration, CheckBoxConfiguration, DataPanelConfiguration, TextClockConfiguration, ToggleConfiguration, GaugeConfiguration, LoadingProgressConfiguration, RadioConfiguration, ProgressConfiguration, RatingConfiguration, SliderConfiguration 52 53**Supported attributes** 54 55The universal attribute **enabled** and **contentModifier** are supported. 56## CommonConfiguration\<T><sup>12+</sup> 57 58You need a custom class to implement the **ContentModifier** API. 59 60**Atomic service API**: This API can be used in atomic services since API version 12. 61 62**System capability**: SystemCapability.ArkUI.ArkUI.Full 63 64| Name | Type | Description | 65| ------ | ------ | ---------------- | 66| 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.| 67| contentModifier | ContentModifier\<T> | Content modifier that sends the component information required by users to the custom content area.| 68 69 70## Example 71 72This example demonstrates how to create a custom check box using **ContentModifier**. 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." 73 74```ts 75// xxx.ets 76class MyCheckboxStyle implements ContentModifier<CheckBoxConfiguration> { 77 selectedColor: Color = Color.White; 78 79 constructor(selectedColor: Color) { 80 this.selectedColor = selectedColor; 81 } 82 83 applyContent(): WrappedBuilder<[CheckBoxConfiguration]> { 84 return wrapBuilder(buildCheckbox); 85 } 86} 87 88@Builder 89function buildCheckbox(config: CheckBoxConfiguration) { 90 Column({ space: 10 }) { 91 Text(config.name + (config.selected ? " (selected)" : " (not selected)")) 92 Shape() { 93 // Pentagon check box style 94 Path() 95 .width(200) 96 .height(60) 97 .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z') 98 .fillOpacity(0) 99 .strokeWidth(3) 100 // Red triangle pattern style 101 Path() 102 .width(10) 103 .height(10) 104 .commands('M50 0 L100 100 L0 100 Z') 105 .visibility(config.selected ? Visibility.Visible : Visibility.Hidden) 106 .fill(config.selected ? (config.contentModifier as MyCheckboxStyle).selectedColor : Color.Black) 107 .stroke((config.contentModifier as MyCheckboxStyle).selectedColor) 108 .margin({ left: 11, top: 10 }) 109 } 110 .width(300) 111 .height(200) 112 .viewPort({ 113 x: 0, 114 y: 0, 115 width: 310, 116 height: 310 117 }) 118 .strokeLineJoin(LineJoinStyle.Miter) 119 .strokeMiterLimit(5) 120 .onClick(() => { 121 // Trigger the check box state change upon click. 122 if (config.selected) { 123 config.triggerChange(false); 124 } else { 125 config.triggerChange(true); 126 } 127 }) 128 .margin({ left: 150 }) 129 } 130} 131 132@Entry 133@Component 134struct Index { 135 build() { 136 Row() { 137 Column() { 138 Checkbox({ name: 'Check box status', group: 'checkboxGroup' }) 139 .select(true) 140 .contentModifier(new MyCheckboxStyle(Color.Red)) 141 .onChange((value: boolean) => { 142 console.info('Checkbox change is' + value); 143 }) 144 } 145 .width('100%') 146 } 147 .height('100%') 148 } 149} 150``` 151 152 153
