1# SegmentButton 2 3A segment button is a group of options, such as tabs, single-select options, and multi-select options. 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[] }) 22 23**Decorator**: @Component 24 25**Atomic service API**: This API can be used in atomic services since API version 12. 26 27**System capability**: SystemCapability.ArkUI.ArkUI.Full 28 29**Parameters** 30 31| Name | Type | Mandatory| Decorator | Description | 32| --------------- | --------------------------------------------- | ---- | ----------- | ------------------------------------------------------------ | 33| options | [SegmentButtonOptions](#segmentbuttonoptions) | Yes | @ObjectLink | **SegmentButtonOptions** object. | 34| selectedIndexes | number[] | Yes | @Link | Indexes of selected options of the segment button. 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 options are selected, an empty array **[]** can be passed in.| 35 36>**NOTE** 37> 38>The segment button does not support the universal attributes. The segment button takes up the maximum width allowed by the content area, and evenly allocates the width among its options. It adapts its height automatically to the content (text and image), the minimum height being 28 vp. 39 40## SegmentButtonOptions 41 42Provides initial data and custom attributes for the segment button. 43 44### Attributes 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 | Description | 51| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 52| type | "tab" \| "capsule" | Type of the segment button. | 53| multiply | boolean | Whether multiple options can be selected.<br>**NOTE**<br>For the segment button consisting of tabs, only one option can be selected. In this case, setting **multiply** to **true** does not take effect.| 54| buttons | [SegmentButtonItemOptionsArray](#segmentbuttonitemoptionsarray) | Button information, including the icon and text. | 55| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Font color of the option when not selected.<br>Default value: **#99182431** | 56| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | Font color of the option when selected.<br>Default value: **#ff182431** | 57| fontSize | [DimensionNoPercentage](#dimensionnopercentage) | Font size of the option when not selected. It cannot be set in percentage.<br>Default value: **14.0fp**| 58| selectedFontSize | [DimensionNoPercentage](#dimensionnopercentage) | Font size of the option when selected. It cannot be set in percentage.<br>Default value: **14.0fp** | 59| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Font weight of the option when not selected.<br>Default value: **FontWeight.Regular** | 60| selectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Font weight of the option when selected.<br>Default value: **FontWeight.Medium** | 61| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color.<br>Default value: **\#0c182431** for tabs and **\#0c182431** for single-select and mult-select options| 62| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the option when selected.<br>Default value: **\#ffffffff** for tabs and **\#ff007dff** for single-select and multi-select options| 63| imageSize | [SizeOptions](ts-types.md#sizeoptions) | Image size.<br>Default value: { width: 24, height: 24 }<br>**NOTE**<br>This attribute is effective only for buttons that contain icons.| 64| buttonPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 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) | Text padding.<br>Default value: **0** | 66| localizedButtonPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | Button padding.<br>Default value:<br>Icon-only buttons and text-only buttons: **{ top: LengthMetrics.vp(4), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(4), start: LengthMetrics.vp(8) }**<br>Icon+text buttons: **{ 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) | Text margin.<br>Default value: **0** | 68| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | Layout direction.<br>Default value: **Direction.Auto** | 69| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Background blur style applied between the content and the background.<br>Default value: **BlurStyle.NONE** | 70 71### constructor 72 73constructor(options: TabSegmentButtonOptions | CapsuleSegmentButtonOptions) 74 75Implements a constructor. 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**Parameters** 82 83 84| Name | Type | Mandatory| Description | 85| ------- | ------------------------------------------------------------ | ---- | -------------------- | 86| options | [TabSegmentButtonOptions](#tabsegmentbuttonoptions) \| [CapsuleSegmentButtonOptions](#capsulesegmentbuttonoptions) | Yes| Information about the segment button.| 87 88### tab 89 90static tab(options: TabSegmentButtonConstructionOptions): SegmentButtonOptions 91 92Creates a **SegmentButtonOptions** object for the segment button consisting of tabs. 93 94**Atomic service API**: This API can be used in atomic services since API version 12. 95 96**System capability**: SystemCapability.ArkUI.ArkUI.Full 97 98**Parameters** 99 100 101| Name | Type | Mandatory| Description | 102| ------- | ------------------------------------------------------------ | ---- | -------------------- | 103| options | [TabSegmentButtonConstructionOptions](#tabsegmentbuttonconstructionoptions) | Yes | Options of the segment button.| 104 105**Return value** 106 107| Type | Description | 108| ------ | ------------------------ | 109| [SegmentButtonOptions](#segmentbuttonoptions) | **SegmentButtonOptions** object.| 110 111### capsule 112 113static capsule(options: CapsuleSegmentButtonConstructionOptions): SegmentButtonOptions 114 115Creates a **SegmentButtonOptions** object for the segment button consisting of single-select or multi-select options. 116 117**Atomic service API**: This API can be used in atomic services since API version 12. 118 119**System capability**: SystemCapability.ArkUI.ArkUI.Full 120 121**Parameters** 122 123 124| Name | Type | Mandatory| Description | 125| ------- | ------------------------------------------------------------ | ---- | --------------------------- | 126| options | [CapsuleSegmentButtonConstructionOptions](#capsulesegmentbuttonconstructionoptions) | Yes | Options of the segment button.| 127 128**Return value** 129 130| Type | Description | 131| ------ | ------------------------ | 132| [SegmentButtonOptions](#segmentbuttonoptions) | **SegmentButtonOptions** object.| 133 134## DimensionNoPercentage 135 136Represents the length union type that does not support values in percentage. 137 138**Atomic service API**: This API can be used in atomic services since API version 12. 139 140**System capability**: SystemCapability.ArkUI.ArkUI.Full 141 142| Type | Description | 143| -------------------------------- | --------------------------------------------- | 144| [PX](ts-types.md#px10) | Length in px. | 145| [VP](ts-types.md#vp10) | Length in vp. | 146| [FP](ts-types.md#fp10) | Length in fp. | 147| [LPX](ts-types.md#lpx10) | Length in lpx.| 148| [Resource](ts-types.md#resource) | Resource reference type, which is used to set the value of a component attribute. | 149 150## CommonSegmentButtonOptions 151 152Defines the attributes that can be customized for the segment button. 153 154**Atomic service API**: This API can be used in atomic services since API version 12. 155 156**System capability**: SystemCapability.ArkUI.ArkUI.Full 157 158**Attributes** 159 160| Name | Type | Description | 161| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 162| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Font color of the option when not selected.<br>Default value: **#99182431** | 163| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | Font color of the option when selected.<br>Default value: **#ff182431** | 164| fontSize | [DimensionNoPercentage](#dimensionnopercentage) | Font size of the option when not selected. It cannot be set in percentage.<br>Default value: **14.0fp**| 165| selectedFontSize | [DimensionNoPercentage](#dimensionnopercentage) | Font size of the option when selected. It cannot be set in percentage.<br>Default value: **14.0fp** | 166| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Font weight of the option when not selected.<br>Default value: **FontWeight.Regular** | 167| selectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | Font weight of the option when selected.<br>Default value: **FontWeight.Medium** | 168| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color.<br>Default value: **\#0c182431** for tabs and **\#0c182431** for single-select and multi-select options| 169| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the option when selected.<br>Default value: **\#ffffffff** for tabs and **\#ff007dff** for single-select and multi-select options| 170| imageSize | [SizeOptions](ts-types.md#sizeoptions) | Image size.<br>Default value: { width: 24, height: 24 }<br>**NOTE**<br>This attribute is effective only for buttons that contain icons.| 171| buttonPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 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.| 172| textPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | Text padding.<br>Default value: **0** | 173| localizedButtonPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | Button padding.<br>Default value:<br>Icon-only buttons and text-only buttons: **{ top: LengthMetrics.vp(4), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(4), start: LengthMetrics.vp(8) }**<br>Icon+text buttons: **{ top: LengthMetrics.vp(6), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(6), start: LengthMetrics.vp(8) }**| 174| localizedTextPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | Text margin.<br>Default value: **0** | 175| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | Layout direction.<br>Default value: **Direction.Auto** | 176| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Background blur style applied between the content and the background.<br>Default value: **BlurStyle.NONE** | 177 178## TabSegmentButtonConstructionOptions 179 180Represents options for creating a segment button consisting of tabs. 181 182It inherits [CommonSegmentButtonOptions](#commonsegmentbuttonoptions). 183 184**Atomic service API**: This API can be used in atomic services since API version 12. 185 186**System capability**: SystemCapability.ArkUI.ArkUI.Full 187 188| Name | Type | Mandatory| Description | 189| ------- | ------------------------------------------------------------ | ---- | ---------- | 190| buttons | [ItemRestriction](#itemrestriction)\<[SegmentButtonTextItem](#segmentbuttontextitem)> | Yes | Button information.| 191 192## CapsuleSegmentButtonConstructionOptions 193 194Represents options for creating a segment button consisting of single-select or multi-select options. 195 196It inherits [CommonSegmentButtonOptions](#commonsegmentbuttonoptions). 197 198**Atomic service API**: This API can be used in atomic services since API version 12. 199 200**System capability**: SystemCapability.ArkUI.ArkUI.Full 201 202| Name | Type | Mandatory| Description | 203| -------- | ------------------------------------------------- | ---- | ----------------------------- | 204| buttons | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | Yes | Button information. | 205| multiply | boolean | No | Whether multiple options can be selected.<br>Default value: **false**| 206 207## ItemRestriction 208 209Represents a tuple used to store button information. 210 211**Atomic service API**: This API can be used in atomic services since API version 12. 212 213| Value | Description | 214| ----------------------------------------- | --------------------------------- | 215| ItemRestriction\<T\> = [T, T, T?, T?, T?] | A tuple that contains two to five elements of the same type.| 216 217>**NOTE** 218> 219>A segment button supports two to five options. 220 221## SegmentButtonItemTuple 222 223Represents the tuple union type used to store button information. 224 225**Atomic service API**: This API can be used in atomic services since API version 12. 226 227**System capability**: SystemCapability.ArkUI.ArkUI.Full 228 229| Value | Description | 230| ------------------------------------------------------------ | ------------------------- | 231| [ItemRestriction](#itemrestriction)\<[SegmentButtonTextItem](#segmentbuttontextitem)\> | A tuple of text-only button information. | 232| [ItemRestriction](#itemrestriction)\<[SegmentButtonIconItem](#segmentbuttoniconitem)\> | A tuple of icon-only button information. | 233| [ItemRestriction](#itemrestriction)\<[SegmentButtonIconTextItem](#segmentbuttonicontextitem)\> | A tuple of icon and text button information.| 234 235## SegmentButtonItemArray 236 237Represents the array union type used to store button information. 238 239**Atomic service API**: This API can be used in atomic services since API version 12. 240 241**System capability**: SystemCapability.ArkUI.ArkUI.Full 242 243| Value | Description | 244| ------------------------------------------------------------ | ------------------------- | 245| Array\<[SegmentButtonTextItem](#segmentbuttontextitem)\> | An array of text-only button information. | 246| Array\<[SegmentButtonIconItem](#segmentbuttoniconitem)\> | An array of icon-only button information. | 247| Array\<[SegmentButtonIconTextItem](#segmentbuttonicontextitem)\> | An array of icon and text button information.| 248 249## SegmentButtonItemOptionsArray 250 251Represents an array for storing button information. 252 253>**NOTE** 254> 255>A segment button supports two to five options. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five button options. 256 257### constructor 258 259constructor(elements: SegmentButtonItemTuple) 260 261Implements a constructor. 262 263**Atomic service API**: This API can be used in atomic services since API version 12. 264 265**Parameters** 266 267 268| Name | Type | Mandatory| Description | 269| -------- | ------------------------------------------------- | ---- | ---------- | 270| elements | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | Yes | Button information.| 271 272### push 273 274push(...items: SegmentButtonItemArray): number 275 276Adds the specified elements to the end of this array and returns the new length of the array. 277 278**Atomic service API**: This API can be used in atomic services since API version 12. 279 280**Parameters** 281 282 283| Name | Type | Mandatory| Description | 284| ----- | ------------------------------------------------- | ---- | ---------------------- | 285| items | [SegmentButtonItemArray](#segmentbuttonitemarray) | Yes | Elements to add to the end of the array.| 286 287**Return value** 288 289| Type | Description | 290| ------ | ------------------------ | 291| number | Length of the array after the elements are added.| 292 293>**NOTE** 294> 295>A segment button supports two to five options. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five button options. If the number limit is reached, this API will not work. 296 297### pop 298 299pop(): SegmentButtonItemOptions | undefined 300 301Removes the last element from this array and returns that element. 302 303**Atomic service API**: This API can be used in atomic services since API version 12. 304 305**Return value** 306 307| Type | Description | 308| ------------------------------------------------------------ | -------------- | 309| [SegmentButtonItemOptions](#segmentbuttonitemoptions) \| undefined | Element removed from the array.| 310 311>**NOTE** 312> 313>A segment button supports two to five options. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five button options. If the number limit is reached, this API will not work. 314 315### shift 316 317shift(): SegmentButtonItemOptions | undefined 318 319Removes the first element from this array and returns that element. 320 321**Atomic service API**: This API can be used in atomic services since API version 12. 322 323**Return value** 324 325| Type | Description | 326| ------------------------------------------------------------ | -------------- | 327| [SegmentButtonItemOptions](#segmentbuttonitemoptions) \| undefined | Element removed from the array.| 328 329>**NOTE** 330> 331>A segment button supports two to five options. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five button options. If the number limit is reached, this API will not work. 332 333### unshift 334 335unshift(...items: SegmentButtonItemArray): number 336 337Adds the specified elements to the beginning of this array and returns the new length of the array. 338 339**Atomic service API**: This API can be used in atomic services since API version 12. 340 341**Parameters** 342 343 344| Name | Type | Mandatory| Description | 345| ----- | ------------------------------------------------- | ---- | -------------------- | 346| items | [SegmentButtonItemArray](#segmentbuttonitemarray) | Yes | Elements to add to the beginning of the array.| 347 348**Return value** 349 350| Type | Description | 351| ------ | ---------------------- | 352| number | Length of the array after the elements are added.| 353 354>**NOTE** 355> 356>A segment button supports two to five options. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five button options. If the number limit is reached, this API will not work. 357 358### splice 359 360splice(start: number, deleteCount: number, ...items: SegmentButtonItemOptions[]): SegmentButtonItemOptions[] 361 362Changes 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. 363 364**Atomic service API**: This API can be used in atomic services since API version 12. 365 366**Parameters** 367 368 369| Name | Type | Mandatory| Description | 370| ----------- | ------------------------------------------------------- | ---- | -------------------- | 371| start | number | Yes | Index of the position starting from which elements are to be removed.| 372| deleteCount | number | Yes | Number of elements to remove. | 373| items | [SegmentButtonItemOptions](#segmentbuttonitemoptions)[] | No | Elements to add to the array. | 374 375**Return value** 376 377| Type | Description | 378| ------------------------------------------------------- | ------------------------------ | 379| [SegmentButtonItemOptions](#segmentbuttonitemoptions)[] | An array containing the removed elements.| 380 381>**NOTE** 382> 383>A segment button supports two to five options. As such, a **SegmentButtonItemOptionsArray** object stores information about only two to five button options. If the number limit is reached, this API will not work. 384 385### create 386 387static create(elements: SegmentButtonItemTuple): SegmentButtonItemOptionsArray 388 389Creates a **SegmentButtonItemOptionsArray** object. 390 391**Atomic service API**: This API can be used in atomic services since API version 12. 392 393**Parameters** 394 395 396| Name | Type | Mandatory| Description | 397| -------- | ------------------------------------------------- | ---- | ---------- | 398| elements | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | Yes | Button information.| 399 400**Return value** 401 402| Type | Description | 403| ------------------------------------------------------------ | ----------------------------------------- | 404| [SegmentButtonItemOptionsArray](#segmentbuttonitemoptionsarray) | Created **SegmentButtonItemOptionsArray** object.| 405 406## TabSegmentButtonOptions 407 408Provides the options of the segment button consisting of tabs. It inherits [TabSegmentButtonConstructionOptions](#tabsegmentbuttonconstructionoptions). 409 410**Atomic service API**: This API can be used in atomic services since API version 12. 411 412**System capability**: SystemCapability.ArkUI.ArkUI.Full 413 414| Name| Type | Description | 415| ---- | ----- | ---------------------- | 416| type | "tab" | Segment button consisting of tabs.| 417 418## CapsuleSegmentButtonOptions 419 420Provides the options of the segment button consisting of single-select or multi-select options. It inherits [CapsuleSegmentButtonConstructionOptions](#capsulesegmentbuttonconstructionoptions). 421 422**Atomic service API**: This API can be used in atomic services since API version 12. 423 424**System capability**: SystemCapability.ArkUI.ArkUI.Full 425 426| Name| Type | Description | 427| ---- | --------- | ----------------------------- | 428| type | "capsule" | Segment button consisting of single-select or multi-select options.| 429 430## SegmentButtonTextItem 431 432Provides text button information. 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| text | [ResourceStr](ts-types.md#resourcestr) | Yes | Button text.| 441 442## SegmentButtonIconItem 443 444Provides icon button information. 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| icon | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon of the option when not selected.| 453| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon of the option when selected. | 454 455>**NOTE** 456> 457>For the settings to take effect, both **icon** and **selectedIcon** must be set. 458 459## SegmentButtonIconTextItem 460 461Provides icon+text button information. 462 463**Atomic service API**: This API can be used in atomic services since API version 12. 464 465**System capability**: SystemCapability.ArkUI.ArkUI.Full 466 467| Name | Type | Mandatory| Description | 468| ------------ | -------------------------------------- | ---- | -------------------- | 469| icon | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon of the option when not selected.| 470| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | Yes | Icon of the option when selected. | 471| text | [ResourceStr](ts-types.md#resourcestr) | Yes | Button text. | 472 473>**NOTE** 474> 475>For the settings to take effect, both **icon** and **selectedIcon** must be set. 476 477## SegmentButtonItemOptions 478 479Describes options of the segment button. 480 481**Atomic service API**: This API can be used in atomic services since API version 12. 482 483**Attributes** 484 485| Name | Type | Mandatory| Description | 486| ------------ | -------------------------------------- | ---- | -------------------- | 487| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the option when not selected.| 488| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the option when selected. | 489| text | [ResourceStr](ts-types.md#resourcestr) | No | Button text. | 490 491### constructor 492 493constructor(options: SegmentButtonItemOptionsConstructorOptions) 494 495Implements a constructor. 496 497**Atomic service API**: This API can be used in atomic services since API version 12. 498 499**Parameters** 500 501 502| Name | Type | Mandatory| Description | 503| ------- | ------------------------------------------------------------ | ---- | ------------------ | 504| options | [SegmentButtonItemOptionsConstructorOptions](#segmentbuttonitemoptionsconstructoroptions) | Yes | Options of the segment button.| 505 506## SegmentButtonItemOptionsConstructorOptions 507 508Describes the constructor parameters of **SegmentButtonItemOptions**. 509 510**Atomic service API**: This API can be used in atomic services since API version 12. 511 512**System capability**: SystemCapability.ArkUI.ArkUI.Full 513 514| Name | Type | Mandatory| Description | 515| ------------ | -------------------------------------- | ---- | -------------------- | 516| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the option when not selected.| 517| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the option when selected. | 518| text | [ResourceStr](ts-types.md#resourcestr) | No | Button text. | 519 520## Example 521 522### Example 1 523 524```ts 525// xxx.ets 526import { 527 ItemRestriction, 528 SegmentButton, 529 SegmentButtonItemTuple, 530 SegmentButtonOptions, 531 SegmentButtonTextItem 532} from '@kit.ArkUI'; 533 534@Entry 535@Component 536struct Index { 537 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 538 buttons: [{ text: 'Tab 1' }, { text: 'Tab 2' }, { 539 text: 'Tab 3' 540 }] as ItemRestriction<SegmentButtonTextItem>, 541 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 542 }) 543 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 544 buttons: [{ text: 'Single-select 1' }, { text: 'Single-select 2' }, { text: 'Single-select 3' }] as SegmentButtonItemTuple, 545 multiply: false, 546 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 547 }) 548 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 549 buttons: [{ text: 'Multi-select 1' }, { text: 'Multi-select 2' }, { text: 'Multi-select 3' }] as SegmentButtonItemTuple, 550 multiply: true 551 }) 552 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 553 buttons: [ 554 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 555 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 556 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 557 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 558 ] as SegmentButtonItemTuple, 559 multiply: false, 560 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 561 }) 562 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 563 buttons: [ 564 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 565 { text: 'Icon 2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 566 { text: 'Icon 3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 567 { text: 'Icon 4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 568 { text: 'Icon 5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 569 ] as SegmentButtonItemTuple, 570 multiply: true 571 }) 572 @State tabSelectedIndexes: number[] = [1] 573 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 574 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 575 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 576 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 577 578 build() { 579 Row() { 580 Column() { 581 Column({ space: 25 }) { 582 SegmentButton({ options: this.tabOptions, 583 selectedIndexes: $tabSelectedIndexes }) 584 SegmentButton({ options: this.singleSelectCapsuleOptions, 585 selectedIndexes: $singleSelectCapsuleSelectedIndexes }) 586 SegmentButton({ 587 options: this.multiplySelectCapsuleOptions, 588 selectedIndexes: $multiplySelectCapsuleSelectedIndexes }) 589 SegmentButton({ options: this.iconCapsuleOptions, 590 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes }) 591 SegmentButton({ options: this.iconTextCapsuleOptions, 592 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 593 }.width('90%') 594 }.width('100%') 595 }.height('100%') 596 } 597} 598``` 599 600 601 602### Example 2 603 604```ts 605// xxx.ets 606import { 607 ItemRestriction, 608 SegmentButton, 609 SegmentButtonItemTuple, 610 SegmentButtonOptions, 611 SegmentButtonTextItem 612} from '@kit.ArkUI'; 613 614@Entry 615@Component 616struct Index { 617 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 618 buttons: [{ text: 'Tab 1' }, { text: 'Tab 2' }, { 619 text: 'Tab 3' 620 }] as ItemRestriction<SegmentButtonTextItem>, 621 backgroundColor: Color.Green, 622 selectedBackgroundColor: Color.Orange, 623 textPadding: { top: 10, right: 10, bottom: 10, left: 10 }, 624 }) 625 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 626 buttons: [{ text: 'Single-select 1' }, { text: 'Single-select 2' }, { text: 'Single-select 3' }] as SegmentButtonItemTuple, 627 multiply: false, 628 fontColor: Color.Black, 629 selectedFontColor: Color.Yellow, 630 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 631 }) 632 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 633 buttons: [{ text: 'Multi-select 1' }, { text: 'Multi-select 2' }, { text: 'Multi-select 3' }] as SegmentButtonItemTuple, 634 multiply: true, 635 fontSize: 18, 636 selectedFontSize: 18, 637 fontWeight: FontWeight.Bolder, 638 selectedFontWeight: FontWeight.Lighter, 639 }) 640 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 641 buttons: [ 642 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 643 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 644 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 645 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 646 ] as SegmentButtonItemTuple, 647 multiply: false, 648 imageSize: { width: 40, height: 40 }, 649 buttonPadding: { top: 6, right: 10, bottom: 6, left: 10 }, 650 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 651 }) 652 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 653 buttons: [ 654 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 655 { text: 'Icon 2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 656 { text: 'Icon 3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 657 { text: 'Icon 4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 658 { text: 'Icon 5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 659 ] as SegmentButtonItemTuple, 660 multiply: true, 661 imageSize: { width: 10, height: 10 }, 662 }) 663 @State tabSelectedIndexes: number[] = [0] 664 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 665 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 666 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 667 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 668 669 build() { 670 Row() { 671 Column() { 672 Column({ space: 20 }) { 673 SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes }) 674 SegmentButton({ options: this.singleSelectCapsuleOptions, 675 selectedIndexes: $singleSelectCapsuleSelectedIndexes }) 676 SegmentButton({ options: this.multiplySelectCapsuleOptions, 677 selectedIndexes: $multiplySelectCapsuleSelectedIndexes }) 678 SegmentButton({ options: this.iconCapsuleOptions, 679 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes }) 680 SegmentButton({ options: this.iconTextCapsuleOptions, 681 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 682 }.width('90%') 683 }.width('100%') 684 }.height('100%') 685 } 686} 687``` 688 689 690 691### Example 3 692 693```ts 694import { 695 SegmentButton, 696 SegmentButtonOptions, 697 SegmentButtonItemOptionsArray, 698 SegmentButtonItemTuple, 699 SegmentButtonItemOptions 700} from '@kit.ArkUI'; 701 702@Entry 703@Component 704struct Index { 705 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 706 buttons: [{ text: '1' }, { text: '2' }, { text: '3' }, 707 { text: '4' }, { text: '5' }] as SegmentButtonItemTuple, 708 multiply: false, 709 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 710 }) 711 @State capsuleSelectedIndexes: number[] = [0] 712 713 build() { 714 Row() { 715 Column() { 716 Column({ space: 10 }) { 717 SegmentButton({ options: this.singleSelectCapsuleOptions, 718 selectedIndexes: $capsuleSelectedIndexes }) 719 Button ("Delete First Option") 720 .onClick(() => { 721 this.singleSelectCapsuleOptions.buttons.shift() 722 }) 723 Button ("Delete Last Option") 724 .onClick(() => { 725 this.singleSelectCapsuleOptions.buttons.pop() 726 }) 727 Button ("Add push to End") 728 .onClick(() => { 729 this.singleSelectCapsuleOptions.buttons.push({ text: 'push' }) 730 }) 731 Button ("Add unshift to Beginning") 732 .onClick(() => { 733 this.singleSelectCapsuleOptions.buttons.unshift(({ text: 'unshift' })) 734 }) 735 Button ("Replace Options 2 and 3 with splice1 and splice2") 736 .onClick(() => { 737 this.singleSelectCapsuleOptions.buttons.splice(1, 2, new SegmentButtonItemOptions({ 738 text: 'splice1' 739 }), new SegmentButtonItemOptions({ text: 'splice2' })) 740 }) 741 Button ("Change All Button Text") 742 .onClick(() => { 743 this.singleSelectCapsuleOptions.buttons = 744 SegmentButtonItemOptionsArray.create([{ text: 'a' }, { text: 'b' }, 745 { text: 'c' }, { text: 'd' }, { text: 'e' }]) 746 }) 747 }.width('90%') 748 }.width('100%') 749 }.height('100%') 750 } 751} 752``` 753 754 755 756### Example 4 757This example shows a mirrored layout of segment buttons. 758 759```ts 760// xxx.ets 761import { LengthMetrics, SegmentButton, SegmentButtonOptions } from '@kit.ArkUI' 762 763 764@Entry 765@Component 766struct Index { 767 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 768 buttons: [{ text: 'Tab 1' }, { text: 'Tab 2' }, { 769 text: 'Tab 3' 770 }], 771 direction: Direction.Rtl, 772 backgroundColor: Color.Green, 773 selectedBackgroundColor: Color.Orange, 774 localizedTextPadding: { 775 end: LengthMetrics.vp(10), 776 start: LengthMetrics.vp(10) 777 }, 778 }) 779 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 780 buttons: [{ text: 'Single-select 1' }, { text: 'Single-select 2' }, { text: 'Single-select 3' }], 781 multiply: false, 782 direction: Direction.Rtl, 783 fontColor: Color.Black, 784 selectedFontColor: Color.Yellow, 785 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 786 }) 787 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 788 buttons: [{ text: 'Multi-select 1' }, { text: 'Multi-select 2' }, { text: 'Multi-select 3' }], 789 multiply: true, 790 direction: Direction.Rtl, 791 fontSize: 18, 792 selectedFontSize: 18, 793 fontWeight: FontWeight.Bolder, 794 selectedFontWeight: FontWeight.Lighter, 795 }) 796 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 797 buttons: [ 798 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 799 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 800 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 801 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 802 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 803 ], 804 multiply: false, 805 direction: Direction.Rtl, 806 imageSize: { width: 40, height: 40 }, 807 localizedButtonPadding: { 808 end: LengthMetrics.vp(10), 809 start: LengthMetrics.vp(10) 810 }, 811 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 812 }) 813 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 814 buttons: [ 815 { text: 'Icon 1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 816 { text: 'Icon 2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 817 { text: 'Icon 3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 818 { text: 'Icon 4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 819 { text: 'Icon 5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 820 ], 821 multiply: true, 822 direction: Direction.Rtl, 823 imageSize: { width: 10, height: 10 }, 824 }) 825 @State tabSelectedIndexes: number[] = [0] 826 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 827 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 828 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 829 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 830 831 build() { 832 Row() { 833 Column() { 834 Column({ space: 20 }) { 835 SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes }) 836 SegmentButton({ 837 options: this.singleSelectCapsuleOptions, 838 selectedIndexes: $singleSelectCapsuleSelectedIndexes 839 }) 840 SegmentButton({ 841 options: this.multiplySelectCapsuleOptions, 842 selectedIndexes: $multiplySelectCapsuleSelectedIndexes 843 }) 844 SegmentButton({ 845 options: this.iconCapsuleOptions, 846 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes 847 }) 848 SegmentButton({ 849 options: this.iconTextCapsuleOptions, 850 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes 851 }) 852 }.width('90%') 853 }.width('100%') 854 }.height('100%') 855 } 856} 857``` 858 859 860
