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) | No| @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### Properties 43 44**Decorator Type**: @Observed 45 46**Atomic service API**: This API can be used in atomic services since API version 12. 47 48**System capability**: SystemCapability.ArkUI.ArkUI.Full 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>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 cannot 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 cannot 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 cannot 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 cannot 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 cannot 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: Color.Green, 668 selectedBackgroundColor: Color.Orange, 669 textPadding: { top: 10, right: 10, bottom: 10, left: 10 }, 670 }) 671 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 672 buttons: [{ text: 'Single-select 1' }, { text: 'Single-select 2' }, { text: 'Single-select 3' }] as SegmentButtonItemTuple, 673 multiply: false, 674 fontColor: Color.Black, 675 selectedFontColor: Color.Yellow, 676 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 677 }) 678 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 679 buttons: [{ text: 'Multi-select 1' }, { text: 'Multi-select 2' }, { text: 'Multi-select 3' }] as SegmentButtonItemTuple, 680 multiply: true, 681 fontSize: 18, 682 selectedFontSize: 18, 683 fontWeight: FontWeight.Bolder, 684 selectedFontWeight: FontWeight.Lighter, 685 }) 686 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 687 buttons: [ 688 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 689 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 690 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 691 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 692 ] as SegmentButtonItemTuple, 693 multiply: false, 694 imageSize: { width: 40, height: 40 }, 695 buttonPadding: { top: 6, right: 10, bottom: 6, left: 10 }, 696 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 697 }) 698 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 699 buttons: [ 700 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 701 { text: 'Icon 2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 702 { text: 'Icon 3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 703 { text: 'Icon 4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 704 { text: 'Icon 5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 705 ] as SegmentButtonItemTuple, 706 multiply: true, 707 imageSize: { width: 10, height: 10 }, 708 }) 709 @State tabSelectedIndexes: number[] = [0] 710 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 711 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 712 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 713 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 714 715 build() { 716 Row() { 717 Column() { 718 Column({ space: 20 }) { 719 SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes }) 720 SegmentButton({ options: this.singleSelectCapsuleOptions, 721 selectedIndexes: $singleSelectCapsuleSelectedIndexes }) 722 SegmentButton({ options: this.multiplySelectCapsuleOptions, 723 selectedIndexes: $multiplySelectCapsuleSelectedIndexes }) 724 SegmentButton({ options: this.iconCapsuleOptions, 725 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes }) 726 SegmentButton({ options: this.iconTextCapsuleOptions, 727 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 728 }.width('90%') 729 }.width('100%') 730 }.height('100%') 731 } 732} 733``` 734 735 736 737### Example 3: Performing Array Operations on the SegmentButton Component 738 739This example shows how to perform operations such as adding and removing segmented buttons using array functions like **pop**, **shift**, and **unshift**. 740 741```ts 742import { 743 SegmentButton, 744 SegmentButtonOptions, 745 SegmentButtonItemOptionsArray, 746 SegmentButtonItemTuple, 747 SegmentButtonItemOptions 748} from '@kit.ArkUI'; 749 750@Entry 751@Component 752struct Index { 753 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 754 buttons: [{ text: '1' }, { text: '2' }, { text: '3' }, 755 { text: '4' }, { text: '5' }] as SegmentButtonItemTuple, 756 multiply: false, 757 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 758 }) 759 @State capsuleSelectedIndexes: number[] = [0] 760 761 build() { 762 Row() { 763 Column() { 764 Column({ space: 10 }) { 765 SegmentButton({ options: this.singleSelectCapsuleOptions, 766 selectedIndexes: $capsuleSelectedIndexes }) 767 Button("Delete First Item") 768 .onClick(() => { 769 this.singleSelectCapsuleOptions.buttons.shift() 770 }) 771 Button("Delete Last Item") 772 .onClick(() => { 773 this.singleSelectCapsuleOptions.buttons.pop() 774 }) 775 Button("Add to End") 776 .onClick(() => { 777 this.singleSelectCapsuleOptions.buttons.push({ text: 'push' }) 778 }) 779 Button("Add to Beginning") 780 .onClick(() => { 781 this.singleSelectCapsuleOptions.buttons.unshift(({ text: 'unshift' })) 782 }) 783 Button("Replace Items 2 and 3 with splice1 and splice2") 784 .onClick(() => { 785 this.singleSelectCapsuleOptions.buttons.splice(1, 2, new SegmentButtonItemOptions({ 786 text: 'splice1' 787 }), new SegmentButtonItemOptions({ text: 'splice2' })) 788 }) 789 Button("Change All Button Text") 790 .onClick(() => { 791 this.singleSelectCapsuleOptions.buttons = 792 SegmentButtonItemOptionsArray.create([{ text: 'a' }, { text: 'b' }, 793 { text: 'c' }, { text: 'd' }, { text: 'e' }]) 794 }) 795 }.width('90%') 796 }.width('100%') 797 }.height('100%') 798 } 799} 800``` 801 802 803 804### Example 4: Implementing a Mirroring Effect 805This example shows how to implement a mirroring effect by configuring the **direction** property of the **SegmentButton** component. 806 807```ts 808// xxx.ets 809import { LengthMetrics, SegmentButton, SegmentButtonOptions } from '@kit.ArkUI' 810 811 812@Entry 813@Component 814struct Index { 815 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 816 buttons: [{ text: 'Tab 1' }, { text: 'Tab 2' }, { 817 text: 'Tab 3' 818 }], 819 direction: Direction.Rtl, 820 backgroundColor: Color.Green, 821 selectedBackgroundColor: Color.Orange, 822 localizedTextPadding: { 823 end: LengthMetrics.vp(10), 824 start: LengthMetrics.vp(10) 825 }, 826 }) 827 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 828 buttons: [{ text: 'Single-select 1' }, { text: 'Single-select 2' }, { text: 'Single-select 3' }], 829 multiply: false, 830 direction: Direction.Rtl, 831 fontColor: Color.Black, 832 selectedFontColor: Color.Yellow, 833 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 834 }) 835 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 836 buttons: [{ text: 'Multi-select 1' }, { text: 'Multi-select 2' }, { text: 'Multi-select 3' }], 837 multiply: true, 838 direction: Direction.Rtl, 839 fontSize: 18, 840 selectedFontSize: 18, 841 fontWeight: FontWeight.Bolder, 842 selectedFontWeight: FontWeight.Lighter, 843 }) 844 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 845 buttons: [ 846 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 847 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 848 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 849 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 850 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 851 ], 852 multiply: false, 853 direction: Direction.Rtl, 854 imageSize: { width: 40, height: 40 }, 855 localizedButtonPadding: { 856 end: LengthMetrics.vp(10), 857 start: LengthMetrics.vp(10) 858 }, 859 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 860 }) 861 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 862 buttons: [ 863 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 864 { text: 'Icon 2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 865 { text: 'Icon 3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 866 { text: 'Icon 4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 867 { text: 'Icon 5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 868 ], 869 multiply: true, 870 direction: Direction.Rtl, 871 imageSize: { width: 10, height: 10 }, 872 }) 873 @State tabSelectedIndexes: number[] = [0] 874 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 875 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 876 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 877 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 878 879 build() { 880 Row() { 881 Column() { 882 Column({ space: 20 }) { 883 SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes }) 884 SegmentButton({ 885 options: this.singleSelectCapsuleOptions, 886 selectedIndexes: $singleSelectCapsuleSelectedIndexes 887 }) 888 SegmentButton({ 889 options: this.multiplySelectCapsuleOptions, 890 selectedIndexes: $multiplySelectCapsuleSelectedIndexes 891 }) 892 SegmentButton({ 893 options: this.iconCapsuleOptions, 894 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes 895 }) 896 SegmentButton({ 897 options: this.iconTextCapsuleOptions, 898 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes 899 }) 900 }.width('90%') 901 }.width('100%') 902 }.height('100%') 903 } 904} 905``` 906 907 908 909### Example 5: Setting Accessibility 910This example showcases how to implement accessibility features for the **SegmentButton** component by configuring properties such as **accessibilityLevel** and **selectedIconAccessibilityText**. 911 912```ts 913// xxx.ets 914import { 915 ItemRestriction, 916 SegmentButton, 917 SegmentButtonItemTuple, 918 SegmentButtonOptions, 919 SegmentButtonTextItem, 920 SegmentButtonItemOptions 921} from '@kit.ArkUI'; 922 923@Entry 924@Component 925struct Index { 926 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 927 buttons: [{ text: 'Tab 1', accessibilityLevel: 'yes', accessibilityDescription: 'Tab 1 usage hints' }, 928 { text: 'Tab 2', accessibilityLevel: 'yes', accessibilityDescription: 'Tab 2 usage hints' }, 929 { text: 'Tab 3', accessibilityLevel: 'yes', accessibilityDescription: 'Tab 3 usage hints' 930 }] as ItemRestriction<SegmentButtonTextItem>, 931 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 932 }) 933 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 934 buttons: [ 935 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 936 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 937 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem usage hints'}, 938 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 939 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 940 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem usage hints'}, 941 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 942 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 943 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem usage hints'}, 944 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: 'Accessibility text for the unselected icon', 945 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: 'Accessibility text for the selected icon', 946 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem usage hints'} 947 ] as SegmentButtonItemTuple, 948 multiply: false, 949 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 950 }) 951 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 952 buttons: [ 953 { text: 'Icon 1', 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: 'SegmentButtonIconTextItem usage hints'}, 956 { text: 'Icon 1', 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: 'SegmentButtonIconTextItem usage hints'}, 959 { text: 'Icon 1', 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: 'SegmentButtonIconTextItem usage hints'}, 962 { text: 'Icon 1', 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: 'SegmentButtonIconTextItem usage hints'} 965 ] as SegmentButtonItemTuple, 966 multiply: true 967 }) 968 @State tabSelectedIndexes: number[] = [1] 969 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 970 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 971 972 build() { 973 Row() { 974 Column() { 975 Column({ space: 25 }) { 976 SegmentButton({ options: this.tabOptions, 977 selectedIndexes: $tabSelectedIndexes }) 978 SegmentButton({ options: this.iconCapsuleOptions, 979 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes }) 980 SegmentButton({ options: this.iconTextCapsuleOptions, 981 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 982 Button("Replace Items 2 and 3 with splice1 and splice2") 983 .onClick(() => { 984 this.iconTextCapsuleOptions.buttons.splice(1, 2, new SegmentButtonItemOptions({ 985 text: 'splice1', accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonItemOptions usage hints' 986 }), new SegmentButtonItemOptions({ text: 'splice2', icon: $r('sys.media.ohos_ic_public_email'), 987 iconAccessibilityText: 'Accessibility text for the unselected icon', selectedIcon: $r('sys.media.ohos_ic_public_clock'), 988 selectedIconAccessibilityText: 'Accessibility text for the selected icon', accessibilityLevel: 'yes', 989 accessibilityDescription: 'SegmentButtonIconTextItem usage hints' })) 990 }) 991 }.width('90%') 992 }.width('100%') 993 }.height('100%') 994 } 995} 996``` 997
