SideBar 侧边栏

代码演示

锚点用法

切页用法

带图标侧边导航

自定义样式

名称类型默认值描述必传
valueString / Number-选项值。支持语法糖 v-modelv-model:valueN
defaultValueString / Number-选项值。非受控属性N
onChangeFunctionTS 类型:(value: number \| string) => void
选项值发生变化时触发
N
onClickFunctionTS 类型:(value: number \| string, label: string) => void
点击选项时触发
N
名称参数描述
change(value: number \| string)选项值发生变化时触发
click(value: number \| string, label: string)点击选项时触发

SideBarItem Props

名称类型默认值描述必传
badgePropsObject-透传至 Badge 组件。TS 类型:BadgePropsBadge API Documents详细类型定义N
disabledBooleanfalse是否禁用N
iconSlot / Function-图标。TS 类型:TNode通用类型定义N
labelString-展示的标签N
valueString / Number-当前选项的值N

CSS Variables

组件提供了下列 CSS 变量,可用于自定义样式。

名称默认值描述
--td-side-bar-active-color@brand-color-
--td-side-bar-bg-color@bg-color-secondarycontainer-
--td-side-bar-bg-color@bg-color-secondarycontainer-
--td-side-bar-border-radius9px-
--td-side-bar-color@font-gray-1-
--td-side-bar-disabled-color@font-gray-4-
--td-side-bar-font-size16px-
--td-side-bar-height100%-
--td-side-bar-icon-size20px-
--td-side-bar-item-height56px-
--td-side-bar-item-line-height24px-
--td-side-bar-width103px-

何时使用

当内容项数量较多,需要用户根据品类快速选择到目标内容项时使用。

组件搭配使用

侧边栏与徽标组合使用,用于展示品类的状态信息或营销情况。

正确/慎用示例

建议文本简明扼要,若文本过长建议进行换行处理,尽量避免将文本进行截断。

不建议仅用图标、emoji作为品类选项,避免表意不清晰。

相似组件

组件名何时使用
标签栏目标模块/视图需要从应用的任何地方直接进行访问时使用
选项卡当内容/数据需要一定的分类纬度进行区分,便于用户快速作出选择并切换时可以使用。