1# SegmentButtonV2 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @xieziang--> 5<!--Designer: @youzhi92--> 6<!--Tester: @TerryTsao--> 7<!--Adviser: @HelloCrease--> 8 9**SegmentButtonV2** is a versatile component that organizes related options into visually grouped buttons. It supports three variants: tab-style, capsule-style single-select, and capsule-style multi-select. 10 11> **NOTE** 12> 13> This component is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 14 15## Modules to Import 16 17``` 18import { TabSegmentButtonV2, CapsuleSegmentButtonV2, MultiCapsuleSegmentButtonV2, SegmentButtonV2Items } from '@kit.ArkUI'; 19``` 20 21## Child Components 22 23Not supported 24 25## TabSegmentButtonV2 26 27```ts 28TabSegmentButtonV2({ 29 items: SegmentButtonV2Items, 30 selectedIndex: number, 31 $selectedIndex?: OnSelectedIndexChange, 32 onItemClicked?: Callback<number>, 33 itemMinFontScale?: number | Resource, 34 itemMaxFontScale?: number | Resource, 35 itemSpace?: LengthMetrics, 36 itemFontSize?: LengthMetrics, 37 itemSelectedFontSize?: LengthMetrics, 38 itemFontColor?: ColorMetrics, 39 itemSelectedFontColor?: ColorMetrics, 40 itemFontWeight?: FontWeight, 41 itemSelectedFontWeight?: FontWeight, 42 itemBorderRadius?: LengthMetrics, 43 itemSelectedBackgroundColor?: ColorMetrics, 44 itemIconSize?: SizeT<LengthMetrics>, 45 itemIconFillColor?: ColorMetrics, 46 itemSelectedIconFillColor?: ColorMetrics, 47 itemSymbolFontSize?: LengthMetrics, 48 itemSymbolFontColor?: ColorMetrics, 49 itemSelectedSymbolFontColor?: ColorMetrics, 50 itemMinHeight?: LengthMetrics, 51 itemPadding?: LocalizedPadding, 52 itemShadow?: ShadowOptions | ShadowStyle, 53 buttonBackgroundColor?: ColorMetrics, 54 buttonBackgroundBlurStyle?: BlurStyle, 55 buttonBackgroundBlurStyleOptions?: BackgroundBlurStyleOptions, 56 buttonBackgroundEffect?: BackgroundEffectOptions, 57 buttonBorderRadius?: LengthMetrics, 58 buttonMinHeight?: LengthMetrics, 59 buttonPadding?: LengthMetrics, 60 languageDirection?: Direction 61}) 62``` 63 64**Decorator**: @ComponentV2 65 66**Atomic service API**: This API can be used in atomic services since API version 18. 67 68**System capability**: SystemCapability.ArkUI.ArkUI.Full 69 70**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 71 72| Name | Type | Read-Only| Optional| Decorator | Description | 73| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---- | ---- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 74| items | [SegmentButtonV2Items](#segmentbuttonv2items) | Yes | No | @Require<br>@Param | Items of the **TabSegmentButtonV2** component. | 75| selectedIndex | number | Yes | No | @Require<br>@Param | Index of the selected item of the **TabSegmentButtonV2** component. | 76| $selectedIndex | [OnSelectedIndexChange](#onselectedindexchange) | No | Yes | @Event | Callback invoked when the selected item of the **TabSegmentButtonV2** component changes. | 77| onItemClicked | Callback\<number> | No | Yes | @Event | Callback invoked when an item in the **TabSegmentButtonV2** component is clicked. | 78| buttonBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Background color of the **TabSegmentButtonV2** component.<br>Default value: **$r('sys.color.segment_button_v2_tab_button_background')** | 79| buttonBackgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Yes | Yes | @Param | Background blur style of the **TabSegmentButtonV2** component.<br>Default value: **undefined**. | 80| buttonBackgroundBlurStyleOptions | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10) | Yes | Yes | @Param | Background blur style options of the **TabSegmentButtonV2** component.<br>Default value: **undefined**. | 81| buttonBackgroundEffect | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | Yes | Yes | @Param | Background blur effect options of the **TabSegmentButtonV2** component.<br>Default value: **undefined**. | 82| buttonBorderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Background border radius of the **TabSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **$r('sys.float.segment_button_v2_background_corner_radius')** | 83| buttonMinHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Minimum height of the **TabSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **$r('sys.float.segment_button_v2_singleline_background_height')** for text-only buttons and icon-only buttons, and **$r('sys.float.segment_button_v2_doubleline_background_height')** for buttons with both an icon and text. | 84| buttonPadding | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Padding of the **TabSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **$r('sys.float.padding_level1')** | 85| itemSelectedBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Background color of the selected item of the **TabSegmentButtonV2** component.<br>Default value: **$r('sys.color.segment_button_v2_tab_selected_item_background')** | 86| itemMinHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Minimum height of the item of the **TabSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value:<br>**$r('sys.float.segment_button_v2_singleline_selected_height')** for text-only buttons and icon-only buttons, and **$r('sys.float.segment_button_v2_doubleline_selected_height')** for buttons with both an icon and text. | 87| itemPadding | [LocalizedPadding](ts-types.md#localizedpadding12) | Yes | Yes | @Param | Padding of the item of the **TabSegmentButtonV2** component.<br> Default value: **{top: LengthMetrics.resource ($r('sys.float.padding_level2')), bottom: LengthMetrics.resource ($r('sys.float.padding_level2')), start: LengthMetrics.resource($r('sys.float.padding_level4')), end: LengthMetrics.resource($r('sys.float.padding_level4'))}**| 88| itemShadow | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10)| Yes | Yes | @Param | Shadow of the item of the **TabSegmentButtonV2** component.<br>Default value: **ShadowStyle.OUTER_DEFAULT_XS** | 89| itemSpace | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Space between items of the **TabSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **LengthMetrics.vp(0)**<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 90| itemMinFontScale | number \| [Resource](ts-types.md#resource) | Yes | Yes | @Param | Minimum font scale for the item of the **TabSegmentButtonV2** component.<br>Value range: [0, 1]<br>Default value: **0**.<br>**NOTE**<br>A value less than 0 is treated as **0**. A value greater than 1 is treated as **1**. Abnormal values are ineffective by default. | 91| itemMaxFontScale | number \| [Resource](ts-types.md#resource) | Yes | Yes | @Param | Maximum font scale for the item of the **TabSegmentButtonV2** component.<br>Value range: [1, 2]<br>Default value: **1**<br>**NOTE**<br>A value less than 1 is treated as **1**. A value greater than 2 is treated as **2**. Abnormal values are ineffective by default. | 92| itemFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Font size of the unselected item of the **TabSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **14fp**.<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 93| itemSelectedFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Font size of the selected item of the **TabSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **14fp**.<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 94| itemFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Font color of the unselected item of the **TabSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_secondary')**. | 95| itemSelectedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Font color of the selected item of the **TabSegmentButtonV2** component.<br> Default value: **$r('sys.color.font_primary')**. | 96| itemFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Yes | Yes | @Param | Font weight of the unselected item of the **TabSegmentButtonV2** component.<br>Default value: **FontWeight.Medium** | 97| itemSelectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Yes | Yes | @Param | Font weight of the selected item of the **TabSegmentButtonV2** component.<br>Default value: **FontWeight.Medium** | 98| itemBorderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Individual button border radius of the **TabSegmentButtonV2** component.<br>Value range: [0, +∞).<br> Default value: **$r('sys.float.segment_button_v2_selected_corner_radius')**. | 99| itemIconSize | [SizeT](../js-apis-arkui-graphics.md#sizett12)\<[LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)> | Yes | Yes | @Param | Individual button icon size of the **TabSegmentButtonV2** component.<br>Value range: [0, +∞).<br> Default value: **{ width: LengthMetrics.vp(24), height: LengthMetrics.vp(24) }**. | 100| itemIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Icon color of the unselected item of the **TabSegmentButtonV2** component.<br> Default value: **$r('sys.color.font_secondary')**. | 101| itemSelectedIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Icon color of the selected item of the **TabSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_primary')**. | 102| itemSymbolFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Size of the HM Symbol icon of the item in the **TabSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **20fp**<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 103| itemSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Color of the HM Symbol icon of the unselected items in the **TabSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_secondary')**. | 104| itemSelectedSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Color of the HM Symbol icon of the selected item in the **TabSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_primary')**. | 105| languageDirection | [Direction](ts-appendix-enums.md#direction) | Yes | Yes | @Param | Language direction of the **TabSegmentButtonV2** component.<br>Default value: **Direction.Auto**. | 106 107## CapsuleSegmentButtonV2 108 109```ts 110CapsuleSegmentButtonV2({ 111 items: SegmentButtonV2Items, 112 selectedIndex: number, 113 $selectedIndex?: OnSelectedIndexChange, 114 onItemClicked?: Callback<number>, 115 itemMinFontScale?: number | Resource, 116 itemMaxFontScale?: number | Resource, 117 itemSpace?: LengthMetrics, 118 itemFontSize?: LengthMetrics, 119 itemSelectedFontSize?: LengthMetrics, 120 itemFontColor?: ColorMetrics, 121 itemSelectedFontColor?: ColorMetrics, 122 itemFontWeight?: FontWeight, 123 itemSelectedFontWeight?: FontWeight, 124 itemBorderRadius?: LengthMetrics, 125 itemSelectedBackgroundColor?: ColorMetrics, 126 itemIconSize?: SizeT<LengthMetrics>, 127 itemIconFillColor?: ColorMetrics, 128 itemSelectedIconFillColor?: ColorMetrics, 129 itemSymbolFontSize?: LengthMetrics, 130 itemSymbolFontColor?: ColorMetrics, 131 itemSelectedSymbolFontColor?: ColorMetrics, 132 itemMinHeight?: LengthMetrics, 133 itemPadding?: LocalizedPadding, 134 itemShadow?: ShadowOptions | ShadowStyle, 135 buttonBackgroundColor?: ColorMetrics, 136 buttonBackgroundBlurStyle?: BlurStyle, 137 buttonBackgroundBlurStyleOptions?: BackgroundBlurStyleOptions, 138 buttonBackgroundEffect?: BackgroundEffectOptions, 139 buttonBorderRadius?: LengthMetrics, 140 buttonMinHeight?: LengthMetrics, 141 buttonPadding?: LengthMetrics, 142 languageDirection?: Direction 143}) 144``` 145 146**Decorator**: @ComponentV2 147 148**Atomic service API**: This API can be used in atomic services since API version 18. 149 150**System capability**: SystemCapability.ArkUI.ArkUI.Full 151 152**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 153 154| Name | Type | Read-Only| Optional| Decorator | Description | 155| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---- | ---- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 156| items | [SegmentButtonV2Items](#segmentbuttonv2items) | Yes | No | @Require<br>@Param | Items of the **CapsuleSegmentButtonV2** component. | 157| selectedIndex | number | Yes | No | @Require<br>@Param | Index of the selected item of the **CapsuleSegmentButtonV2** component. | 158| $selectedIndex | [OnSelectedIndexChange](#onselectedindexchange) | No | Yes | @Event | Callback invoked when the selected item of the **CapsuleSegmentButtonV2** component changes. | 159| onItemClicked | Callback\<number> | No | Yes | @Event | Callback invoked when an item in the **CapsuleSegmentButtonV2** component is clicked. | 160| buttonBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Background color of the **CapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.segment_button_v2_tab_button_background')** | 161| buttonBackgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Yes | Yes | @Param | Background blur style of the **CapsuleSegmentButtonV2** component.<br>Default value: **undefined**. | 162| buttonBackgroundBlurStyleOptions | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10) | Yes | Yes | @Param | Background blur style options of the **CapsuleSegmentButtonV2** component.<br>Default value: **undefined**. | 163| buttonBackgroundEffect | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | Yes | Yes | @Param | Background blur effect options of the **CapsuleSegmentButtonV2** component.<br>Default value: **undefined**. | 164| buttonBorderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Background border radius of the **CapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **$r('sys.float.segment_button_v2_background_corner_radius')** | 165| buttonMinHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Minimum height of the **CapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **$r('sys.float.segment_button_v2_singleline_background_height')** for text-only buttons and icon-only buttons, and **$r('sys.float.segment_button_v2_doubleline_background_height')** for buttons with both an icon and text. | 166| buttonPadding | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Padding of the **CapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **$r('sys.float.padding_level1')** | 167| itemSelectedBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Background color of the selected item of the **CapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.comp_background_emphasize')** | 168| itemMinHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Minimum height of the item of the **CapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value:<br>**$r('sys.float.segment_button_v2_singleline_selected_height')** for text-only buttons and icon-only buttons, and **$r('sys.float.segment_button_v2_doubleline_selected_height')** for buttons with both an icon and text. | 169| itemPadding | [LocalizedPadding](ts-types.md#localizedpadding12) | Yes | Yes | @Param | Padding of the item of the **CapsuleSegmentButtonV2** component.<br> Default value: **{top: LengthMetrics.resource ($r('sys.float.padding_level2')), bottom: LengthMetrics.resource ($r('sys.float.padding_level2')), start: LengthMetrics.resource($r('sys.float.padding_level4')), end: LengthMetrics.resource($r('sys.float.padding_level4'))}**| 170| itemShadow | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10)| Yes | Yes | @Param | Shadow of the item of the **CapsuleSegmentButtonV2** component.<br>Default value: **ShadowStyle.OUTER_DEFAULT_XS** | 171| itemSpace | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Space between items of the **CapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **LengthMetrics.vp(0)**.<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 172| itemMinFontScale | number \| [Resource](ts-types.md#resource) | Yes | Yes | @Param | Minimum font scale for the item of the **CapsuleSegmentButtonV2** component.<br>Value range: [0, 1]<br>Default value: **0**.<br>**NOTE**<br>A value less than 0 is treated as **0**. A value greater than 1 is treated as **1**. Abnormal values are ineffective by default. | 173| itemMaxFontScale | number \| [Resource](ts-types.md#resource) | Yes | Yes | @Param | Maximum font scale for the item of the **CapsuleSegmentButtonV2** component.<br>Value range: [1, 2]<br>Default value: **1**<br>**NOTE**<br>A value less than 1 is treated as **1**. A value greater than 2 is treated as **2**. Abnormal values are ineffective by default. | 174| itemFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Font size of the unselected item of the **CapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **14fp**.<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 175| itemSelectedFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Font size of the selected item of the **CapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **14fp**.<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 176| itemFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Font color of the unselected item of the **CapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_secondary')**. | 177| itemSelectedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Font color of the selected item of the **CapsuleSegmentButtonV2** component.<br> Default value: **$r('sys.color.font_on_primary')**. | 178| itemFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Yes | Yes | @Param | Font weight of the unselected item of the **CapsuleSegmentButtonV2** component.<br>Default value: **FontWeight.Medium** | 179| itemSelectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Yes | Yes | @Param | Font weight of the selected item of the **CapsuleSegmentButtonV2** component.<br>Default value: **FontWeight.Medium** | 180| itemBorderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Individual button border radius of the **CapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br> Default value: **$r('sys.float.segment_button_v2_selected_corner_radius')**. | 181| itemIconSize | [SizeT](../js-apis-arkui-graphics.md#sizett12)\<[LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)> | Yes | Yes | @Param | Size of the image icon of the item in the **CapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br> Default value: **{ width: LengthMetrics.vp(24), height: LengthMetrics.vp(24) }**. | 182| itemIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Icon color of the unselected item of the **CapsuleSegmentButtonV2** component.<br> Default value: **$r('sys.color.font_secondary')**. | 183| itemSelectedIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Icon color of the selected item of the **CapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_on_primary')**. | 184| itemSymbolFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Size of the HM Symbol icon of the item in the **CapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **20fp**<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 185| itemSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Color of the HM Symbol icon of the unselected items in the **CapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_secondary')**. | 186| itemSelectedSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Color of the HM Symbol icon of the selected item in the **CapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_on_primary')**. | 187| languageDirection | [Direction](ts-appendix-enums.md#direction) | Yes | Yes | @Param | Language direction of the **CapsuleSegmentButtonV2** component.<br>Default value: **Direction.Auto**. | 188 189## MultiCapsuleSegmentButtonV2 190 191```ts 192MultiCapsuleSegmentButtonV2({ 193 items: SegmentButtonV2Items, 194 selectedIndexes: number[], 195 $selectedIndexes: OnSelectedIndexesChange, 196 onItemClicked?: Callback<number>, 197 itemMinFontScale?: number | Resource, 198 itemMaxFontScale?: number | Resource, 199 itemSpace?: LengthMetrics, 200 itemFontColor?: ColorMetrics, 201 itemSelectedFontColor?: ColorMetrics, 202 itemFontSize?: LengthMetrics, 203 itemSelectedFontSize?: LengthMetrics, 204 itemFontWeight?: FontWeight, 205 itemSelectedFontWeight?: FontWeight, 206 itemBorderRadius?: LengthMetrics, 207 itemBackgroundColor?: ColorMetrics, 208 itemBackgroundEffect?: BackgroundEffectOptions, 209 itemBackgroundBlurStyle?: BlurStyle, 210 itemBackgroundBlurStyleOptions?: BackgroundBlurStyleOptions, 211 itemSelectedBackgroundColor?: ColorMetrics, 212 itemIconSize?: SizeT<LengthMetrics>, 213 itemIconFillColor?: ColorMetrics, 214 itemSelectedIconFillColor?: ColorMetrics, 215 itemSymbolFontSize?: LengthMetrics, 216 itemSymbolFontColor?: ColorMetrics, 217 itemSelectedSymbolFontColor?: ColorMetrics, 218 itemMinHeight?: LengthMetrics, 219 itemPadding?: LocalizedPadding, 220 languageDirection?: Direction 221}) 222``` 223 224**Decorator**: @ComponentV2 225 226**Atomic service API**: This API can be used in atomic services since API version 18. 227 228**System capability**: SystemCapability.ArkUI.ArkUI.Full 229 230**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 231 232| Name | Type | Read-Only| Optional| Decorator | Description | 233| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---- | ---- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 234| items | [SegmentButtonV2Items](#segmentbuttonv2items) | Yes | No | @Require<br>@Param | Items of the **MultiCapsuleSegmentButtonV2** component. | 235| selectedIndexes | number[] | Yes | No | @Require<br>@Param | Index of the selected item of the **MultiCapsuleSegmentButtonV2** component. | 236| $selectedIndexes | [OnSelectedIndexesChange](#onselectedindexeschange) | No | Yes | @Event | Callback invoked when the selected item of the **MultiCapsuleSegmentButtonV2** component changes. | 237| onItemClicked | Callback\<number> | No | Yes | @Event | Callback invoked when an item in the **MultiCapsuleSegmentButtonV2** component is clicked. | 238| itemBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Background color of the unselected item of the **MultiCapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.segment_button_v2_multi_capsule_button_background')** | 239| itemBackgroundEffect | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | Yes | Yes | @Param | Background effect of the unselected item of the **MultiCapsuleSegmentButtonV2** component. | 240| itemBackgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Yes | Yes | @Param | Background blur effect of the unselected item of the **MultiCapsuleSegmentButtonV2** component. | 241| itemBackgroundBlurStyleOptions | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10) | Yes | Yes | @Param | Background blur style options of the unselected item of the **MultiCapsuleSegmentButtonV2** component. | 242| itemSelectedBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Background color of the selected item of the **MultiCapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.comp_background_emphasize')** | 243| itemMinHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Minimum height of the item of the **MultiCapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value:<br>**$r('sys.float.segment_button_v2_singleline_selected_height')** for text-only buttons and icon-only buttons, and **$r('sys.float.segment_button_v2_doubleline_selected_height')** for buttons with both an icon and text. | 244| itemPadding | [LocalizedPadding](ts-types.md#localizedpadding12) | Yes | Yes | @Param | Padding of the item of the **MultiCapsuleSegmentButtonV2** component.<br> Default value: **{top: LengthMetrics.resource ($r('sys.float.padding_level2')), bottom: LengthMetrics.resource ($r('sys.float.padding_level2')), start: LengthMetrics.resource($r('sys.float.padding_level4')), end: LengthMetrics.resource($r('sys.float.padding_level4'))}**| 245| itemSpace | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Space between items of the **MultiCapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **LengthMetrics.vp(1)**<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 246| itemMinFontScale | number \| [Resource](ts-types.md#resource) | Yes | Yes | @Param | Minimum font scale for the item of the **MultiCapsuleSegmentButtonV2** component.<br>Value range: [0, 1]<br>Default value: **0**.<br>**NOTE**<br>A value less than 0 is treated as **0**. A value greater than 1 is treated as **1**. Abnormal values are ineffective by default. | 247| itemMaxFontScale | number \| [Resource](ts-types.md#resource) | Yes | Yes | @Param | Maximum font scale for the item of the **MultiCapsuleSegmentButtonV2** component.<br>Value range: [1, 2]<br>Default value: **1**<br>**NOTE**<br>A value less than 1 is treated as **1**. A value greater than 2 is treated as **2**. Abnormal values are ineffective by default. | 248| itemSelectedFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Font size of the selected item of the **MultiCapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **14fp**.<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 249| itemFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Font color of the unselected item of the **MultiCapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_secondary')**. | 250| itemFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Font size of the unselected item of the **MultiCapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **14fp**.<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 251| itemSelectedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Font color of the selected item of the **MultiCapsuleSegmentButtonV2** component.<br> Default value: **$r('sys.color.font_on_primary')**. | 252| itemFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Yes | Yes | @Param | Font weight of the unselected item of the **MultiCapsuleSegmentButtonV2** component.<br>Default value: **FontWeight.Medium** | 253| itemSelectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Yes | Yes | @Param | Font weight of the selected item of the **MultiCapsuleSegmentButtonV2** component.<br>Default value: **FontWeight.Medium** | 254| itemBorderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Individual button border radius of the **MultiCapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br> Default value: **$r('sys.float.segment_button_v2_multi_corner_radius')** | 255| itemIconSize | [SizeT](../js-apis-arkui-graphics.md#sizett12)\<[LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)> | Yes | Yes | @Param | Size of the image icon of the item in the **MultiCapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br> Default value: **{ width: LengthMetrics.vp(24), height: LengthMetrics.vp(24) }**. | 256| itemIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Icon color of the unselected item of the **MultiCapsuleSegmentButtonV2** component.<br> Default value: **$r('sys.color.font_secondary')**. | 257| itemSelectedIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Icon color of the selected item of the **MultiCapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_on_primary')**. | 258| itemSymbolFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Yes | @Param | Size of the HM Symbol icon of the item in the **MultiCapsuleSegmentButtonV2** component.<br>Value range: [0, +∞).<br>Default value: **20fp**<br>**NOTE**<br>Percentage values are not supported. If an invalid value is set, the default value is used. | 259| itemSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Color of the HM Symbol icon of the unselected items in the **MultiCapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_secondary')**. | 260| itemSelectedSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Yes | @Param | Color of the HM Symbol icon of the selected item in the **MultiCapsuleSegmentButtonV2** component.<br>Default value: **$r('sys.color.font_on_primary')**. | 261| languageDirection | [Direction](ts-appendix-enums.md#direction) | Yes | Yes | @Param | Language direction of the **MultiCapsuleSegmentButtonV2** component.<br>Default value: **Direction.Auto**. | 262 263## SegmentButtonV2Items 264 265Represents items of the **SegmentButtonV2** component. 266 267This parameter is inherited from Array\<[SegmentButtonV2Item](#segmentbuttonv2item)>. 268 269**Decorator type**: @ObservedV2 270 271**Atomic service API**: This API can be used in atomic services since API version 18. 272 273**System capability**: SystemCapability.ArkUI.ArkUI.Full 274 275**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 276 277### constructor 278 279constructor(items: SegmentButtonV2ItemOptions[]) 280 281Constructs a **SegmentButtonV2ItemOptions** instance. 282 283**Atomic service API**: This API can be used in atomic services since API version 18. 284 285**System capability**: SystemCapability.ArkUI.ArkUI.Full 286 287**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 288 289**Parameters** 290 291| Name | Type | Mandatory| Description | 292| ----- | ----------------------------------------------------------------- | ---- | -------------------------- | 293| items | [SegmentButtonV2ItemOptions](#segmentbuttonv2itemoptions)[] | Yes | Options of the item of the **SegmentButtonV2** component.| 294 295### hasHybrid 296 297get hasHybrid():boolean 298 299Obtains whether there is an item with both an icon and text. 300 301**Atomic service API**: This API can be used in atomic services since API version 18. 302 303**System capability**: SystemCapability.ArkUI.ArkUI.Full 304 305**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 306 307**Return value** 308 309| Type | Description | 310| ------- | -------------------- | 311| boolean | Whether there is an item with both an icon and text.<br>The value **true** indicates that there is an item with both an icon and text; the value **false** indicates the opposite.| 312 313## SegmentButtonV2Item 314 315**Decorator type**: @ObservedV2 316 317**Atomic service API**: This API can be used in atomic services since API version 18. 318 319**System capability**: SystemCapability.ArkUI.ArkUI.Full 320 321**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 322 323### Properties 324 325**Atomic service API**: This API can be used in atomic services since API version 18. 326 327**System capability**: SystemCapability.ArkUI.ArkUI.Full 328 329**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 330 331| Name | Type | Mandatory| Decorator| Description | 332| ------------------------ | -------------------------------------------------------------------- | ------ | ---- | ----------------------------------------------- | 333| text | [ResourceStr](ts-types.md#resourcestr) | No| @Trace | Item text of the **SegmentButtonV2** component.<br>Default value: **undefined**. | 334| icon | [ResourceStr](ts-types.md#resourcestr) | No| @Trace | Image icon of the item of the **SegmentButtonV2** component.<br>Default value: **undefined**. | 335| symbol | [Resource](ts-types.md#resource) | No| @Trace | HM Symbol icon of the item of the **SegmentButtonV2** component.<br>Default value: **undefined**. | 336| enabled | boolean | Yes| @Trace | Whether the item of the **SegmentButtonV2** component is enabled.<br>Default value: **true**.<br>The value **true** means that the item is enabled, and **false** means the opposite. | 337| textModifier | [TextModifier](ts-universal-attributes-attribute-modifier.md) | No| @Trace | Text modifier for the item of the **SegmentButtonV2** component.<br>Default value: **undefined**. | 338| iconModifier | [ImageModifier](ts-universal-attributes-attribute-modifier.md) | No| @Trace | Image icon modifier for the item of the **SegmentButtonV2** component.<br>Default value: **undefined**. | 339| symbolModifier | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No| @Trace | HM Symbol icon modifier for the item of the **SegmentButtonV2** component.<br>Default value: **undefined**.| 340| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No| @Trace | Accessibility text of the item of the **SegmentButtonV2** component.<br>Default value: **""**. | 341| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No| @Trace | Accessibility description of the item of the **SegmentButtonV2** component.<br>Default value: **""**. | 342| accessibilityLevel | string | No| @Trace | [Accessibility level](ts-universal-attributes-accessibility.md#accessibilitylevel) of the **SegmentButtonV2** component.<br>Default value: **"auto"**. | 343 344> **Description** 345> 346> 1. When both **symbol** and **icon** are set, **symbol** has a higher display priority. 347> 2. When both **symbol** and **symbolModifier** are set with HM Symbol, **symbolModifier** has a higher display priority. 348 349### constructor 350 351constructor(options: SegmentButtonV2ItemOptions) 352 353Constructs a **SegmentButtonV2ItemOptions** instance. 354 355**Atomic service API**: This API can be used in atomic services since API version 18. 356 357**System capability**: SystemCapability.ArkUI.ArkUI.Full 358 359**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 360 361**Parameters** 362 363| Name | Type | Mandatory| Description | 364| ------- | --------------------------------------------------------- | ---- | ---------------------- | 365| options | [SegmentButtonV2ItemOptions](#segmentbuttonv2itemoptions) | Yes | Options of the item of the **SegmentButtonV2** component.| 366 367### isHybrid 368 369get isHybrid():boolean 370 371Obtains whether the item is set with both an icon and text. 372 373**Atomic service API**: This API can be used in atomic services since API version 18. 374 375**System capability**: SystemCapability.ArkUI.ArkUI.Full 376 377**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 378 379**Return value** 380 381| Type | Description | 382| ------- | ------------------------------ | 383| boolean | Whether the item is set with both an icon and text.| 384 385## SegmentButtonV2ItemOptions 386 387Represents options of the item of the **SegmentButtonV2** component. 388 389**Atomic service API**: This API can be used in atomic services since API version 18. 390 391**System capability**: SystemCapability.ArkUI.ArkUI.Full 392 393**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 394 395### Properties 396 397| Name | Type | Mandatory| Description | 398| ------------------------ | -------------------------------------------------------------------- | ---- | ----------------------------------------------- | 399| text | [ResourceStr](ts-types.md#resourcestr) | No | Item text of the **SegmentButtonV2** component.<br>Default value: **undefined**. | 400| icon | [ResourceStr](ts-types.md#resourcestr) | No | Image icon of the item of the **SegmentButtonV2** component.<br>Default value: **undefined**. | 401| symbol | [Resource](ts-types.md#resource) | No | HM Symbol icon of the item of the **SegmentButtonV2** component.<br>Default value: **undefined**. | 402| enabled | boolean | No | Whether the item of the **SegmentButtonV2** component is enabled.<br>Default value: **true**.<br>The value **true** means that the item is enabled, and **false** means the opposite. | 403| textModifier | [TextModifier](ts-universal-attributes-attribute-modifier.md) | No | Text modifier for the item of the **SegmentButtonV2** component.<br>Default value: **undefined**. | 404| iconModifier | [ImageModifier](ts-universal-attributes-attribute-modifier.md) | No | Image icon modifier for the item of the **SegmentButtonV2** component.<br>Default value: **undefined**. | 405| symbolModifier | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | HM Symbol icon modifier for the item of the **SegmentButtonV2** component.<br>Default value: **undefined**.| 406| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility text of the item of the **SegmentButtonV2** component.<br>Default value: **""**. | 407| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility description of the item of the **SegmentButtonV2** component.<br>Default value: **""**. | 408| accessibilityLevel | string | No | [Accessibility level](ts-universal-attributes-accessibility.md#accessibilitylevel) of the **SegmentButtonV2** component.<br>Default value: **"auto"**. | 409 410> **Description** 411> 412> 1. When both **symbol** and **icon** are set, **symbol** has a higher display priority. 413> 2. When both **symbol** and **symbolModifier** are set with HM Symbol, **symbolModifier** has a higher display priority. 414 415## OnSelectedIndexChange 416 417type OnSelectedIndexChange = (selectedIndex: number) => void 418 419Defines a callback invoked when the selected item of the **SegmentButtonV2** component changes. 420 421**Atomic service API**: This API can be used in atomic services since API version 18. 422 423**System capability**: SystemCapability.ArkUI.ArkUI.Full 424 425**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 426 427**Parameters** 428 429| Name | Type | Mandatory| Description | 430| ------------- | ------ | ---- | ------------------ | 431| selectedIndex | number | Yes | Index of the selected item of the **SegmentButtonV2** component.| 432 433## OnSelectedIndexesChange 434 435type OnSelectedIndexesChange = (selectedIndexes: number[]) => void 436 437Defines a callback invoked when selected items of the **SegmentButtonV2** component changes. 438 439**Atomic service API**: This API can be used in atomic services since API version 18. 440 441**System capability**: SystemCapability.ArkUI.ArkUI.Full 442 443**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 444 445**Parameters** 446 447| Name | Type | Mandatory| Description | 448| --------------- | -------- | ---- | ---------------------- | 449| selectedIndexes | number[] | Yes | Indexes of selected items of the **SegmentButtonV2** component.| 450 451## Example 452 453### Example 1: Using the TabSegmentButtonV2 454 455This example describes how to use the **TabSegmentButtonV2** component. 456 457```ts 458import { SegmentButtonV2Items, TabSegmentButtonV2 } from '@kit.ArkUI'; 459 460@Entry 461@ComponentV2 462struct TabSegmentButtonV2Example { 463 @Local textItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 464 { text: 'Phone'}, 465 { text: 'Tablet' }, 466 { text: '2-in-1' }, 467 { text: 'Wearable' }, 468 ]); 469 @Local textSelectedIndex: number = 0; 470 @Local imageItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 471 { icon: $r('sys.media.ohos_ic_public_device_phone') }, 472 { icon: $r('sys.media.ohos_ic_public_device_pad') }, 473 { icon: $r('sys.media.ohos_ic_public_device_matebook') }, 474 { icon: $r('sys.media.ohos_ic_public_device_watch') }, 475 ]); 476 @Local imageSelectedIndex: number = 0; 477 @Local symbolItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 478 { symbol: $r('sys.symbol.phone') }, 479 { symbol: $r('sys.symbol.pad') }, 480 { symbol: $r('sys.symbol.matebook') }, 481 { symbol: $r('sys.symbol.watch') }, 482 ]); 483 @Local symbolSelectedIndex: number = 0; 484 @Local hybridItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 485 { text: 'Phone', symbol: $r('sys.symbol.phone') }, 486 { text: 'Tablet', symbol: $r('sys.symbol.pad') }, 487 { text: '2-in-1', symbol: $r('sys.symbol.matebook') }, 488 { text: 'Wearable', symbol: $r('sys.symbol.watch') }, 489 ]); 490 @Local hybridSelectedIndex: number = 0; 491 @Local freeItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 492 { text: 'Year' }, 493 { text: 'Month' }, 494 { text: 'Week' }, 495 { text: 'Day' }, 496 { icon: $r('sys.media.ohos_ic_public_search_filled') }, 497 ]); 498 @Local freeSelectedIndex: number = 0; 499 500 build() { 501 Scroll() { 502 Column({ space: 12 }) { 503 VCard({ title: 'Text Button' }) { 504 TabSegmentButtonV2({ 505 items: this.textItems, 506 selectedIndex: this.textSelectedIndex!!, 507 }) 508 } 509 510 VCard({ title: 'Image Button' }) { 511 TabSegmentButtonV2({ 512 items: this.imageItems, 513 selectedIndex: this.imageSelectedIndex!!, 514 }) 515 } 516 517 VCard({ title: 'Symbol Button' }) { 518 TabSegmentButtonV2({ 519 items: this.symbolItems, 520 selectedIndex: this.symbolSelectedIndex!!, 521 }) 522 } 523 524 VCard({ title: 'Text and Icon Button' }) { 525 TabSegmentButtonV2({ 526 items: this.hybridItems, 527 selectedIndex: this.hybridSelectedIndex!!, 528 }) 529 } 530 531 VCard({ title: 'Custom Button' }) { 532 TabSegmentButtonV2({ 533 items: this.freeItems, 534 selectedIndex: this.freeSelectedIndex!!, 535 }) 536 } 537 } 538 .constraintSize({ minHeight: '100%' }) 539 .justifyContent(FlexAlign.Start) 540 .padding(16) 541 } 542 .backgroundColor('#f1f3f5') 543 .width('100%') 544 .height('100%') 545 } 546} 547 548@Builder 549function Noop() { 550} 551 552@Component 553export struct VCard { 554 @Prop 555 title: ResourceStr; 556 @BuilderParam 557 content: () => void = Noop; 558 559 build() { 560 Column({ space: 8 }) { 561 if (this.title) { 562 Text(this.title) 563 .maxLines(1) 564 .textOverflow({ overflow: TextOverflow.Ellipsis }) 565 .constraintSize({ maxWidth: '80%' }) 566 } 567 this.content() 568 } 569 .backgroundColor(Color.White) 570 .borderRadius(8) 571 .padding(8) 572 .width('100%') 573 } 574} 575``` 576 577 578 579### Example 2: Using the CapsuleSegmentButtonV2 580 581This example describes how to use the **CapsuleSegmentButtonV2** component. 582 583```ts 584import { CapsuleSegmentButtonV2, SegmentButtonV2Items } from '@kit.ArkUI'; 585 586@Entry 587@ComponentV2 588struct CapsuleSegmentButtonV2Example { 589 @Local textItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 590 { text: 'Phone'}, 591 { text: 'Tablet' }, 592 { text: '2-in-1' }, 593 { text: 'Wearable' }, 594 ]); 595 @Local textSelectedIndex: number = 0; 596 @Local imageItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 597 { icon: $r('sys.media.ohos_ic_public_device_phone') }, 598 { icon: $r('sys.media.ohos_ic_public_device_pad') }, 599 { icon: $r('sys.media.ohos_ic_public_device_matebook') }, 600 { icon: $r('sys.media.ohos_ic_public_device_watch') }, 601 ]); 602 @Local imageSelectedIndex: number = 0; 603 @Local symbolItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 604 { symbol: $r('sys.symbol.phone') }, 605 { symbol: $r('sys.symbol.pad') }, 606 { symbol: $r('sys.symbol.matebook') }, 607 { symbol: $r('sys.symbol.watch') }, 608 ]); 609 @Local symbolSelectedIndex: number = 0; 610 @Local hybridItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 611 { text: 'Phone', symbol: $r('sys.symbol.phone') }, 612 { text: 'Tablet', symbol: $r('sys.symbol.pad') }, 613 { text: '2-in-1', symbol: $r('sys.symbol.matebook') }, 614 { text: 'Wearable', symbol: $r('sys.symbol.watch') }, 615 ]); 616 @Local hybridSelectedIndex: number = 0; 617 @Local freeItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 618 { text: 'Year' }, 619 { text: 'Month' }, 620 { text: 'Week' }, 621 { text: 'Day' }, 622 { icon: $r('sys.media.ohos_ic_public_search_filled') }, 623 ]); 624 @Local freeSelectedIndex: number = 0; 625 626 build() { 627 Scroll() { 628 Column({ space: 12 }) { 629 VCard({ title: 'Text Button' }) { 630 CapsuleSegmentButtonV2({ 631 items: this.textItems, 632 selectedIndex: this.textSelectedIndex!!, 633 }) 634 } 635 636 VCard({ title: 'Image Button' }) { 637 CapsuleSegmentButtonV2({ 638 items: this.imageItems, 639 selectedIndex: this.imageSelectedIndex!!, 640 }) 641 } 642 643 VCard({ title: 'Symbol Button' }) { 644 CapsuleSegmentButtonV2({ 645 items: this.symbolItems, 646 selectedIndex: this.symbolSelectedIndex!!, 647 }) 648 } 649 650 VCard({ title: 'Text and Icon Button' }) { 651 CapsuleSegmentButtonV2({ 652 items: this.hybridItems, 653 selectedIndex: this.hybridSelectedIndex!!, 654 }) 655 } 656 657 VCard({ title: 'Custom Button' }) { 658 CapsuleSegmentButtonV2({ 659 items: this.freeItems, 660 selectedIndex: this.freeSelectedIndex!!, 661 }) 662 } 663 } 664 .constraintSize({ minHeight: '100%' }) 665 .justifyContent(FlexAlign.Start) 666 .padding(16) 667 } 668 .backgroundColor('#f1f3f5') 669 .width('100%') 670 .height('100%') 671 } 672} 673 674@Builder 675function Noop() { 676} 677 678@Component 679export struct VCard { 680 @Prop 681 title: ResourceStr; 682 @BuilderParam 683 content: () => void = Noop; 684 685 build() { 686 Column({ space: 8 }) { 687 if (this.title) { 688 Text(this.title) 689 .maxLines(1) 690 .textOverflow({ overflow: TextOverflow.Ellipsis }) 691 .constraintSize({ maxWidth: '80%' }) 692 } 693 this.content() 694 } 695 .backgroundColor(Color.White) 696 .borderRadius(8) 697 .padding(8) 698 .width('100%') 699 } 700} 701 702``` 703 704 705 706### Example 3: Using the MultiCapsuleSegmentButtonV2 707 708This example describes how to use the **MultiCapsuleSegmentButtonV2** component. 709 710```ts 711import { MultiCapsuleSegmentButtonV2, SegmentButtonV2Items } from '@kit.ArkUI'; 712 713@Entry 714@ComponentV2 715struct MultiCapsuleSegmentButtonV2Example { 716 @Local textItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 717 { text: 'Phone'}, 718 { text: 'Tablet' }, 719 { text: '2-in-1' }, 720 { text: 'Wearable' }, 721 ]); 722 @Local textSelectedIndexes: number[] = [0]; 723 @Local imageItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 724 { icon: $r('sys.media.ohos_ic_public_device_phone') }, 725 { icon: $r('sys.media.ohos_ic_public_device_pad') }, 726 { icon: $r('sys.media.ohos_ic_public_device_matebook') }, 727 { icon: $r('sys.media.ohos_ic_public_device_watch') }, 728 ]); 729 @Local imageSelectedIndexes: number[] = [0]; 730 @Local symbolItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 731 { symbol: $r('sys.symbol.phone') }, 732 { symbol: $r('sys.symbol.pad') }, 733 { symbol: $r('sys.symbol.matebook') }, 734 { symbol: $r('sys.symbol.watch') }, 735 ]); 736 @Local symbolSelectedIndexes: number[] = [0]; 737 @Local hybridItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 738 { text: 'Phone', symbol: $r('sys.symbol.phone') }, 739 { text: 'Tablet', symbol: $r('sys.symbol.pad') }, 740 { text: '2-in-1', symbol: $r('sys.symbol.matebook') }, 741 { text: 'Wearable', symbol: $r('sys.symbol.watch') }, 742 ]); 743 @Local hybridSelectedIndexes: number[] = [0]; 744 @Local freeItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 745 { text: 'Year' }, 746 { text: 'Month' }, 747 { text: 'Week' }, 748 { text: 'Day' }, 749 { icon: $r('sys.media.ohos_ic_public_search_filled') }, 750 ]); 751 @Local freeSelectedIndexes: number[] = [0]; 752 753 build() { 754 Scroll() { 755 Column({ space: 12 }) { 756 VCard({ title: 'Text Button' }) { 757 MultiCapsuleSegmentButtonV2({ 758 items: this.textItems, 759 selectedIndexes: this.textSelectedIndexes!!, 760 }) 761 } 762 763 VCard({ title: 'Image Button' }) { 764 MultiCapsuleSegmentButtonV2({ 765 items: this.imageItems, 766 selectedIndexes: this.imageSelectedIndexes!!, 767 }) 768 } 769 770 VCard({ title: 'Symbol Button' }) { 771 MultiCapsuleSegmentButtonV2({ 772 items: this.symbolItems, 773 selectedIndexes: this.symbolSelectedIndexes!!, 774 }) 775 } 776 777 VCard({ title: 'Text and Icon Button' }) { 778 MultiCapsuleSegmentButtonV2({ 779 items: this.hybridItems, 780 selectedIndexes: this.hybridSelectedIndexes!!, 781 }) 782 } 783 784 VCard({ title: 'Custom Button' }) { 785 MultiCapsuleSegmentButtonV2({ 786 items: this.freeItems, 787 selectedIndexes: this.freeSelectedIndexes!!, 788 }) 789 } 790 } 791 .constraintSize({ minHeight: '100%' }) 792 .justifyContent(FlexAlign.Start) 793 .padding(16) 794 } 795 .backgroundColor('#f1f3f5') 796 .width('100%') 797 .height('100%') 798 } 799} 800 801@Builder 802function Noop() { 803} 804 805@Component 806export struct VCard { 807 @Prop 808 title: ResourceStr; 809 @BuilderParam 810 content: () => void = Noop; 811 812 build() { 813 Column({ space: 8 }) { 814 if (this.title) { 815 Text(this.title) 816 .maxLines(1) 817 .textOverflow({ overflow: TextOverflow.Ellipsis }) 818 .constraintSize({ maxWidth: '80%' }) 819 } 820 this.content() 821 } 822 .backgroundColor(Color.White) 823 .borderRadius(8) 824 .padding(8) 825 .width('100%') 826 } 827} 828 829``` 830 831 832
