侧边栏 Sidebar

垂直展示的导航栏，用于在不同的内容区域之间进行切换

使用

API

用法示例

基础用法

<ti-sidebar active-index="1">
  <ti-sidebar-item label="侧边导航" badge="1"></ti-sidebar-item>
  <ti-sidebar-item label="IP联名款"></ti-sidebar-item>
  <ti-sidebar-item label="精选系列" disabled></ti-sidebar-item>
</ti-sidebar>

ti-sidebar API

属性 Properties

名称	类型	必填	默认值	说明	备注
active-index	number	否	0	选中项的索引	-
ext-style	string | Record<string, string>	否	-	根节点样式	-

事件 Events

名称	参数列表	描述	备注
onchange	(e: Event) => void	切换菜单时触发, 返回激活项索引	-
onscrolltoupper	(e: Event<{ direction: 'top' }>) => void	滚动到顶部时触发	-
onscrolltolower	(e: Event<{ direction: 'bottom' }>) => void	滚动到底部时触发	-
onscroll	(e: Event) => void	滚动时触发	-

插槽 Slots

名称	说明	备注
default	默认插槽	-

外部样式类 External Classes

名称	说明	备注
ext-class	ti-sidebar节点样式类	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--sidebar-bg-color	#f5f5f5	侧边栏背景色	-

ti-sidebar-item API

属性 Properties

名称	类型	必填	默认值	说明	备注
label	string	否	-	每项内容	-
disabled	boolean	否	false	是否禁用	-
badge	string	否	-	徽标内容	-
dot	boolean	否	-	圆点徽标	-
ext-style	string | Record<string, string>	否	-	根节点样式	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--sidebar-text-color	theme.color.gray.texticon.550	侧边栏每项文字颜色	-
--sidebar-line-height	theme.lineHeight.multiline.t3	侧边栏每项文字行高	-
--sidebar-font-weight	theme.fontWeight.regular	侧边栏每项文字字重	-
--sidebar-font-size	theme.fontSize.t5	侧边栏每项文字字号	-
--sidebar-radius	theme.borderRadius.r3	侧边栏每项过渡圆角	-
--sidebar-bg-color	theme.color.gray.background.40	未选中的背景颜色	-
--sidebar-active-bg-color	theme.color.gray.background.default	侧边栏激活项背景颜色	-
--sidebar-active-font-weight	theme.fontWeight.semibold	文字字重（选中）	-
--sidebar-active-text-color	theme.color.brand.1000	侧边栏激活项文字颜色，默认跟随主题色
--sidebar-disabled-text-color	theme.color.gray.texticon.250	侧边栏禁用项文字颜色	-
--sidebar-padding	上、右、下、左内边距为：theme.spacing.vertical.v9 theme.spacing.horizontal.h6 theme.spacing.vertical.v9 theme.spacing.horizontal.h7	侧边栏内边距	-