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| Name | Type | Mandatory | Description | 59| ------------------------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | 60| 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. | 61| 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>**Atomic service API**: This API can be used in atomic services since API version 11.| 62| 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>**Atomic service API**: This API can be used in atomic services since API version 12. | 63| controlSize<sup>11+</sup> | [ControlSize](#controlsize11) | No | Size of the button.<br>Default value: **ControlSize.NORMAL**<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 64| role<sup>12+</sup> | [ButtonRole](#buttonrole12) | No | Role of the button.<br>Default value: **ButtonRole.NORMAL**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 65 66## Attributes 67 68In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 69 70### type 71 72type(value: ButtonType) 73 74Sets the button type. 75 76**Widget capability**: This API can be used in ArkTS widgets since API version 9. 77 78**Atomic service API**: This API can be used in atomic services since API version 11. 79 80**System capability**: SystemCapability.ArkUI.ArkUI.Full 81 82**Parameters** 83 84| Name | Type | Mandatory | Description | 85| ------ | --------------------------------- | ---- | ------------------------------------------- | 86| value | [ButtonType](#buttontype) | Yes | Button type.<br>Default value: **ButtonType.Capsule** | 87 88### fontSize 89 90fontSize(value: Length) 91 92Sets the font size for the button. 93 94**Widget capability**: This API can be used in ArkTS widgets since API version 9. 95 96**Atomic service API**: This API can be used in atomic services since API version 11. 97 98**System capability**: SystemCapability.ArkUI.ArkUI.Full 99 100**Parameters** 101 102| Name | Type | Mandatory | Description | 103| ------ | ---------------------------- | ---- | --------------------------------- | 104| value | [Length](ts-types.md#length) | Yes | Font size of the button.<br>Default value: **'16fp'** if **controlSize** is set to **controlSize.NORMAL** and **'12fp'** if **controlSize** is set to **controlSize.SMALL** | 105 106### fontColor 107 108fontColor(value: ResourceColor) 109 110Sets the font color for the button. 111 112**Widget capability**: This API can be used in ArkTS widgets since API version 9. 113 114**Atomic service API**: This API can be used in atomic services since API version 11. 115 116**System capability**: SystemCapability.ArkUI.ArkUI.Full 117 118**Parameters** 119 120| Name | Type | Mandatory | Description | 121| ------ | ------------------------------------------ | ---- | ------------------------------------- | 122| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the button.<br>Default value: **'\#ffffff'** | 123 124### fontWeight 125 126fontWeight(value: number | FontWeight | string) 127 128Sets the font weight for the button. 129 130**Widget capability**: This API can be used in ArkTS widgets since API version 9. 131 132**Atomic service API**: This API can be used in atomic services since API version 11. 133 134**System capability**: SystemCapability.ArkUI.ArkUI.Full 135 136**Parameters** 137 138| Name | Type | Mandatory | Description | 139| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 140| value | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| 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: **400** | 141 142### fontStyle 143 144fontStyle(value: FontStyle) 145 146Sets the font style for the button. 147 148**Widget capability**: This API can be used in ArkTS widgets since API version 9. 149 150**Atomic service API**: This API can be used in atomic services since API version 11. 151 152**System capability**: SystemCapability.ArkUI.ArkUI.Full 153 154**Parameters** 155 156| Name | Type | Mandatory | Description | 157| ------ | ------------------------------------------- | ---- | ----------------------------------------------- | 158| value | [FontStyle](ts-appendix-enums.md#fontstyle) | Yes | Font style of the button.<br>Default value: **FontStyle.Normal** | 159 160### stateEffect 161 162stateEffect(value: boolean) 163 164Specifies whether to enable the pressed effect on the click of the button. 165 166**Widget capability**: This API can be used in ArkTS widgets since API version 9. 167 168**Atomic service API**: This API can be used in atomic services since API version 11. 169 170**System capability**: SystemCapability.ArkUI.ArkUI.Full 171 172**Parameters** 173 174| Name | Type | Mandatory | Description | 175| ------ | ------- | ---- | ------------------------------------------------------------ | 176| 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** | 177 178### fontFamily 179 180fontFamily(value: string | Resource) 181 182Sets the font family. 183 184**Widget capability**: This API can be used in ArkTS widgets since API version 9. 185 186**Atomic service API**: This API can be used in atomic services since API version 11. 187 188**System capability**: SystemCapability.ArkUI.ArkUI.Full 189 190**Parameters** 191 192| Name | Type | Mandatory | Description | 193| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 194| value | [Resource](ts-types.md#resource) \| string | Yes | Font family. The 'HarmonyOS Sans' font and [registered custom fonts](../js-apis-font.md) are supported. | 195 196### labelStyle<sup>10+</sup> 197 198labelStyle(value: LabelStyle) 199 200Sets the label style for the button. 201 202**Atomic service API**: This API can be used in atomic services since API version 11. 203 204**System capability**: SystemCapability.ArkUI.ArkUI.Full 205 206**Parameters** 207 208| Name | Type | Mandatory | Description | 209| ------ | ----------------------------------- | ---- | --------------------------------- | 210| value | [LabelStyle](#labelstyle10) | Yes | Label style of the button. | 211 212### buttonStyle<sup>11+</sup> 213 214buttonStyle(value: ButtonStyleMode) 215 216Sets the style and primacy for the button. 217 218**Widget capability**: This API can be used in ArkTS widgets since API version 11. 219 220**Atomic service API**: This API can be used in atomic services since API version 12. 221 222**System capability**: SystemCapability.ArkUI.ArkUI.Full 223 224**Parameters** 225 226| Name | Type | Mandatory | Description | 227| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | 228| value | [ButtonStyleMode](#buttonstylemode11) | Yes | Style and primacy of the button<br>Default value: **ButtonStyleMode.EMPHASIZED** | 229 230### controlSize<sup>11+</sup> 231 232controlSize(value: ControlSize) 233 234Sets the size for the button. 235 236**Widget capability**: This API can be used in ArkTS widgets since API version 11. 237 238**Atomic service API**: This API can be used in atomic services since API version 12. 239 240**System capability**: SystemCapability.ArkUI.ArkUI.Full 241 242**Parameters** 243 244| Name | Type | Mandatory | Description | 245| ------ | ------------------------------------- | ---- | ------------------------------------------------ | 246| value | [ControlSize](#controlsize11) | Yes | Size of the button.<br>Default value: **ControlSize.NORMAL** | 247 248### role<sup>12+</sup> 249 250role(value: ButtonRole) 251 252Sets the role of the button. 253 254**Widget capability**: This API can be used in ArkTS widgets since API version 12. 255 256**Atomic service API**: This API can be used in atomic services since API version 12. 257 258**System capability**: SystemCapability.ArkUI.ArkUI.Full 259 260**Parameters** 261 262| Name | Type | Mandatory | Description | 263| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 264| value | [ButtonRole](#buttonrole12) | Yes | Role of the button.<br>Default value: **ButtonRole.NORMAL** | 265 266### contentModifier<sup>12+</sup> 267 268contentModifier(modifier: ContentModifier\<ButtonConfiguration>) 269 270Creates a content modifier. 271 272**Atomic service API**: This API can be used in atomic services since API version 12. 273 274**System capability**: SystemCapability.ArkUI.ArkUI.Full 275 276**Parameters** 277 278| Name | Type | Mandatory | Description | 279| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 280| 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. | 281 282## ButtonType 283 284**Widget capability**: This API can be used in ArkTS widgets since API version 9. 285 286**Atomic service API**: This API can be used in atomic services since API version 11. 287 288| Name | Description | 289| ------- | ------------------ | 290| Capsule | Capsule-type button (the round corner is half of the height by default). | 291| Circle | Circle button. | 292| Normal | Normal button (without rounded corners by default). | 293 294> **NOTE** 295> - The rounded corner of a button is set by using [borderRadius](ts-universal-attributes-border.md#borderradius), rather than by using the **border** API. Only a rounded corner whose parameter is [Length](ts-types.md#length) is supported. 296> - 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. 297> - 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. 298> - The button text is set using the [text style attributes](ts-universal-attributes-text-style.md#attributes). 299> - Before setting the [gradient color](ts-universal-attributes-gradient-color.md), you need to set [backgroundColor](ts-universal-attributes-background.md#backgroundcolor) to transparent. 300 301## LabelStyle<sup>10+</sup> 302 303**Atomic service API**: This API can be used in atomic services since API version 11. 304 305| Name | Type | Mandatory | Description | 306| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 307| 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** | 308| 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** | 309| 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. | 310| 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. | 311| 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** | 312| font | [Font](ts-types.md#font) | No | Font of the label text.<br>Default value: See [Font](ts-types.md#font). | 313 314## ButtonStyleMode<sup>11+</sup> 315 316**Widget capability**: This API can be used in ArkTS widgets since API version 11. 317 318**Atomic service API**: This API can be used in atomic services since API version 12. 319 320| Name | Description | 321| ------- | ------------------ | 322| EMPHASIZED | Emphasized button (used to direct the user to the most important task). | 323| NORMAL | Normal button (used to direct the user to a common task). | 324| TEXTUAL | Text button (displayed as simple text without any background color). | 325 326## ControlSize<sup>11+</sup> 327 328**Widget capability**: This API can be used in ArkTS widgets since API version 11. 329 330**Atomic service API**: This API can be used in atomic services since API version 12. 331 332| Name | Description | 333| ------- | ------------------ | 334| SMALL | Small button. | 335| NORMAL | Normal button. | 336 337## ButtonRole<sup>12+</sup> 338 339**Widget capability**: This API can be used in ArkTS widgets since API version 12. 340 341**Atomic service API**: This API can be used in atomic services since API version 12. 342 343| Name | Description | 344| ------- | ------------------ | 345| NORMAL | Normal button. | 346| ERROR | Warning button. | 347 348## ButtonConfiguration<sup>12+</sup> 349 350You need a custom class to implement the **ContentModifier** API. 351 352**Atomic service API**: This API can be used in atomic services since API version 12. 353 354| Name | Type | Description | 355| ------ | ------ | ---------------- | 356| label | string | Text label of the button. | 357| pressed | boolean | 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. | 358| triggerClick | [ButtonTriggerClickCallback](#buttontriggerclickcallback12) | Click event of the new component constructed using the builder. | 359 360## ButtonTriggerClickCallback<sup>12+</sup> 361 362Defines the callback type used in **ButtonConfiguration**. 363 364**Atomic service API**: This API can be used in atomic services since API version 12. 365 366| Name | Type | Mandatory | Description | 367| ------ | ------ | ---- | ---------------- | 368| xPos | number | Yes | X-coordinate of the click point. | 369| yPos | number | Yes | Y-coordinate of the click point. | 370 371## Events 372 373The [universal events](ts-universal-events-click.md) are supported. 374## Example 375 376### Example 1 377 378```ts 379// xxx.ets 380@Entry 381@Component 382struct ButtonExample { 383 build() { 384 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 385 Text('Normal button').fontSize(9).fontColor(0xCCCCCC) 386 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 387 Button('OK', { type: ButtonType.Normal, stateEffect: true }) 388 .borderRadius(8) 389 .backgroundColor(0x317aff) 390 .width(90) 391 .onClick(() => { 392 console.log('ButtonType.Normal') 393 }) 394 Button({ type: ButtonType.Normal, stateEffect: true }) { 395 Row() { 396 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 397 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 398 }.alignItems(VerticalAlign.Center) 399 }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40) 400 401 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4) 402 .borderRadius(8).backgroundColor(0x317aff).width(90) 403 } 404 405 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 406 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 407 Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 408 Button({ type: ButtonType.Capsule, stateEffect: true }) { 409 Row() { 410 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 411 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 412 }.alignItems(VerticalAlign.Center).width(90).height(40) 413 }.backgroundColor(0x317aff) 414 415 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4) 416 .backgroundColor(0x317aff).width(90) 417 } 418 419 Text('Circle button').fontSize(9).fontColor(0xCCCCCC) 420 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { 421 Button({ type: ButtonType.Circle, stateEffect: true }) { 422 LoadingProgress().width(20).height(20).color(0xFFFFFF) 423 }.width(55).height(55).backgroundColor(0x317aff) 424 425 Button({ type: ButtonType.Circle, stateEffect: true }) { 426 LoadingProgress().width(20).height(20).color(0xFFFFFF) 427 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 428 } 429 }.height(400).padding({ left: 35, right: 35, top: 35 }) 430 } 431} 432``` 433 434 435 436### Example 2 437 438```ts 439// xxx.ets 440@Entry 441@Component 442struct SwipeGestureExample { 443 @State count: number = 0 444 445 build() { 446 Column() { 447 Text(`${this.count}`) 448 .fontSize(30) 449 .onClick(() => { 450 this.count++ 451 }) 452 if (this.count <= 0) { 453 Button('count is negative').fontSize(30).height(50) 454 } else if (this.count % 2 === 0) { 455 Button('count is even').fontSize(30).height(50) 456 } else { 457 Button('count is odd').fontSize(30).height(50) 458 } 459 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 460 } 461} 462``` 463 464 465 466### Example 3 467 468```ts 469// xxx.ets 470@Entry 471@Component 472struct buttonTestDemo { 473 @State txt: string = 'overflowTextOverlengthTextOverflow.Clip'; 474 @State widthShortSize: number = 200; 475 476 build() { 477 Row() { 478 Column() { 479 Button(this.txt) 480 .width(this.widthShortSize) 481 .height(100) 482 .labelStyle({ overflow: TextOverflow.Clip, 483 maxLines: 1, 484 minFontSize: 20, 485 maxFontSize: 20, 486 font: { 487 size: 20, 488 weight: FontWeight.Bolder, 489 family: 'cursive', 490 style: FontStyle.Italic 491 } 492 }) 493 .fontSize(40) 494 } 495 .width('100%') 496 } 497 .height('100%') 498 } 499} 500``` 501 502 503 504### Example 4 505```ts 506// xxx.ets 507@Entry 508@Component 509struct ButtonExample { 510 build() { 511 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 512 Text('Normal size button').fontSize(9).fontColor(0xCCCCCC) 513 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 514 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED }); 515 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL }); 516 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL }); 517 } 518 519 Text('Small size button').fontSize(9).fontColor(0xCCCCCC) 520 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 521 Button('Emphasized', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.EMPHASIZED }); 522 Button('Normal', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.NORMAL }); 523 Button('Textual', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.TEXTUAL }); 524 } 525 526 Text('Small size button').fontSize(9).fontColor(0xCCCCCC) 527 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 528 Button('Emphasized').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.EMPHASIZED); 529 Button('Normal').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.NORMAL); 530 Button('Textual').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.TEXTUAL); 531 } 532 533 }.height(400).padding({ left: 35, right: 35, top: 35 }) 534 } 535} 536``` 537 538 539### Example 5 540```ts 541// xxx.ets 542@Entry 543@Component 544struct ButtonExample { 545 build() { 546 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 547 Text('Role is Normal button').fontSize(9).fontColor(0xCCCCCC) 548 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 549 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.NORMAL }); 550 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL }); 551 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.NORMAL }); 552 } 553 Text('Role is Error button').fontSize(9).fontColor(0xCCCCCC) 554 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 555 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.ERROR}); 556 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.ERROR }); 557 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.ERROR }); 558 } 559 }.height(200).padding({ left: 35, right: 35, top: 35 }) 560 } 561} 562``` 563 564 565### Example 6 566This 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. 567```ts 568class MyButtonStyle implements ContentModifier<ButtonConfiguration> { 569 x: number = 0 570 y: number = 0 571 selectedColor:Color = Color.Black 572 573 constructor(x : number, y: number,ColorType:Color) { 574 this.x = x 575 this.y = y 576 this.selectedColor = ColorType 577 } 578 applyContent() : WrappedBuilder<[ButtonConfiguration]> 579 { 580 return wrapBuilder(buildButton1) 581 } 582} 583 584@Builder function buildButton1(config: ButtonConfiguration) { 585 Column({space:30}) { 586 Text(config.enabled ? "enabled true" : "enabled false") 587 Text ('Circle state' + (config.pressed? "(Pressed)": "(Not pressed)")) 588 Text('X-coordinate of the click point:' + (config.enabled ? (config.contentModifier as MyButtonStyle).x : "0")) 589 Text('Y-coordinate of the click point:' + (config.enabled ? (config.contentModifier as MyButtonStyle).y : "0")) 590 Circle({ width: 50, height: 50 }) 591 .fill(config.pressed ? (config.contentModifier as MyButtonStyle).selectedColor : Color.Black) 592 .gesture( 593 TapGesture({count:1}).onAction((event: GestureEvent)=>{ 594 config.triggerClick(event.fingerList[0].localX,event.fingerList[0].localY) 595 })).opacity(config.enabled ? 1 : 0.1) 596 } 597} 598 599@Entry 600@Component 601struct ButtonExample { 602 @State buttonEnabled: boolean = true; 603 @State positionX: number = 0 604 @State positionY: number = 0 605 @State state : boolean[] = [true,false] 606 @State index:number = 0 607 build() { 608 Column() { 609 Button('OK') 610 .contentModifier(new MyButtonStyle(this.positionX,this.positionY,Color.Red)) 611 .onClick((event) => { 612 console.info('change' + JSON.stringify(event)) 613 this.positionX = event.displayX 614 this.positionY = event.displayY 615 }).enabled(this.buttonEnabled) 616 Row() { 617 Toggle({ type: ToggleType.Switch, isOn: true }).onChange((value: boolean) => { 618 if (value) { 619 this.buttonEnabled = true 620 } else { 621 this.buttonEnabled = false 622 } 623 }).margin({left:-80}) 624 } 625 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 626 } 627} 628``` 629 630
