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