Tabs 标签页

一组分层的内容区（标签面板），每次只显示其中一个。

基础用法

STabs({ defaultValue: 'account' }) {
  STabsList() {
    STabsTrigger({ value: 'account', text: 'Account' })
    STabsTrigger({ value: 'password', text: 'Password' })
  }
  STabsContent({ value: 'account' }) {
    Text('Make changes to your account here.')
  }
  STabsContent({ value: 'password' }) {
    Text('Change your password here.')
  }
}

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

受控

像 v-model 一样用 !! 绑定当前标签。支持图标与禁用的触发器。

@Local tab: string = 'music';

STabs({ value: this.tab!! }) {
  STabsList() {
    STabsTrigger({ value: 'music', icon: 'music', text: 'Music' })
    STabsTrigger({ value: 'podcasts', icon: 'mic', text: 'Podcasts' })
    STabsTrigger({ value: 'live', text: 'Live', disabled: true })
  }
  STabsContent({ value: 'music' }) { ... }
  STabsContent({ value: 'podcasts' }) { ... }
}
SButton({ text: 'Show podcasts' }).onClick(() => this.tab = 'podcasts')

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

溢出

没有断点：触发器总宽度超过列表可用空间时，列表横向滚动。

// the list scrolls horizontally when it does not fit
Column() {
  STabs({ defaultValue: 'overview' }) {
    STabsList() {
      STabsTrigger({ value: 'overview', text: 'Overview' })
      STabsTrigger({ value: 'analytics', text: 'Analytics' })
      STabsTrigger({ value: 'reports', text: 'Reports' })
      STabsTrigger({ value: 'notifications', text: 'Notifications' })
      STabsTrigger({ value: 'settings', text: 'Settings' })
    }
  }
}
.constraintSize({ maxWidth: 280 })

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

API

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

STabs

shadcn-vue 的 Tabs：一组分层的内容区域，同一时间只显示一个。

属性	类型	默认值	说明
value!!	string | undefined	undefined	受控的当前标签页（配合 !! 使用）。留空则为非受控。
defaultValue	string	''

事件	类型	默认值	说明
onValueChange	(value: string) => void	() => { }

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

STabsList

标签栏：bg-muted text-muted-foreground inline-flex h-9 w-fit rounded-lg p-[3px]。响应式：当触发器的总宽度超过标签栏可用空间时，标签栏会横向滚动。

属性	类型	默认值	说明
tokens	TabsTokens	{}	实例级令牌覆盖（实例 → 主题 --tabs-* → 配方），参见 {@link TabsTokens}。

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

STabsTrigger

标签按钮：rounded-md px-2 py-1 text-sm font-medium；激活时为 bg-background shadow-sm（深色模式：bg-input/30 border-input）。点按即激活对应的标签页；无需在触发器本身上使用原生的 .onClick()（请在 STabs 上使用 onValueChange）。

属性	类型	默认值	说明
value	string	''
text	ResourceStr | undefined	undefined
icon	string | undefined	undefined	前导 lucide 图标名称。
disabled	boolean	false

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

STabsContent

当其 value 为当前激活标签时显示的面板（淡入）。

属性	类型	默认值	说明
value	string	''

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