1# Button 2 3The **Button** component can be used to create different types of buttons. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12This component can contain only one child component. 13 14 15## APIs 16 17### Button 18 19Button(options: ButtonOptions) 20 21Creates a button that can contain a single child component. 22 23**Widget capability**: This API can be used in ArkTS widgets since API version 9. 24 25**Atomic service API**: This API can be used in atomic services since API version 11. 26 27**System capability**: SystemCapability.ArkUI.ArkUI.Full 28 29**Parameters** 30 31| Name | Type | Mandatory| Description | 32| ------- | --------------------------------------- | ---- | -------------------- | 33| options | [ButtonOptions](#buttonoptions) | Yes | Button settings.| 34 35### Button 36 37Button(label: ResourceStr, options?: ButtonOptions) 38 39Creates a button based on text content. In this case, the component cannot contain child components. 40 41By default, the text content is displayed in a one line. 42 43**Widget capability**: This API can be used in ArkTS widgets since API version 9. 44 45**Atomic service API**: This API can be used in atomic services since API version 11. 46 47**System capability**: SystemCapability.ArkUI.ArkUI.Full 48 49**Parameters** 50 51| Name | Type | Mandatory| Description | 52| ------- | --------------------------------------- | ---- | -------------------- | 53| label | [ResourceStr](ts-types.md#resourcestr) | Yes | Button text. | 54| options | [ButtonOptions](#buttonoptions) | No | Button settings.| 55 56## ButtonOptions 57 58**System capability**: SystemCapability.ArkUI.ArkUI.Full 59 60| Name | Type | Mandatory| Description | 61| ------------------------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | 62| type | [ButtonType](#buttontype) | No | Button type.<br>Default value: **ButtonType.Capsule**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 63| stateEffect | boolean | No | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**<br>**NOTE**<br>When the pressed effect is enabled on the click of the button and the state style is set, the background color is applied based on the state style.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 64| buttonStyle<sup>11+</sup> | [ButtonStyleMode](#buttonstylemode11) | No | Style and primacy of the button.<br>Default value: **ButtonStyleMode.EMPHASIZED**<br>**NOTE**<br>The button primacy is as follows, from high to low: emphasized button, normal button, text button.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 65| controlSize<sup>11+</sup> | [ControlSize](#controlsize11) | No | Size of the button.<br>Default value: **ControlSize.NORMAL**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 66| role<sup>12+</sup> | [ButtonRole](#buttonrole12) | No | Role of the button.<br>Default value: **ButtonRole.NORMAL**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 67 68## Attributes 69 70In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 71 72### type 73 74type(value: ButtonType) 75 76Sets the button type. 77 78**Widget capability**: This API can be used in ArkTS widgets since API version 9. 79 80**Atomic service API**: This API can be used in atomic services since API version 11. 81 82**System capability**: SystemCapability.ArkUI.ArkUI.Full 83 84**Parameters** 85 86| Name| Type | Mandatory| Description | 87| ------ | --------------------------------- | ---- | ------------------------------------------- | 88| value | [ButtonType](#buttontype) | Yes | Button type.<br>Default value: **ButtonType.Capsule** | 89 90### fontSize 91 92fontSize(value: Length) 93 94Sets the font size for the button. 95 96**Widget capability**: This API can be used in ArkTS widgets since API version 9. 97 98**Atomic service API**: This API can be used in atomic services since API version 11. 99 100**System capability**: SystemCapability.ArkUI.ArkUI.Full 101 102**Parameters** 103 104| Name| Type | Mandatory| Description | 105| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 106| value | [Length](ts-types.md#length) | Yes | Font size of the button.<br>Default value:<br>**$r('sys.float.Body_L')** when **controlSize** is set to **ControlSize.NORMAL**<br>**$r('sys.float.Body_S')** when **controlSize** is set to **ControlSize.SMALL**| 107 108### fontColor 109 110fontColor(value: ResourceColor) 111 112Sets the font color for the button. 113 114**Widget capability**: This API can be used in ArkTS widgets since API version 9. 115 116**Atomic service API**: This API can be used in atomic services since API version 11. 117 118**System capability**: SystemCapability.ArkUI.ArkUI.Full 119 120**Parameters** 121 122| Name| Type | Mandatory| Description | 123| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 124| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the button.<br>Default value: **$r('sys.color.font_on_primary')**, which means white| 125 126### fontWeight 127 128fontWeight(value: number | FontWeight | string) 129 130Sets the font weight for the button. 131 132**Widget capability**: This API can be used in ArkTS widgets since API version 9. 133 134**Atomic service API**: This API can be used in atomic services since API version 11. 135 136**System capability**: SystemCapability.ArkUI.ArkUI.Full 137 138**Parameters** 139 140| Name| Type | Mandatory| Description | 141| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 142| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | Yes | Font weight of the button. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a thicker font.<br>Default value: **500**| 143 144### fontStyle<sup>8+</sup> 145 146fontStyle(value: FontStyle) 147 148Sets the font style for the button. 149 150**Widget capability**: This API can be used in ArkTS widgets since API version 9. 151 152**Atomic service API**: This API can be used in atomic services since API version 11. 153 154**System capability**: SystemCapability.ArkUI.ArkUI.Full 155 156**Parameters** 157 158| Name| Type | Mandatory| Description | 159| ------ | ------------------------------------------- | ---- | ----------------------------------------------- | 160| value | [FontStyle](ts-appendix-enums.md#fontstyle) | Yes | Font style of the button.<br>Default value: **FontStyle.Normal**| 161 162### stateEffect 163 164stateEffect(value: boolean) 165 166Specifies whether to enable the pressed effect on the click of the button. 167 168**Widget capability**: This API can be used in ArkTS widgets since API version 9. 169 170**Atomic service API**: This API can be used in atomic services since API version 11. 171 172**System capability**: SystemCapability.ArkUI.ArkUI.Full 173 174**Parameters** 175 176| Name| Type | Mandatory| Description | 177| ------ | ------- | ---- | ------------------------------------------------------------ | 178| value | boolean | Yes | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**| 179 180> **NOTE** 181> 182> When the polymorphic style is used to set the pressed state, set **stateEffect** to **false** to avoid conflicts between the built-in and custom pressed state effects. 183 184### fontFamily<sup>8+</sup> 185 186fontFamily(value: string | Resource) 187 188Sets the font family. 189 190**Widget capability**: This API can be used in ArkTS widgets since API version 9. 191 192**Atomic service API**: This API can be used in atomic services since API version 11. 193 194**System capability**: SystemCapability.ArkUI.ArkUI.Full 195 196**Parameters** 197 198| Name| Type | Mandatory| Description | 199| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 200| value | string \| [Resource](ts-types.md#resource) | Yes | Font family. The 'HarmonyOS Sans' font and [registered custom fonts](../js-apis-font.md) are supported.| 201 202### labelStyle<sup>10+</sup> 203 204labelStyle(value: LabelStyle) 205 206Sets the label style for the button. 207 208**Atomic service API**: This API can be used in atomic services since API version 11. 209 210**System capability**: SystemCapability.ArkUI.ArkUI.Full 211 212**Parameters** 213 214| Name| Type | Mandatory| Description | 215| ------ | ----------------------------------- | ---- | --------------------------------- | 216| value | [LabelStyle](#labelstyle10) | Yes | Label style of the button.| 217 218### buttonStyle<sup>11+</sup> 219 220buttonStyle(value: ButtonStyleMode) 221 222Sets the style and primacy for the button. 223 224**Widget capability**: This API can be used in ArkTS widgets since API version 11. 225 226**Atomic service API**: This API can be used in atomic services since API version 12. 227 228**System capability**: SystemCapability.ArkUI.ArkUI.Full 229 230**Parameters** 231 232| Name| Type | Mandatory| Description | 233| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | 234| value | [ButtonStyleMode](#buttonstylemode11) | Yes | Style and primacy of the button<br>Default value: **ButtonStyleMode.EMPHASIZED**| 235 236### controlSize<sup>11+</sup> 237 238controlSize(value: ControlSize) 239 240Sets the size for the button. 241 242**Widget capability**: This API can be used in ArkTS widgets since API version 11. 243 244**Atomic service API**: This API can be used in atomic services since API version 12. 245 246**System capability**: SystemCapability.ArkUI.ArkUI.Full 247 248**Parameters** 249 250| Name| Type | Mandatory| Description | 251| ------ | ------------------------------------- | ---- | ------------------------------------------------ | 252| value | [ControlSize](#controlsize11) | Yes | Size of the button.<br>Default value: **ControlSize.NORMAL**| 253 254### role<sup>12+</sup> 255 256role(value: ButtonRole) 257 258Sets the role of the button. 259 260**Widget capability**: This API can be used in ArkTS widgets since API version 12. 261 262**Atomic service API**: This API can be used in atomic services since API version 12. 263 264**System capability**: SystemCapability.ArkUI.ArkUI.Full 265 266**Parameters** 267 268| Name| Type | Mandatory| Description | 269| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 270| value | [ButtonRole](#buttonrole12) | Yes | Role of the button.<br>Default value: **ButtonRole.NORMAL**| 271 272### contentModifier<sup>12+</sup> 273 274contentModifier(modifier: ContentModifier\<ButtonConfiguration>) 275 276Creates a content modifier. 277 278**Atomic service API**: This API can be used in atomic services since API version 12. 279 280**System capability**: SystemCapability.ArkUI.ArkUI.Full 281 282**Parameters** 283 284| Name| Type | Mandatory| Description | 285| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 286| modifier | [ContentModifier\<ButtonConfiguration>](#buttonconfiguration12) | Yes | Content modifier to apply to the button.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.| 287 288## ButtonType 289 290**Widget capability**: This API can be used in ArkTS widgets since API version 9. 291 292**Atomic service API**: This API can be used in atomic services since API version 11. 293 294**System capability**: SystemCapability.ArkUI.ArkUI.Full 295 296| Name | Description | 297| ------- | ------------------ | 298| Capsule | Capsule-type button (the round corner is half of the height by default). | 299| Circle | Circle button. | 300| Normal | Normal button (without rounded corners by default). | 301 302> **NOTE** 303> - The corner radius of the rounded rectangle button is set using the universal attribute [borderRadius](ts-universal-attributes-border.md#borderradius). 304> - For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and the radius of its rounded corner is always half of the button height or width, whichever is smaller. 305> - For a button of the **Circle** type: (1) If both its width and height are set, **borderRadius** does not take effect, and the button radius is half of the width or height (whichever is smaller). (2) If either its width or height is set, **borderRadius** does not take effect, and the button radius is half of the set width or height. (3) If neither its width nor height is set, the button radius is as specified by **borderRadius**; if **borderRadius** is set to a negative value, the value **0** will be used. 306> - The button text is set using [fontSize](#fontsize), [fontColor](#fontcolor), [fontStyle](#fontstyle8), [fontFamily](#fontfamily8) and [fontWeight](#fontweight). 307> - Before setting the [gradient color](ts-universal-attributes-gradient-color.md), you need to set [backgroundColor](ts-universal-attributes-background.md#backgroundcolor) to transparent. 308 309## LabelStyle<sup>10+</sup> 310 311**Atomic service API**: This API can be used in atomic services since API version 11. 312 313**System capability**: SystemCapability.ArkUI.ArkUI.Full 314 315| Name | Type | Mandatory| Description | 316| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 317| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | No | Display mode when the label text is too long. Text is clipped at the transition between words. To clip text in the middle of a word, add zero-width spaces between characters.<br>Default value: **TextOverflow.Ellipsis**| 318| maxLines | number | No | Maximum number of lines in the label text. By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **overflow** to specify how it is displayed.<br>Default value: **1**| 319| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Minimum font size of the label text. For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings.<br>**NOTE**<br>If the value of **minFontSize** is less than or equal to 0, the adaptive font size does not take effect.| 320| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Maximum font size of the label text. For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings.| 321| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | No | How the adaptive height is determined for the label text.<br>Default value: **TextHeightAdaptivePolicy.MAX_LINES_FIRST**| 322| font | [Font](ts-types.md#font) | No | Font of the label text.<br>Default value: See [Font](ts-types.md#font).| 323 324## ButtonStyleMode<sup>11+</sup> 325 326**Widget capability**: This API can be used in ArkTS widgets since API version 11. 327 328**Atomic service API**: This API can be used in atomic services since API version 12. 329 330**System capability**: SystemCapability.ArkUI.ArkUI.Full 331 332| Name | Description | 333| ------- | ------------------ | 334| EMPHASIZED | Emphasized button (used to direct the user to the most important task).| 335| NORMAL | Normal button (used to direct the user to a common task). | 336| TEXTUAL | Text button (displayed as simple text without any background color). | 337 338## ControlSize<sup>11+</sup> 339 340**Widget capability**: This API can be used in ArkTS widgets since API version 11. 341 342**Atomic service API**: This API can be used in atomic services since API version 12. 343 344**System capability**: SystemCapability.ArkUI.ArkUI.Full 345 346| Name | Description | 347| ------- | ------------------ | 348| SMALL | Small button.| 349| NORMAL | Normal button. | 350 351## ButtonRole<sup>12+</sup> 352 353**Widget capability**: This API can be used in ArkTS widgets since API version 12. 354 355**Atomic service API**: This API can be used in atomic services since API version 12. 356 357**System capability**: SystemCapability.ArkUI.ArkUI.Full 358 359| Name | Description | 360| ------- | ------------------ | 361| NORMAL | Normal button.| 362| ERROR | Warning button. | 363 364## ButtonConfiguration<sup>12+</sup> 365 366You need a custom class to implement the **ContentModifier** API. 367 368**Atomic service API**: This API can be used in atomic services since API version 12. 369 370**System capability**: SystemCapability.ArkUI.ArkUI.Full 371 372| Name | Type | Read Only | Optional| Description | 373| ------ | ------ | ---------------- | ---------------- | ---------------- | 374| label | string | No| No| Text label of the button.| 375| pressed | boolean | No| No| Whether the button is pressed.<br>**NOTE**<br>The button here refers to the original button, not the new component constructed using the builder. If the new component is larger than the original button, this parameter does not signify the pressed state of the excess part.| 376| triggerClick | [ButtonTriggerClickCallback](#buttontriggerclickcallback12) | No| No| Click event of the new component constructed using the builder.| 377 378## ButtonTriggerClickCallback<sup>12+</sup> 379 380type ButtonTriggerClickCallback = (xPos: number, yPos: number) => void 381 382Defines the callback type used in **ButtonConfiguration**. 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| Name | Type | Mandatory| Description | 391| ------ | ------ | ---- | ---------------- | 392| xPos | number | Yes| X-coordinate of the click point.| 393| yPos | number | Yes| Y-coordinate of the click point.| 394 395## Events 396 397The [universal events](ts-universal-events-click.md) are supported. 398## Example 399 400### Example 1: Setting the Button Display Style 401 402This example demonstrates two methods to create buttons, either with child components or using text content. 403 404```ts 405// xxx.ets 406@Entry 407@Component 408struct ButtonExample { 409 build() { 410 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 411 Text('Normal button').fontSize(9).fontColor(0xCCCCCC) 412 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 413 Button('OK', { type: ButtonType.Normal, stateEffect: true }) 414 .borderRadius(8) 415 .backgroundColor(0x317aff) 416 .width(90) 417 .onClick(() => { 418 console.log('ButtonType.Normal') 419 }) 420 Button({ type: ButtonType.Normal, stateEffect: true }) { 421 Row() { 422 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 423 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 424 }.alignItems(VerticalAlign.Center) 425 }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40) 426 427 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4) 428 .borderRadius(8).backgroundColor(0x317aff).width(90) 429 } 430 431 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 432 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 433 Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 434 Button({ type: ButtonType.Capsule, stateEffect: true }) { 435 Row() { 436 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 437 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 438 }.alignItems(VerticalAlign.Center).width(90).height(40) 439 }.backgroundColor(0x317aff) 440 441 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4) 442 .backgroundColor(0x317aff).width(90) 443 } 444 445 Text('Circle button').fontSize(9).fontColor(0xCCCCCC) 446 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { 447 Button({ type: ButtonType.Circle, stateEffect: true }) { 448 LoadingProgress().width(20).height(20).color(0xFFFFFF) 449 }.width(55).height(55).backgroundColor(0x317aff) 450 451 Button({ type: ButtonType.Circle, stateEffect: true }) { 452 LoadingProgress().width(20).height(20).color(0xFFFFFF) 453 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 454 } 455 }.height(400).padding({ left: 35, right: 35, top: 35 }) 456 } 457} 458``` 459 460 461 462### Example 2: Adding Render Control to a Button 463 464This example uses if/else statements to control the display text of the button. 465 466```ts 467// xxx.ets 468@Entry 469@Component 470struct SwipeGestureExample { 471 @State count: number = 0 472 473 build() { 474 Column() { 475 Text(`${this.count}`) 476 .fontSize(30) 477 .onClick(() => { 478 this.count++ 479 }) 480 if (this.count <= 0) { 481 Button('count is negative').fontSize(30).height(50) 482 } else if (this.count % 2 === 0) { 483 Button('count is even').fontSize(30).height(50) 484 } else { 485 Button('count is odd').fontSize(30).height(50) 486 } 487 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 488 } 489} 490``` 491 492 493 494### Example 3: Setting the Button Text Style 495 496This example customizes the display style of button text by configuring **labelStyle**. 497 498```ts 499// xxx.ets 500@Entry 501@Component 502struct buttonTestDemo { 503 @State txt: string = 'overflowTextOverlengthTextOverflow.Clip'; 504 @State widthShortSize: number = 210; 505 506 build() { 507 Row() { 508 Column() { 509 Button(this.txt) 510 .width(this.widthShortSize) 511 .height(100) 512 .backgroundColor(0x317aff) 513 .labelStyle({ overflow: TextOverflow.Clip, 514 maxLines: 1, 515 minFontSize: 20, 516 maxFontSize: 20, 517 font: { 518 size: 20, 519 weight: FontWeight.Bolder, 520 family: 'cursive', 521 style: FontStyle.Italic 522 } 523 }) 524 .fontSize(40) 525 } 526 .width('100%') 527 } 528 .height('100%') 529 } 530} 531``` 532 533 534 535### Example 4: Setting Importance of Different Sized Buttons 536 537This example demonstrates how to set the importance of buttons of different sizes by configuring **controlSize** and **buttonStyle**. 538 539```ts 540// xxx.ets 541@Entry 542@Component 543struct ButtonExample { 544 build() { 545 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 546 Text('Normal size button').fontSize(9).fontColor(0xCCCCCC) 547 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 548 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED }); 549 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL }); 550 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL }); 551 } 552 553 Text('Small size button').fontSize(9).fontColor(0xCCCCCC) 554 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 555 Button('Emphasized', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.EMPHASIZED }); 556 Button('Normal', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.NORMAL }); 557 Button('Textual', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.TEXTUAL }); 558 } 559 560 Text('Small size button').fontSize(9).fontColor(0xCCCCCC) 561 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 562 Button('Emphasized').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.EMPHASIZED); 563 Button('Normal').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.NORMAL); 564 Button('Textual').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.TEXTUAL); 565 } 566 567 }.height(400).padding({ left: 35, right: 35, top: 35 }) 568 } 569} 570``` 571 572 573### Example 5: Setting the Button Role 574 575This example demonstrates how to set the role of the button by configuring **role**. 576 577```ts 578// xxx.ets 579@Entry 580@Component 581struct ButtonExample { 582 build() { 583 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 584 Text('Role is Normal button').fontSize(9).fontColor(0xCCCCCC) 585 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 586 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.NORMAL }); 587 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL }); 588 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.NORMAL }); 589 } 590 Text('Role is Error button').fontSize(9).fontColor(0xCCCCCC) 591 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 592 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.ERROR}); 593 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.ERROR }); 594 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.ERROR }); 595 } 596 }.height(200).padding({ left: 35, right: 35, top: 35 }) 597 } 598} 599``` 600 601 602### Example 6: ImplementIng a Custom Button 603This example implements a custom button in the shape of a circle. The circle is red when pressed, accompanied by the text "Pressed" in the title. It is black when not pressed, accompanied by the text "Not pressed" in the title. 604```ts 605class MyButtonStyle implements ContentModifier<ButtonConfiguration> { 606 x: number = 0 607 y: number = 0 608 selectedColor:Color = Color.Black 609 610 constructor(x : number, y: number,ColorType:Color) { 611 this.x = x 612 this.y = y 613 this.selectedColor = ColorType 614 } 615 applyContent() : WrappedBuilder<[ButtonConfiguration]> 616 { 617 return wrapBuilder(buildButton1) 618 } 619} 620 621@Builder function buildButton1(config: ButtonConfiguration) { 622 Column({space:30}) { 623 Text(config.enabled ? "enabled true" : "enabled false") 624 Text('Circle state' + (config.pressed? "(Pressed)" : "(Not pressed)")) 625 Text('X-coordinate of the click point:' + (config.enabled ? (config.contentModifier as MyButtonStyle).x : "0")) 626 Text('Y-coordinate of the click point:' + (config.enabled ? (config.contentModifier as MyButtonStyle).y : "0")) 627 Circle({ width: 50, height: 50 }) 628 .fill(config.pressed ? (config.contentModifier as MyButtonStyle).selectedColor : Color.Black) 629 .gesture( 630 TapGesture({count:1}).onAction((event: GestureEvent)=>{ 631 config.triggerClick(event.fingerList[0].localX,event.fingerList[0].localY) 632 })).opacity(config.enabled ? 1 : 0.1) 633 } 634} 635 636@Entry 637@Component 638struct ButtonExample { 639 @State buttonEnabled: boolean = true; 640 @State positionX: number = 0 641 @State positionY: number = 0 642 @State state : boolean[] = [true,false] 643 @State index:number = 0 644 build() { 645 Column() { 646 Button('OK') 647 .contentModifier(new MyButtonStyle(this.positionX,this.positionY,Color.Red)) 648 .onClick((event) => { 649 console.info('change' + JSON.stringify(event)) 650 this.positionX = event.displayX 651 this.positionY = event.displayY 652 }).enabled(this.buttonEnabled) 653 Row() { 654 Toggle({ type: ToggleType.Switch, isOn: true }).onChange((value: boolean) => { 655 if (value) { 656 this.buttonEnabled = true 657 } else { 658 this.buttonEnabled = false 659 } 660 }).margin({left:-80}) 661 } 662 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 663 } 664} 665``` 666 667
