1# SegmentButton 2 3**SegmentButton** is a versatile component containing a group of related items, which can be tab-style, single-select, and multi-select buttons. 4 5>**NOTE** 6> 7>This component and its child components are supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Modules to Import 10 11``` 12import { SegmentButton, SegmentButtonOptions, SegmentButtonItemOptionsArray } from '@kit.ArkUI'; 13``` 14 15## Child Components 16 17Not supported 18 19## SegmentButton 20 21SegmentButton({ options: SegmentButtonOptions, selectedIndexes: number[], onItemClicked: Callback\<number\>, maxFontScale: number \| Resource }) 22 23**Decorator**: @Component 24 25**System capability**: SystemCapability.ArkUI.ArkUI.Full 26 27| Name | Type | Mandatory| Decorator | Description | 28| --------------- | --------------------------------------------- | ---- | ----------- | ------------------------------------------------------------ | 29| options | [SegmentButtonOptions](#segmentbuttonoptions) | Yes | @ObjectLink | Options of the **SegmentButton** component.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 30| selectedIndexes | number[] | Yes | @Link | Indexes of selected items of the **SegmentButton**. The index starts from 0 and increments by 1.<br>**NOTE**<br>**selectedIndexes** is decorated with [@Link](../../../quick-start/arkts-link.md) to implement parent-child two-way synchronization. If no items are selected, an empty array **[]** can be passed in.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 31| onItemClicked<sup>13+</sup> | Callback\<number\> | No| - | Callback invoked when an item in the **SegmentButton** is clicked. The index of the clicked item is passed in as the parameter.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 32| maxFontScale<sup>14+</sup> | number \| [Resource](ts-types.md#resource) | Yes| @Prop | Maximum font scale for the text in the **SegmentButton**.<br>Default value: **1**<br>Value range: [1, 2]<br>**NOTE**<br>Values less than 1 are treated as 1, and values greater than 2 are treated as 2.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 33 34>**NOTE** 35> 36>The **SegmentButton** component does not support the universal attributes. The component takes up the maximum width allowed by the content area, and evenly allocates the width among its items. It adapts its height automatically to the content (text and image), the minimum height being 28 vp. 37 38## SegmentButtonOptions 39 40Provides initial data and custom properties for the **SegmentButton** component. 41 42**Decorator Type**: @Observed 43 44**Atomic service API**: This API can be used in atomic services since API version 12. 45 46**System capability**: SystemCapability.ArkUI.ArkUI.Full 47 48### Properties 49 50| Name | Type | Mandatory | Description | 51| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 52| type | 'tab' \| 'capsule' | Yes | Type of the **SegmentButton**. | 53| multiply | boolean | Yes | Whether multiple items can be selected.<br>**NOTE**<br>The default value is **false**.<br>**true**: Multiple items can be selected.<br>**false**: Multiple items cannot be selected. For the **SegmentButton** component consisting of tab-style buttons, only one item can be selected. In this case, setting **multiply** to **true** does not take effect.| 54| buttons | [SegmentButtonItemOptionsArray](#segmentbuttonitemoptionsarray) | Yes| Button information, including the icon and text. | 55| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the unselected item.<br>Default value: **$r('sys.color.ohos_id_color_text_secondary')**| 56| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the selected item.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')** when **type** is **"tab"** and **$r('sys.color.ohos_id_color_foreground_contrary')** when **type** is **"capsule"**| 57| fontSize | [DimensionNoPercentage](#dimensionnopercentage) | Yes | Font size of the unselected item. It cannot be set in percentage.<br>Default value: **$r('sys.float.ohos_id_text_size_body2')**| 58| selectedFontSize | [DimensionNoPercentage](#dimensionnopercentage) | Yes | Font size of the selected item. It cannot be set in percentage.<br>Default value: **$r('sys.float.ohos_id_text_size_body2')**| 59| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Yes | Font weight of the unselected item.<br>Default value: **FontWeight.Regular**| 60| selectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Yes | Font weight of the selected item.<br>Default value: **FontWeight.Medium** | 61| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the unselected item.<br>Default value: **$r('sys.color.ohos_id_color_button_normal')**| 62| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the selected item.<br>Default value: **$r('sys.color.ohos_id_color_foreground_contrary')** when **type** is **"tab"** and **$r('sys.color.ohos_id_color_emphasize')** when **type** is **"capsule"**| 63| imageSize | [SizeOptions](ts-types.md#sizeoptions) | Yes | Image size.<br>Default value: **{ width: 24, height: 24 }**<br>**NOTE**<br>This property is effective only for buttons that contain icons.| 64| buttonPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | Yes| Button margin.<br>Default value: **{ top: 4, right: 8, bottom: 4, left: 8 }** for icon buttons and text buttons, and **{ top: 6, right: 8, bottom: 6, left: 8 }** for icon+text buttons.| 65| textPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | Yes| Text padding.<br>Default value: **0** | 66| localizedButtonPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | No | Button padding.<br>Default value:<br>Text-only buttons and icon-only buttons: **{ top: LengthMetrics.vp(4), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(4), start: LengthMetrics.vp(8) }**<br>Buttons with both an icon and text: **{ top: LengthMetrics.vp(6), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(6), start: LengthMetrics.vp(8) }**| 67| localizedTextPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | No | Text padding.<br>Default value: **0** | 68| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | No | Layout direction.<br>Default value: **Direction.Auto** | 69| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Yes | Background blur style applied between the content and the background.<br>Default value: **BlurStyle.NONE** | 70 71### constructor 72 73constructor(options: TabSegmentButtonOptions | CapsuleSegmentButtonOptions) 74 75A constructor used to create a **SegmentButtonOptions** instance. 76 77**Atomic service API**: This API can be used in atomic services since API version 12. 78 79**System capability**: SystemCapability.ArkUI.ArkUI.Full 80 81 82| Name | Type | Mandatory| Description | 83| ------- | ------------------------------------------------------------ | ---- | -------------------- | 84| options | [TabSegmentButtonOptions](#tabsegmentbuttonoptions) \| [CapsuleSegmentButtonOptions](#capsulesegmentbuttonoptions) | Yes| Options of the **SegmentButton** component.| 85 86### tab 87 88static tab(options: TabSegmentButtonConstructionOptions): SegmentButtonOptions 89 90Creates a **SegmentButtonOptions** object for the **SegmentButton** component consisting of tab-style buttons. 91 92**Atomic service API**: This API can be used in atomic services since API version 12. 93 94**System capability**: SystemCapability.ArkUI.ArkUI.Full 95 96 97| Name | Type | Mandatory| Description | 98| ------- | ------------------------------------------------------------ | ---- | -------------------- | 99| options | [TabSegmentButtonConstructionOptions](#tabsegmentbuttonconstructionoptions) | Yes | Options of the tab-style buttons.| 100 101**Return value** 102 103| Type | Description | 104| ------ | ------------------------ | 105| [SegmentButtonOptions](#segmentbuttonoptions) | **SegmentButtonOptions** object.| 106 107### capsule 108 109static capsule(options: CapsuleSegmentButtonConstructionOptions): SegmentButtonOptions 110 111Creates a **SegmentButtonOptions** object for the **SegmentButton** component consisting of single-select or multi-select buttons. 112 113**Atomic service API**: This API can be used in atomic services since API version 12. 114 115**System capability**: SystemCapability.ArkUI.ArkUI.Full 116 117 118| Name | Type | Mandatory| Description | 119| ------- | ------------------------------------------------------------ | ---- | --------------------------- | 120| options | [CapsuleSegmentButtonConstructionOptions](#capsulesegmentbuttonconstructionoptions) | Yes | Options of the single-select or multi-select buttons.| 121 122**Return value** 123 124| Type | Description | 125| ------ | ------------------------ | 126| [SegmentButtonOptions](#segmentbuttonoptions) | **SegmentButtonOptions** object.| 127 128## DimensionNoPercentage 129 130type DimensionNoPercentage = PX | VP | FP | LPX | Resource 131 132Represents the length union type that does not support values in percentage. 133 134**Atomic service API**: This API can be used in atomic services since API version 12. 135 136**System capability**: SystemCapability.ArkUI.ArkUI.Full 137 138| Type | Description | 139| -------------------------------- | --------------------------------------------- | 140| [PX](ts-types.md#px10) | Length in px. | 141| [VP](ts-types.md#vp10) | Length in vp. | 142| [FP](ts-types.md#fp10) | Length in fp. | 143| [LPX](ts-types.md#lpx10) | Length in lpx.| 144| [Resource](ts-types.md#resource) | Resource reference type, which is used to set the value of a component attribute. | 145 146## CommonSegmentButtonOptions 147 148Defines the attributes that can be customized for the segment button. 149 150**Atomic service API**: This API can be used in atomic services since API version 12. 151 152**System capability**: SystemCapability.ArkUI.ArkUI.Full 153 154### Properties 155 156| Name | Type | Mandatory | Description | 157| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 158| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the unselected item.<br>Default value: **$r('sys.color.ohos_id_color_text_secondary')**| 159| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the selected item.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')** when **type** is **"tab"** and **$r('sys.color.ohos_id_color_foreground_contrary')** when **type** is **"capsule"**| 160| fontSize | [DimensionNoPercentage](#dimensionnopercentage) | No | Font size of the unselected item. It cannot be set in percentage.<br>Default value: **$r('sys.float.ohos_id_text_size_body2')**| 161| selectedFontSize | [DimensionNoPercentage](#dimensionnopercentage) | No | Font size of the selected item. It cannot be set in percentage.<br>Default value: **$r('sys.float.ohos_id_text_size_body2')**| 162| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | No | Font weight of the unselected item.<br>Default value: **FontWeight.Regular**| 163| selectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | No | Font weight of the selected item.<br>Default value: **FontWeight.Medium**| 164| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the unselected item.<br>Default value: **$r('sys.color.ohos_id_color_button_normal')**| 165| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the selected item.<br>Default value: **$r('sys.color.ohos_id_color_foreground_contrary')** when **type** is **"tab"** and **$r('sys.color.ohos_id_color_emphasize')** when **type** is **"capsule"**| 166| imageSize | [SizeOptions](ts-types.md#sizeoptions) | No | Image size.<br>Default value: { width: 24, height: 24 }<br>**NOTE**<br>This property is effective only for buttons that contain icons.| 167| buttonPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | No| Button margin.<br>Default value: **{ top: 4, right: 8, bottom: 4, left: 8 }** for icon buttons and text buttons, and **{ top: 6, right: 8, bottom: 6, left: 8 }** for icon+text buttons.| 168| textPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | No| Text padding.<br>Default value: **0** | 169| localizedButtonPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | No | Button padding.<br>Default value:<br>Text-only buttons and icon-only buttons: **{ top: LengthMetrics.vp(4), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(4), start: LengthMetrics.vp(8) }**<br>Buttons with both an icon and text: **{ top: LengthMetrics.vp(6), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(6), start: LengthMetrics.vp(8) }**| 170| localizedTextPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | No | Text padding.<br>Default value: **0** | 171| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | No | Layout direction.<br>Default value: **Direction.Auto** | 172| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No | Background blur style applied between the content and the background.<br>Default value: **BlurStyle.NONE**| 173 174## TabSegmentButtonConstructionOptions 175 176Represents options for creating a **SegmentButton** component consisting of tab-style buttons. 177 178It inherits [CommonSegmentButtonOptions](#commonsegmentbuttonoptions). 179 180**Atomic service API**: This API can be used in atomic services since API version 12. 181 182**System capability**: SystemCapability.ArkUI.ArkUI.Full 183 184### Properties 185 186| Name | Type | Mandatory| Description | 187| ------- | ------------------------------------------------------------ | ---- | ---------- | 188| buttons | [ItemRestriction](#itemrestriction)\<[SegmentButtonTextItem](#segmentbuttontextitem)> | Yes | Button information.| 189 190## CapsuleSegmentButtonConstructionOptions 191 192Represents options for creating a **SegmentButton** component consisting of single-select or multi-select buttons. 193 194It inherits [CommonSegmentButtonOptions](#commonsegmentbuttonoptions). 195 196**Atomic service API**: This API can be used in atomic services since API version 12. 197 198**System capability**: SystemCapability.ArkUI.ArkUI.Full 199 200### Properties 201 202| Name | Type | Mandatory| Description | 203| -------- | ------------------------------------------------- | ---- | ----------------------------- | 204| buttons | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | Yes | Button information. | 205| multiply | boolean | No | Whether multiple items can be selected.<br>Default value: **false**| 206 207## ItemRestriction 208 209type ItemRestriction\<T> = [T, T, T?, T?, T?] 210 211Represents a tuple used to store button information. 212 213**Atomic service API**: This API can be used in atomic services since API version 12. 214 215**System capability**: SystemCapability.ArkUI.ArkUI.Full 216 217| Type | Description | 218| ----------------------------------------- | --------------------------------- | 219|[T, T, T?, T?, T?] | A tuple that contains two to five elements of the same type.| 220 221>**NOTE** 222> 223>A **SegmentButton** component supports two to five buttons. 224 225## SegmentButtonItemTuple 226 227type SegmentButtonItemTuple = ItemRestriction\<SegmentButtonTextItem> | ItemRestriction\<SegmentButtonIconItem> | ItemRestriction\<SegmentButtonIconTextItem> 228 229Represents the tuple union type used to store button information. 230 231**Atomic service API**: This API can be used in atomic services since API version 12. 232 233**System capability**: SystemCapability.ArkUI.ArkUI.Full 234 235| Type | Description | 236| ------------------------------------------------------------ | ------------------------- | 237| [ItemRestriction](#itemrestriction)\<[SegmentButtonTextItem](#segmentbuttontextitem)\> | A tuple of text-only button information. | 238| [ItemRestriction](#itemrestriction)\<[SegmentButtonIconItem](#segmentbuttoniconitem)\> | A tuple of icon-only button information. | 239| [ItemRestriction](#itemrestriction)\<[SegmentButtonIconTextItem](#segmentbuttonicontextitem)\> | A tuple of icon and text button information.| 240 241## SegmentButtonItemArray 242 243type SegmentButtonItemArray = Array\<SegmentButtonTextItem> | Array\<SegmentButtonIconItem> | Array\<SegmentButtonIconTextItem> 244 245Represents the array union type used to store button information. 246 247**Atomic service API**: This API can be used in atomic services since API version 12. 248 249**System capability**: SystemCapability.ArkUI.ArkUI.Full 250 251| Type | Description | 252| ------------------------------------------------------------ | ------------------------- | 253| Array\<[SegmentButtonTextItem](#segmentbuttontextitem)\> | An array of text-only button information. | 254| Array\<[SegmentButtonIconItem](#segmentbuttoniconitem)\> | An array of icon-only button information. | 255| Array\<[SegmentButtonIconTextItem](#segmentbuttonicontextitem)\> | An array of icon and text button information.| 256 257## SegmentButtonItemOptionsArray 258 259Represents an array for storing button information. 260 261**Decorator Type**: @Observed 262 263>**NOTE** 264> 265>A **SegmentButton** component supports two to five buttons. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five buttons. 266 267### constructor 268 269constructor(elements: SegmentButtonItemTuple) 270 271A constructor used to create a **SegmentButtonItemOptionsArray** instance. 272 273**Atomic service API**: This API can be used in atomic services since API version 12. 274 275**System capability**: SystemCapability.ArkUI.ArkUI.Full 276 277**Parameters** 278 279 280| Name | Type | Mandatory| Description | 281| -------- | ------------------------------------------------- | ---- | ---------- | 282| elements | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | Yes | Button information.| 283 284### push 285 286push(...items: SegmentButtonItemArray): number 287 288Adds the specified elements to the end of this array and returns the new length of the array. 289 290**Atomic service API**: This API can be used in atomic services since API version 12. 291 292**System capability**: SystemCapability.ArkUI.ArkUI.Full 293 294**Parameters** 295 296 297| Name| Type | Mandatory| Description | 298| ------ | ------------------------------------------------- | ---- | ---------------------- | 299| items | [SegmentButtonItemArray](#segmentbuttonitemarray) | Yes | Elements to add to the end of the array.| 300 301**Return value** 302 303| Type | Description | 304| ------ | ------------------------ | 305| number | Length of the array after the elements are added.| 306 307>**NOTE** 308> 309>A **SegmentButton** component supports two to five buttons. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five buttons. If the number limit is reached, this API will not work. 310 311### pop 312 313pop(): SegmentButtonItemOptions | undefined 314 315Removes the last element from this array and returns that element. 316 317**Atomic service API**: This API can be used in atomic services since API version 12. 318 319**System capability**: SystemCapability.ArkUI.ArkUI.Full 320 321**Return value** 322 323| Type | Description | 324| ------------------------------------------------------------ | -------------- | 325| [SegmentButtonItemOptions](#segmentbuttonitemoptions) \| undefined | Element removed from the array.| 326 327>**NOTE** 328> 329>A **SegmentButton** component supports two to five buttons. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five buttons. If the number limit is reached, this API will not work. 330 331### shift 332 333shift(): SegmentButtonItemOptions | undefined 334 335Removes the first element from this array and returns that element. 336 337**Atomic service API**: This API can be used in atomic services since API version 12. 338 339**System capability**: SystemCapability.ArkUI.ArkUI.Full 340 341**Return value** 342 343| Type | Description | 344| ------------------------------------------------------------ | -------------- | 345| [SegmentButtonItemOptions](#segmentbuttonitemoptions) \| undefined | Element removed from the array.| 346 347>**NOTE** 348> 349>A **SegmentButton** component supports two to five buttons. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five buttons. If the number limit is reached, this API will not work. 350 351### unshift 352 353unshift(...items: SegmentButtonItemArray): number 354 355Adds the specified elements to the beginning of this array and returns the new length of the array. 356 357**Atomic service API**: This API can be used in atomic services since API version 12. 358 359**System capability**: SystemCapability.ArkUI.ArkUI.Full 360 361**Parameters** 362 363 364| Name | Type | Mandatory| Description | 365| ----- | ------------------------------------------------- | ---- | -------------------- | 366| items | [SegmentButtonItemArray](#segmentbuttonitemarray) | Yes | Elements to add to the beginning of the array.| 367 368**Return value** 369 370| Type | Description | 371| ------ | ---------------------- | 372| number | Length of the array after the elements are added.| 373 374>**NOTE** 375> 376>A **SegmentButton** component supports two to five buttons. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five buttons. If the number limit is reached, this API will not work. 377 378### splice 379 380splice(start: number, deleteCount: number, ...items: SegmentButtonItemOptions[]): SegmentButtonItemOptions[] 381 382Changes the contents of this array by removing the specified number of elements from the specified position and adding new elements in place. This API returns an array containing the removed elements. 383 384**Atomic service API**: This API can be used in atomic services since API version 12. 385 386**System capability**: SystemCapability.ArkUI.ArkUI.Full 387 388**Parameters** 389 390 391| Name | Type | Mandatory| Description | 392| ----------- | ------------------------------------------------------- | ---- | -------------------- | 393| start | number | Yes | Index of the position starting from which elements are to be removed.| 394| deleteCount | number | Yes | Number of elements to remove. | 395| items | [SegmentButtonItemOptions](#segmentbuttonitemoptions)[] | No | Elements to add to the array. | 396 397**Return value** 398 399| Type | Description | 400| ------------------------------------------------------- | ------------------------------ | 401| [SegmentButtonItemOptions](#segmentbuttonitemoptions)[] | An array containing the removed elements.| 402 403>**NOTE** 404> 405>A **SegmentButton** component supports two to five buttons. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five buttons. If the number limit is reached, this API will not work. 406 407### create 408 409static create(elements: SegmentButtonItemTuple): SegmentButtonItemOptionsArray 410 411Creates a **SegmentButtonItemOptionsArray** object. 412 413**Atomic service API**: This API can be used in atomic services since API version 12. 414 415**System capability**: SystemCapability.ArkUI.ArkUI.Full 416 417**Parameters** 418 419 420| Name | Type | Mandatory| Description | 421| -------- | ------------------------------------------------- | ---- | ---------- | 422| elements | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | Yes | Button information.| 423 424**Return value** 425 426| Type | Description | 427| ------------------------------------------------------------ | ----------------------------------------- | 428| [SegmentButtonItemOptionsArray](#segmentbuttonitemoptionsarray) | Created **SegmentButtonItemOptionsArray** object.| 429 430## TabSegmentButtonOptions 431 432Provides the options of the **SegmentButton** component consisting of tab-style buttons. It inherits [TabSegmentButtonConstructionOptions](#tabsegmentbuttonconstructionoptions). 433 434**Atomic service API**: This API can be used in atomic services since API version 12. 435 436**System capability**: SystemCapability.ArkUI.ArkUI.Full 437 438| Name| Type | Mandatory| Description | 439| ---- | ----- | ---- | ---------------------- | 440| type | 'tab' | Yes | **SegmentButton** component consisting of tab-style buttons.| 441 442## CapsuleSegmentButtonOptions 443 444Provides the options of the **SegmentButton** component consisting of single-select or multi-select buttons. It inherits [CapsuleSegmentButtonConstructionOptions](#capsulesegmentbuttonconstructionoptions). 445 446**Atomic service API**: This API can be used in atomic services since API version 12. 447 448**System capability**: SystemCapability.ArkUI.ArkUI.Full 449 450| Name| Type | Mandatory| Description | 451| ---- | --------- | ---- | ----------------------------- | 452| type | 'capsule' | Yes | **SegmentButton** component consisting of single-select or multi-select buttons.| 453 454## SegmentButtonTextItem 455 456Provides text button information. 457 458**System capability**: SystemCapability.ArkUI.ArkUI.Full 459 460| Name| Type | Mandatory| Description | 461| ---- | -------------------------------------- | ---- | ---------- | 462| text | [ResourceStr](ts-types.md#resourcestr) | Yes | Button text.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 463| accessibilityLevel<sup>13+</sup> | string | No | Accessibility level, which is used to set whether the current component can be recognized by accessibility services.<br>The options are as follows:<br>**"auto"**: The component can be recognized by accessibility services.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"**<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 464| accessibilityDescription<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility description. You can specify further explanation of the current component, for example, possible operation consequences, especially those that cannot be learned from component attributes and accessibility text. If a component contains both text information and the accessibility description, the text is read first and then the accessibility description, when the component is selected.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 465 466## SegmentButtonIconItem 467 468Provides icon button information. 469 470**System capability**: SystemCapability.ArkUI.ArkUI.Full 471 472|Name | Type | Mandatory| Description | 473| ------------ | -------------------------------------- | ---- | -------------------- | 474| icon | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon of the unselected item.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 475| iconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility text of the unselected item.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 476| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon of the selected item.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 477| selectedIconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility text of the selected item.<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 478| accessibilityLevel<sup>13+</sup> | string | No | Accessibility level, which is used to set whether the current component can be recognized by accessibility services.<br>The options are as follows:<br>**"auto"**: The component can be recognized by accessibility services.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"**<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 479| accessibilityDescription<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility description. You can specify further explanation of the current component, for example, possible operation consequences, especially those that cannot be learned from component attributes and accessibility text. If a component contains both text information and the accessibility description, the text is read first and then the accessibility description, when the component is selected.<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 480 481>**NOTE** 482> 483>For the settings to take effect, both **icon** and **selectedIcon** must be set. 484 485## SegmentButtonIconTextItem 486 487Provides icon+text button information. 488 489**System capability**: SystemCapability.ArkUI.ArkUI.Full 490 491### Properties 492 493| Name | Type | Mandatory| Description | 494| ------------ | -------------------------------------- | ---- | -------------------- | 495| icon | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon of the unselected item.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 496| iconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility text of the unselected item.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 497| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon of the selected item.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 498| selectedIconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility text of the selected item.<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 499| text | [ResourceStr](ts-types.md#resourcestr) | Yes | Button text.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 500| accessibilityLevel<sup>13+</sup> | string | No | Accessibility level, which is used to set whether the current component can be recognized by accessibility services.<br>The options are as follows:<br>**"auto"**: The component can be recognized by accessibility services.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"**<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 501| accessibilityDescription<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility description. You can specify further explanation of the current component, for example, possible operation consequences, especially those that cannot be learned from component attributes and accessibility text. If a component contains both text information and the accessibility description, the text is read first and then the accessibility description, when the component is selected.<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 502 503>**NOTE** 504> 505>For the settings to take effect, both **icon** and **selectedIcon** must be set. 506 507## SegmentButtonItemOptions 508 509Describes options of the items in the **SegmentButton** component. 510 511**Decorator Type**: @Observed 512 513**System capability**: SystemCapability.ArkUI.ArkUI.Full 514 515### Properties 516 517| Name | Type | Mandatory| Description | 518| ------------ | -------------------------------------- | ---- | -------------------- | 519| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the unselected item.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 520| iconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility text of the unselected item.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 521| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the selected item.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 522| selectedIconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility text of the selected item.<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 523| text | [ResourceStr](ts-types.md#resourcestr) | No | Button text.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 524| accessibilityLevel<sup>13+</sup> | string | No | Accessibility level, which is used to set whether the current component can be recognized by accessibility services.<br>The options are as follows:<br>**"auto"**: The component can be recognized by accessibility services.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"**<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 525| accessibilityDescription<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility description. You can specify further explanation of the current component, for example, possible operation consequences, especially those that cannot be learned from component attributes and accessibility text. If a component contains both text information and the accessibility description, the text is read first and then the accessibility description, when the component is selected.<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 526 527### constructor 528 529constructor(options: SegmentButtonItemOptionsConstructorOptions) 530 531A constructor used to create a **SegmentButtonItemOptions** instance. 532 533**Atomic service API**: This API can be used in atomic services since API version 12. 534 535**System capability**: SystemCapability.ArkUI.ArkUI.Full 536 537**Parameters** 538 539 540| Name | Type | Mandatory| Description | 541| ------- | ------------------------------------------------------------ | ---- | ------------------ | 542| options | [SegmentButtonItemOptionsConstructorOptions](#segmentbuttonitemoptionsconstructoroptions) | Yes | Options of the items in the **SegmentButton** component.| 543 544## SegmentButtonItemOptionsConstructorOptions 545 546Describes the constructor parameters of **SegmentButtonItemOptions**. 547 548**System capability**: SystemCapability.ArkUI.ArkUI.Full 549 550### Properties 551 552| Name | Type | Mandatory| Description | 553| ------------ | -------------------------------------- | ---- | -------------------- | 554| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the unselected item.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 555| iconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility text of the unselected item.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 556| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the selected item.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 557| selectedIconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility text of the selected item.<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 558| text | [ResourceStr](ts-types.md#resourcestr) | No | Button text.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 559| accessibilityLevel<sup>13+</sup> | string | No | Accessibility level, which is used to set whether the current component can be recognized by accessibility services.<br>The options are as follows:<br>**"auto"**: The component can be recognized by accessibility services.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"**<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 560| accessibilityDescription<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Accessibility description. You can specify further explanation of the current component, for example, possible operation consequences, especially those that cannot be learned from component attributes and accessibility text. If a component contains both text information and the accessibility description, the text is read first and then the accessibility description, when the component is selected.<br>**Atomic service API**: This API can be used in atomic services since API version 13. | 561 562## Example 563 564### Example 1: Setting the Type of the SegmentButton component 565 566This example demonstrates how to create two different types of **SegmentButton** components by configuring **SegmentButtonOptions** with **tab** and **capsule** types. 567 568```ts 569// xxx.ets 570import { 571 ItemRestriction, 572 SegmentButton, 573 SegmentButtonItemTuple, 574 SegmentButtonOptions, 575 SegmentButtonTextItem 576} from '@kit.ArkUI'; 577 578@Entry 579@Component 580struct Index { 581 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 582 buttons: [{ text: 'Tab 1' }, { text: 'Tab 2' }, { 583 text: 'Tab 3' 584 }] as ItemRestriction<SegmentButtonTextItem>, 585 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 586 }) 587 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 588 buttons: [{ text: 'Single-select 1' }, { text: 'Single-select 2' }, { text: 'Single-select 3' }] as SegmentButtonItemTuple, 589 multiply: false, 590 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 591 }) 592 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 593 buttons: [{ text: 'Multi-select 1' }, { text: 'Multi-select 2' }, { text: 'Multi-select 3' }] as SegmentButtonItemTuple, 594 multiply: true 595 }) 596 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 597 buttons: [ 598 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 599 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 600 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 601 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 602 ] as SegmentButtonItemTuple, 603 multiply: false, 604 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 605 }) 606 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 607 buttons: [ 608 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 609 { text: 'Icon 2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 610 { text: 'Icon 3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 611 { text: 'Icon 4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 612 { text: 'Icon 5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 613 ] as SegmentButtonItemTuple, 614 multiply: true 615 }) 616 @State tabSelectedIndexes: number[] = [1] 617 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 618 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 619 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 620 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 621 622 build() { 623 Row() { 624 Column() { 625 Column({ space: 25 }) { 626 SegmentButton({ options: this.tabOptions, 627 selectedIndexes: $tabSelectedIndexes }) 628 SegmentButton({ options: this.singleSelectCapsuleOptions, 629 selectedIndexes: $singleSelectCapsuleSelectedIndexes }) 630 SegmentButton({ 631 options: this.multiplySelectCapsuleOptions, 632 selectedIndexes: $multiplySelectCapsuleSelectedIndexes }) 633 SegmentButton({ options: this.iconCapsuleOptions, 634 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes }) 635 SegmentButton({ options: this.iconTextCapsuleOptions, 636 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 637 }.width('90%') 638 }.width('100%') 639 }.height('100%') 640 } 641} 642``` 643 644 645 646### Example 2: Setting the Style of the SegmentButton component 647 648This example demonstrates how to use **CommonSegmentButtonOptions** to customize the text and background style of the **SegmentButton** component. 649 650```ts 651// xxx.ets 652import { 653 ItemRestriction, 654 SegmentButton, 655 SegmentButtonItemTuple, 656 SegmentButtonOptions, 657 SegmentButtonTextItem 658} from '@kit.ArkUI'; 659 660@Entry 661@Component 662struct Index { 663 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 664 buttons: [{ text: 'Tab 1' }, { text: 'Tab 2' }, { 665 text: 'Tab 3' 666 }] as ItemRestriction<SegmentButtonTextItem>, 667 backgroundColor: 'rgb(213,213,213)', 668 selectedBackgroundColor: 'rgb(112,112,112)', 669 textPadding: { 670 top: 10, 671 right: 10, 672 bottom: 10, 673 left: 10 674 }, 675 }) 676 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 677 buttons: [{ text: 'Single-select 1' }, { text: 'Single-select 2' }, { text: 'Single-select 3' }] as SegmentButtonItemTuple, 678 multiply: false, 679 fontColor: 'rgb(0,74,175)', 680 selectedFontColor: 'rgb(247,247,247)', 681 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 682 }) 683 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 684 buttons: [{ text: 'Multi-select 1' }, { text: 'Multi-select 2' }, { text: 'Multi-select 3' }] as SegmentButtonItemTuple, 685 multiply: true, 686 fontSize: 18, 687 selectedFontSize: 18, 688 fontWeight: FontWeight.Bolder, 689 selectedFontWeight: FontWeight.Lighter, 690 }) 691 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 692 buttons: [ 693 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 694 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 695 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 696 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 697 ] as SegmentButtonItemTuple, 698 multiply: false, 699 imageSize: { width: 40, height: 40 }, 700 buttonPadding: { 701 top: 6, 702 right: 10, 703 bottom: 6, 704 left: 10 705 }, 706 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 707 }) 708 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 709 buttons: [ 710 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 711 { text: 'Icon 2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 712 { text: 'Icon 3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 713 { text: 'Icon 4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 714 { text: 'Icon 5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 715 ] as SegmentButtonItemTuple, 716 multiply: true, 717 imageSize: { width: 10, height: 10 }, 718 }) 719 @State tabSelectedIndexes: number[] = [0] 720 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 721 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 722 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 723 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 724 725 build() { 726 Row() { 727 Column() { 728 Column({ space: 20 }) { 729 SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes }) 730 SegmentButton({ 731 options: this.singleSelectCapsuleOptions, 732 selectedIndexes: $singleSelectCapsuleSelectedIndexes 733 }) 734 SegmentButton({ 735 options: this.multiplySelectCapsuleOptions, 736 selectedIndexes: $multiplySelectCapsuleSelectedIndexes 737 }) 738 SegmentButton({ 739 options: this.iconCapsuleOptions, 740 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes 741 }) 742 SegmentButton({ 743 options: this.iconTextCapsuleOptions, 744 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes 745 }) 746 }.width('90%') 747 }.width('100%') 748 }.height('100%') 749 } 750} 751``` 752 753 754 755### Example 3: Performing Array Operations on the SegmentButton Component 756 757This example shows how to perform operations such as adding and removing segmented buttons using array functions like **pop**, **shift**, and **unshift**. 758 759```ts 760import { 761 SegmentButton, 762 SegmentButtonOptions, 763 SegmentButtonItemOptionsArray, 764 SegmentButtonItemTuple, 765 SegmentButtonItemOptions 766} from '@kit.ArkUI'; 767 768@Entry 769@Component 770struct Index { 771 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 772 buttons: [{ text: '1' }, { text: '2' }, { text: '3' }, 773 { text: '4' }, { text: '5' }] as SegmentButtonItemTuple, 774 multiply: false, 775 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 776 }) 777 @State capsuleSelectedIndexes: number[] = [0] 778 779 build() { 780 Row() { 781 Column() { 782 Column({ space: 10 }) { 783 SegmentButton({ options: this.singleSelectCapsuleOptions, 784 selectedIndexes: $capsuleSelectedIndexes }) 785 Button("Delete First Item") 786 .onClick(() => { 787 this.singleSelectCapsuleOptions.buttons.shift() 788 }) 789 Button("Delete Last Item") 790 .onClick(() => { 791 this.singleSelectCapsuleOptions.buttons.pop() 792 }) 793 Button("Add to End") 794 .onClick(() => { 795 this.singleSelectCapsuleOptions.buttons.push({ text: 'push' }) 796 }) 797 Button("Add to Beginning") 798 .onClick(() => { 799 this.singleSelectCapsuleOptions.buttons.unshift(({ text: 'unshift' })) 800 }) 801 Button("Replace Items 2 and 3 with splice1 and splice2") 802 .onClick(() => { 803 this.singleSelectCapsuleOptions.buttons.splice(1, 2, new SegmentButtonItemOptions({ 804 text: 'splice1' 805 }), new SegmentButtonItemOptions({ text: 'splice2' })) 806 }) 807 Button("Change All Button Text") 808 .onClick(() => { 809 this.singleSelectCapsuleOptions.buttons = 810 SegmentButtonItemOptionsArray.create([{ text: 'a' }, { text: 'b' }, 811 { text: 'c' }, { text: 'd' }, { text: 'e' }]) 812 }) 813 }.width('90%') 814 }.width('100%') 815 }.height('100%') 816 } 817} 818``` 819 820 821 822### Example 4: Implementing a Mirroring Effect 823This example shows how to implement a mirroring effect by configuring the **direction** property of the **SegmentButton** component. 824 825```ts 826// xxx.ets 827import { LengthMetrics, SegmentButton, SegmentButtonOptions } from '@kit.ArkUI' 828 829 830@Entry 831@Component 832struct Index { 833 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 834 buttons: [{ text: 'Tab 1' }, { text: 'Tab 2' }, { 835 text: 'Tab 3' 836 }], 837 direction: Direction.Rtl, 838 backgroundColor: Color.Green, 839 selectedBackgroundColor: Color.Orange, 840 localizedTextPadding: { 841 end: LengthMetrics.vp(10), 842 start: LengthMetrics.vp(10) 843 }, 844 }) 845 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 846 buttons: [{ text: 'Single-select 1' }, { text: 'Single-select 2' }, { text: 'Single-select 3' }], 847 multiply: false, 848 direction: Direction.Rtl, 849 fontColor: Color.Black, 850 selectedFontColor: Color.Yellow, 851 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 852 }) 853 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 854 buttons: [{ text: 'Multi-select 1' }, { text: 'Multi-select 2' }, { text: 'Multi-select 3' }], 855 multiply: true, 856 direction: Direction.Rtl, 857 fontSize: 18, 858 selectedFontSize: 18, 859 fontWeight: FontWeight.Bolder, 860 selectedFontWeight: FontWeight.Lighter, 861 }) 862 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 863 buttons: [ 864 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 865 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 866 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 867 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 868 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 869 ], 870 multiply: false, 871 direction: Direction.Rtl, 872 imageSize: { width: 40, height: 40 }, 873 localizedButtonPadding: { 874 end: LengthMetrics.vp(10), 875 start: LengthMetrics.vp(10) 876 }, 877 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 878 }) 879 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 880 buttons: [ 881 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 882 { text: 'Icon 2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 883 { text: 'Icon 3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 884 { text: 'Icon 4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 885 { text: 'Icon 5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 886 ], 887 multiply: true, 888 direction: Direction.Rtl, 889 imageSize: { width: 10, height: 10 }, 890 }) 891 @State tabSelectedIndexes: number[] = [0] 892 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 893 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 894 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 895 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 896 897 build() { 898 Row() { 899 Column() { 900 Column({ space: 20 }) { 901 SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes }) 902 SegmentButton({ 903 options: this.singleSelectCapsuleOptions, 904 selectedIndexes: $singleSelectCapsuleSelectedIndexes 905 }) 906 SegmentButton({ 907 options: this.multiplySelectCapsuleOptions, 908 selectedIndexes: $multiplySelectCapsuleSelectedIndexes 909 }) 910 SegmentButton({ 911 options: this.iconCapsuleOptions, 912 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes 913 }) 914 SegmentButton({ 915 options: this.iconTextCapsuleOptions, 916 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes 917 }) 918 }.width('90%') 919 }.width('100%') 920 }.height('100%') 921 } 922} 923``` 924 925 926 927### Example 5: Setting Accessibility 928This example showcases how to implement accessibility features for the **SegmentButton** component by configuring properties such as **accessibilityLevel** and **selectedIconAccessibilityText**. 929 930```ts 931// xxx.ets 932import { 933 ItemRestriction, 934 SegmentButton, 935 SegmentButtonItemTuple, 936 SegmentButtonOptions, 937 SegmentButtonTextItem, 938 SegmentButtonItemOptions 939} from '@kit.ArkUI'; 940 941@Entry 942@Component 943struct Index { 944 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 945 buttons: [{ text: 'Tab 1', accessibilityLevel: 'yes', accessibilityDescription: 'Tab 1 usage hints' }, 946 { text: 'Tab 2', accessibilityLevel: 'yes', accessibilityDescription: 'Tab 2 usage hints' }, 947 { text: 'Tab 3', accessibilityLevel: 'yes', accessibilityDescription: 'Tab 3 usage hints' 948 }] as ItemRestriction<SegmentButtonTextItem>, 949 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 950 }) 951 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 952 buttons: [ 953 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 954 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 955 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem usage hints'}, 956 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 957 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 958 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem usage hints'}, 959 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 960 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 961 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem usage hints'}, 962 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 963 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 964 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem usage hints'} 965 ] as SegmentButtonItemTuple, 966 multiply: false, 967 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 968 }) 969 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 970 buttons: [ 971 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 972 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 973 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconTextItem usage hints'}, 974 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 975 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 976 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconTextItem usage hints'}, 977 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 978 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 979 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconTextItem usage hints'}, 980 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 981 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 982 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconTextItem usage hints'} 983 ] as SegmentButtonItemTuple, 984 multiply: true 985 }) 986 @State tabSelectedIndexes: number[] = [1] 987 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 988 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 989 990 build() { 991 Row() { 992 Column() { 993 Column({ space: 25 }) { 994 SegmentButton({ options: this.tabOptions, 995 selectedIndexes: $tabSelectedIndexes }) 996 SegmentButton({ options: this.iconCapsuleOptions, 997 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes }) 998 SegmentButton({ options: this.iconTextCapsuleOptions, 999 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 1000 Button("Replace Items 2 and 3 with splice1 and splice2") 1001 .onClick(() => { 1002 this.iconTextCapsuleOptions.buttons.splice(1, 2, new SegmentButtonItemOptions({ 1003 text: 'splice1', accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonItemOptions usage hints' 1004 }), new SegmentButtonItemOptions({ text: 'splice2', icon: $r('sys.media.ohos_ic_public_email'), 1005 iconAccessibilityText: 'Accessibility text for the unselected icon', selectedIcon: $r('sys.media.ohos_ic_public_clock'), 1006 selectedIconAccessibilityText: 'Accessibility text for the selected icon', accessibilityLevel: 'yes', 1007 accessibilityDescription: 'SegmentButtonIconTextItem usage hints' })) 1008 }) 1009 }.width('90%') 1010 }.width('100%') 1011 }.height('100%') 1012 } 1013} 1014``` 1015
