1# ArcScrollBar 2 3The **ArcScrollBar** component is designed to be used together with scrollable components such as [ArcList](ts-container-arclist.md), [List](ts-container-list.md), [Grid](ts-container-grid.md), [Scroll](ts-container-scroll.md), and [WaterFlow](ts-container-waterflow.md) to provide a circular scrollbar. 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> - If no width or height is set for the **ArcScrollBar** component, it will inherit the size of its parent component. 9 10 11## Child Components 12 13Not supported 14 15## APIs 16 17ArcScrollBar(options: ArcScrollBarOptions) 18 19Creates an instance of the **ArcScrollBar** component. 20 21**Atomic service API**: This API can be used in atomic services since API version 18. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Circle 24 25**Parameters** 26 27| Name| Type| Mandatory| Description| 28| -------- | -------- | -------- | -------- | 29| options | [ArcScrollBarOptions](#arcscrollbaroptions)| Yes| Parameters of the **ArcScrollBar** component.| 30 31## ArcScrollBarOptions 32 33Represents the parameters used to construct an **ArcScrollBar** component. 34 35**Atomic service API**: This API can be used in atomic services since API version 18. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Circle 38 39| Name| Type| Mandatory| Description| 40| -------- | -------- | -------- | -------- | 41| scroller | [Scroller](ts-container-scroll.md#scroller) | Yes| Scroller, which can be bound to scrollable components for scrolling control.| 42| state | [BarState](ts-appendix-enums.md#barstate) | No| State of the scrollbar.<br>Default value: **BarState.Auto**| 43 44> **NOTE** 45> 46> **ArcScrollBar** must be bound to a scrollable component through **scroller** to achieve synchronization. Only a one-to-one binding is allowed between **ArcScrollBar** and a scrollable component. 47 48## Example 49 50This example demonstrates how to use **ArcScrollBar** with a **Scroll** component to create an external circular scrollbar. 51 52```ts 53import { ArcScrollBar } from '@kit.ArkUI'; 54 55@Entry 56@Component 57struct ArcScrollBarExample { 58 private scroller: Scroller = new Scroller() 59 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 60 61 build() { 62 Column() { 63 Stack({ alignContent: Alignment.Center }) { 64 Scroll(this.scroller) { 65 Flex({ direction: FlexDirection.Column }) { 66 ForEach(this.arr, (item: number) => { 67 Row() { 68 Text(item.toString()) 69 .width('80%') 70 .height(60) 71 .backgroundColor('#3366CC') 72 .borderRadius(15) 73 .fontSize(16) 74 .textAlign(TextAlign.Center) 75 .margin({ top: 5 }) 76 } 77 }, (item: number) => item.toString()) 78 }.margin({ right: 15 }) 79 } 80 .width('90%') 81 .scrollBar(BarState.Off) 82 .scrollable(ScrollDirection.Vertical) 83 .edgeEffect(EdgeEffect.Spring) 84 85 ArcScrollBar({ scroller: this.scroller, state: BarState.Auto }) 86 } 87 .width('100%') 88 .height('100%') 89 } 90 .justifyContent(FlexAlign.Center) 91 .width('100%') 92 .height('100%') 93 .clip(new Circle({ width: '100%', height: '100%' })) 94 } 95} 96``` 97 98 99
