1# ArcButton 2 3The **ArcButton** component represents an arc button specifically designed for circular screens. It offers various button styles, such as emphasized, normal, and warning, tailored for watch UIs. 4 5> **NOTE** 6> 7> This component is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Modules to Import 10 11``` 12import { 13 ArcButton, 14 ArcButtonOptions, 15 ArcButtonStatus, 16 ArcButtonStyleMode, 17 ArcButtonPosition, 18} from '@kit.ArkUI'; 19``` 20 21## Child Components 22 23Not supported 24 25## Attributes 26The [universal attributes](ts-component-general-attributes.md) are not supported. 27 28## Events 29Among the universal events, the [click event](ts-universal-events-click.md) and [touch event](ts-universal-events-touch.md) are supported. 30 31## ArcButton 32 33ArcButton({ options: ArcButtonOptions }) 34 35Creates an instance of **ArcButton** with configuration parameters. 36 37**Decorator**: @Component 38 39**Atomic service API**: This API can be used in atomic services since API version 18. 40 41**System capability**: SystemCapability.ArkUI.ArkUI.Circle 42 43**Parameters** 44 45| Name | Type | Mandatory| Decorator | Description | 46| ------- | ---------------- | ---- | ----------- | ------------------------- | 47| options | [ArcButtonOptions](#arcbuttonoptions) | Yes | @Require | Text, background color, shadow, and other parameters of the **ArcButton** component.| 48 49## ArcButtonOptions 50 51Defines the default or custom style parameters for the **ArcButton** component. 52 53**Atomic service API**: This API can be used in atomic services since API version 18. 54 55**System capability**: SystemCapability.ArkUI.ArkUI.Circle 56 57### Attributes 58 59| Name | Type | Mandatory| Description | 60| ---------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 61| position | [ArcButtonPosition](#arcbuttonposition) | Yes | Type of the arc button.<br>Default value: **ArcButtonPosition.BOTTOM_EDGE**| 62| styleMode | [ArcButtonStyleMode](#arcbuttonstylemode) | Yes | Style mode for the arc button.<br>Default value: **ArcButtonStyleMode.EMPHASIZED_LIGHT**| 63| status | [ArcButtonStatus](#arcbuttonstatus) | Yes | Status of the arc button.<br>Default value: **ArcButtonStatus.NORMAL** | 64| label | [ResourceStr](ts-types.md#resourcestr) | Yes | Text displayed on the arc button. | 65| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Yes | Background blur style of the arc button.<br>Default value: **BlurStyle.NONE**| 66| backgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Background color of the arc button.<br>Default value: **Color.Black** | 67| shadowColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Shadow color of the arc button.<br>Default value: **Color.Black** | 68| shadowEnabled | boolean | Yes | Whether to enable the shadow for the arc button.<br>Default value: **false**<br>The value **true** means to enable the shadow, and **false** means the opposite.| 69| fontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Font size of the arc button.<br>Default value: **19fp** | 70| fontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Font color of the arc button.<br>Default value: **Color.White** | 71| pressedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Font color of the arc button when pressed.<br>Default value: **Color.White** | 72| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Yes | Font style of the arc button.<br>Default value: **FontStyle.Normal** | 73| fontFamily | string \| [Resource](ts-types.md#resource) | Yes | Font family of the arc button. | 74| fontMargin | [LocalizedMargin](ts-types.md#localizedmargin12) | Yes | Margin of the arc button text.<br>Default value: **{ start: 24vp, top: 10vp,end: 24vp, bottom: 16vp }**| 75|onTouch | [Callback](ts-types.md#voidcallback12)< [TouchEvent](ts-universal-events-touch.md#touchevent)> | No | Callback triggered by touch actions on the arc button.| 76|onClick | [Callback](ts-types.md#voidcallback12)<[ClickEvent](ts-universal-events-click.md#clickevent)) > | No | Callback triggered by click actions on the arc button.| 77 78### constructor 79 80constructor(options: CommonArcButtonOptions) 81 82A constructor used to create an **ArcButton** component. 83 84**Atomic service API**: This API can be used in atomic services since API version 18. 85 86**System capability**: SystemCapability.ArkUI.ArkUI.Circle 87 88**Parameters** 89 90| Name | Type | Mandatory| Description | 91| ------- | ------------------------------------------------- | ---- | --------------------------------------------- | 92| options | [CommonArcButtonOptions](#commonarcbuttonoptions) | Yes | Text, background color, shadow, and other parameters of the **ArcButton** component.| 93 94## CommonArcButtonOptions 95 96Defines the default or custom style parameters for the **ArcButton** component. 97 98**Atomic service API**: This API can be used in atomic services since API version 18. 99 100**System capability**: SystemCapability.ArkUI.ArkUI.Circle 101 102| Name | Type | Mandatory| Description | 103| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 104| position | [ArcButtonPosition](#arcbuttonposition) | Yes | Type of the arc button.<br>Default value: **ArcButtonPosition.BOTTOM_EDGE**| 105| styleMode | [ArcButtonStyleMode](#arcbuttonstylemode) | Yes | Style mode for the arc button.<br>Default value: **ArcButtonStyleMode.EMPHASIZED_LIGHT**| 106| status | [ArcButtonStatus](#arcbuttonstatus) | Yes | Status of the arc button.<br>Default value: **ArcButtonStatus.NORMAL** | 107| label | [ResourceStr](ts-types.md#resourcestr) | Yes | Text displayed on the arc button. | 108| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Yes | Background blur style of the arc button.<br>Default value: **BlurStyle.NONE** | 109| backgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Background color of the arc button.<br>Default value: **Color.Black** | 110| shadowColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Shadow color of the arc button.<br>Default value: **Color.Black** | 111| shadowEnabled | boolean | Yes | Whether to enable the shadow for the arc button.<br>Default value: **false**<br>The value **true** means to enable the shadow, and **false** means the opposite.| 112| fontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | Yes | Font size of the arc button.<br>Default value: **19fp** | 113| fontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Font color of the arc button.<br>Default value: **Color.White** | 114| pressedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Font color of the arc button when pressed.<br>Default value: **Color.White** | 115| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | Yes | Font style of the arc button.<br>Default value: **FontStyle.Normal** | 116| fontFamily | string \| [Resource](ts-types.md#resource) | Yes | Font family of the arc button. | 117| fontMargin | [LocalizedMargin](ts-types.md#localizedmargin12) | Yes | Margin of the arc button text.<br>Default value: **{ start: 24vp, top: 10vp,end: 24vp, bottom: 16vp }**| 118| onTouch | [Callback](ts-types.md#voidcallback12)< [TouchEvent](ts-universal-events-touch.md#touchevent)> | No | Callback triggered by touch actions on the arc button. | 119| onClick | [Callback](ts-types.md#voidcallback12)<[ClickEvent](ts-universal-events-click.md#clickevent)) > | No | Callback triggered by click actions on the arc button. | 120 121## ArcButtonPosition 122 123Enumerates the types of arc buttons that can be set for **ArcButton**. 124 125**Atomic service API**: This API can be used in atomic services since API version 18. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Circle 128 129| Name | Value | Description | 130| ----------- | ---- | -------------------------------- | 131| TOP_EDGE | 0 | Upper arc button located at the top of the circular screen. | 132| BOTTOM_EDGE | 1 | Lower arc button located at the bottom of the circular screen.| 133 134 135## ArcButtonStyleMode 136 137Enumerates the style modes that can be set for **ArcButton**. 138 139**Atomic service API**: This API can be used in atomic services since API version 18. 140 141**System capability**: SystemCapability.ArkUI.ArkUI.Circle 142 143| Name | Value | Description | 144| ---------------- | ---- | ---------------- | 145| EMPHASIZED_LIGHT | 0 | Emphasized, light color.| 146| EMPHASIZED_DARK | 1 | Emphasized, dark color.| 147| NORMAL_LIGHT | 2 | Normal, light color.| 148| NORMAL_DARK | 3 | Normal, dark color.| 149| CUSTOM | 4 | Custom style.| 150 151 152## ArcButtonStatus 153 154Enumerates the states that can be set for **ArcButton**. 155 156**Atomic service API**: This API can be used in atomic services since API version 18. 157 158**System capability**: SystemCapability.ArkUI.ArkUI.Circle 159 160| Name | Value | Description | 161| -------- | ---- | ---------- | 162| NORMAL | 0 | Normal state.| 163| PRESSED | 1 | Pressed state.| 164| DISABLED | 2 | Disabled state.| 165 166 167## Example 168 169This example shows the usage of **ArcButton**. 170 171**topOptions** defines an upper arc button with the button text "ButtonTop," a font size of 15 fp, and shadow enabled, in the normal state with a light-color emphasized style. 172 173**bottomOptions** defines a bottom arc button with the button text "ButtonBottom," a font size of 15 fp, shadow enabled, in a light-color emphasized style, with a click event set for the button. 174 175```ts 176// xxx.ets 177import { 178 ColorMetrics, 179 LengthMetrics, 180 LengthUnit, 181 ArcButton, 182 ArcButtonOptions, 183 ArcButtonStatus, 184 ArcButtonStyleMode, 185 ArcButtonTypeMode, 186} from '@kit.ArkUI'; 187 188@Entry 189@ComponentV2 190struct Index { 191 @Local topOptions: ArcButtonOptions = new ArcButtonOptions({}) 192 @Local bottomOptions: ArcButtonOptions = new ArcButtonOptions({}) 193 194 aboutToAppear() { 195 this.topOptions = new ArcButtonOptions({ 196 label: 'ButtonTop', 197 status: ArcButtonStatus.NORMAL, 198 position: ArcButtonPosition.TOP_EDGE, 199 styleMode: ArcButtonStyleMode.EMPHASIZED_LIGHT, 200 fontSize: new LengthMetrics(15, LengthUnit.FP), 201 shadowEnabled: true 202 }) 203 204 this.bottomOptions = new ArcButtonOptions({ 205 label: 'ButtonBottom', 206 styleMode: ArcButtonStyleMode.EMPHASIZED_LIGHT, 207 fontSize: new LengthMetrics(15, LengthUnit.FP), 208 shadowEnabled: true, 209 onClick: () => { 210 console.info('click from ArcButton.') 211 } 212 }) 213 } 214 215 build() { 216 Stack() { 217 Stack() { 218 Circle({ width: 233, height: 233 }) 219 .strokeWidth(0.1) 220 .fill(Color.White) 221 222 Column() { 223 ArcButton({ options: this.topOptions }) 224 Blank() 225 ArcButton({ options: this.bottomOptions }) 226 227 }.width('100%') 228 .height('100%') 229 }.width(233) 230 .height(233) 231 }.width('100%') 232 .height('100%') 233 .alignContent(Alignment.Center) 234 .backgroundColor(Color.Gray) 235 } 236} 237 238``` 239 240 241
