侧边栏 Sidebar

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

使用

API

安装使用

import { TiSidebar, TiSidebarItem } from '@titian-design/mobile-vue'

用法示例

基本使用

codesanbox

copy

code

<template>
  <TiSidebar :active-index="1">
    <TiSidebarItem label="侧边导航" badge="1" />
    <TiSidebarItem label="IP联名款" />
    <TiSidebarItem label="精选系列" disabled />
  </TiSidebar>
</template>

<script lang="ts" setup>
import { TiSidebar, TiSidebarItem } from 'titian-h5-vue';
</script>

TiSidebar API

属性 Properties

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

事件 Events

名称	参数列表	描述	备注
change	(e: CustomEvent<number>) => void	切换菜单时触发, 返回激活项索引	-
scrolltoupper	(e: CustomEvent<{ direction: 'top' }>) => void	滚动到顶部时触发	-
scrolltolower	(e: CustomEvent<{ direction: 'bottom' }>) => void	滚动到底部时触发	-
ti-scroll	(e: CustomEvent) => void	滚动时触发	-

插槽 Slots

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

外部样式类 External Classes

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

CSS 变量 CSS Variable

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

TiSidebarItem 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	侧边栏内边距	-