1# ArcButton 2 3The **ArcButton** component represents an arc button specifically designed for circular screens on wearables. It offers various button styles, such as emphasized, normal, and warning. 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```ts 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### Properties 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>This property takes effect only when **ArcButtonStyleMode** is set to **CUSTOM**.<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>This property takes effect only when **ArcButtonStyleMode** is set to **CUSTOM**.<br>Default value: **Color.White** | 71| pressedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | Yes | Font color of the arc button when pressed.<br>This property takes effect only when **ArcButtonStyleMode** is set to **CUSTOM**.<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) |No | Type of the arc button.<br>Default value: **ArcButtonPosition.BOTTOM_EDGE**| 105| styleMode | [ArcButtonStyleMode](#arcbuttonstylemode) | No | Style mode for the arc button.<br>Default value: **ArcButtonStyleMode.EMPHASIZED_LIGHT**| 106| status | [ArcButtonStatus](#arcbuttonstatus) |No | Status of the arc button.<br>Default value: **ArcButtonStatus.NORMAL** | 107| label | [ResourceStr](ts-types.md#resourcestr) |No| Text displayed on the arc button. | 108| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No | Background blur style of the arc button.<br>Default value: **BlurStyle.NONE** | 109| backgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No| Background color of the arc button.<br>This property takes effect only when **ArcButtonStyleMode** is set to **CUSTOM**.<br>Default value: **Color.Black** | 110| shadowColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | Shadow color of the arc button.<br>Default value: **Color.Black** | 111| shadowEnabled | boolean | No| 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) | No | Font size of the arc button.<br>Default value: **19fp** | 113| fontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) |No | Font color of the arc button.<br>This property takes effect only when **ArcButtonStyleMode** is set to **CUSTOM**.<br>Default value: **Color.White** | 114| pressedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | No | Font color of the arc button when pressed.<br>This property takes effect only when **ArcButtonStyleMode** is set to **CUSTOM**.<br>Default value: **Color.White** | 115| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style of the arc button.<br>Default value: **FontStyle.Normal** | 116| fontFamily | string \| [Resource](ts-types.md#resource) |No | Font family of the arc button. | 117| fontMargin | [LocalizedMargin](ts-types.md#localizedmargin12) | No | 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 button color and font color.| 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 LengthMetrics, 179 LengthUnit, 180 ArcButton, 181 ArcButtonOptions, 182 ArcButtonStatus, 183 ArcButtonStyleMode, 184 ArcButtonPosition, 185} from '@kit.ArkUI'; 186 187@Entry 188@ComponentV2 189struct Index { 190 @Local topOptions: ArcButtonOptions = new ArcButtonOptions({}); 191 @Local bottomOptions: ArcButtonOptions = new ArcButtonOptions({}); 192 193 aboutToAppear() { 194 this.topOptions = new ArcButtonOptions({ 195 label: 'ButtonTop', 196 status: ArcButtonStatus.NORMAL, 197 position: ArcButtonPosition.TOP_EDGE, 198 styleMode: ArcButtonStyleMode.EMPHASIZED_LIGHT, 199 fontSize: new LengthMetrics(15, LengthUnit.FP), 200 shadowEnabled: true 201 }) 202 203 this.bottomOptions = new ArcButtonOptions({ 204 label: 'ButtonBottom', 205 styleMode: ArcButtonStyleMode.EMPHASIZED_LIGHT, 206 fontSize: new LengthMetrics(15, LengthUnit.FP), 207 shadowEnabled: true, 208 onClick: () => { 209 console.info('click from ArcButton.'); 210 } 211 }) 212 } 213 214 build() { 215 Stack() { 216 Stack() { 217 Circle({ width: 233, height: 233 }) 218 .strokeWidth(0.1) 219 .fill(Color.White) 220 221 Column() { 222 ArcButton({ options: this.topOptions }) 223 Blank() 224 ArcButton({ options: this.bottomOptions }) 225 226 }.width('100%') 227 .height('100%') 228 }.width(233) 229 .height(233) 230 }.width('100%') 231 .height('100%') 232 .alignContent(Alignment.Center) 233 .backgroundColor(Color.Gray) 234 } 235} 236 237``` 238 239 240
