Scroll Area 滚动区域

原生滚动，带跟随主题的细滚动条（border Token，6vp）。

基础用法

SScrollArea({ maxScrollHeight: 288, bordered: true }) {
  Column() {
    Text('Tags')
    ForEach(this.tags, (tag: string) => {
      Text(tag)
      Divider()
    }, (tag: string) => tag)
  }.padding(16)
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

横向

SScrollArea({ orientation: 'horizontal', bordered: true }) {
  Row({ space: 16 }) { ... }.padding(16)
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SScrollArea

shadcn-vue 的 ScrollArea：原生滚动，配以细的、主题色的滚动条（bg-border，6vp）。

区域会占据所获得的宽度；其高度随内容变化，最高为 maxScrollHeight（或父容器的约束）。若要固定高度，请将其包裹在一个指定尺寸的容器中。

属性	类型	默认值	说明
orientation	ScrollAreaOrientation ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both'	'vertical'
maxScrollHeight	number | undefined	undefined	内容开始滚动前的最大高度，单位 vp（垂直 / 双向）
bordered	boolean	false	为区域绘制 rounded-md border 边框（shadcn 示例中常见）

插槽: 子组件（尾随闭包）