HIPS-UNI-UI

# SideBar 侧边栏

# 使用指南

import SideBar from '@hips/uni-ui/lib/side-bar';
import SideBarItem from '@hips/uni-ui/lib/side-bar-item';

export default {
  components: {
    'hips-side-bar': SideBar,
    'hips-side-bar-item': SideBarItem,
  },
};
1
2
3
4
5
6
7
8
9

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-side-bar v-model="sideBar" @change="handleChange">
  <hips-side-bar-item text="标签名称1" />
  <hips-side-bar-item text="标签名称2" />
  <hips-side-bar-item text="标签名称3" />
</hips-side-bar>
1
2
3
4
5
export default {
  data() {
    return {
      sideBar: 0,
    };
  },
  methods: {
    handleChange(index) {
      console.log('select index = ', index);
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

# 设定选中文字

<hips-side-bar v-model="sideBar">
  <hips-side-bar-item text="标签名称1" active-text="标签1" />
  <hips-side-bar-item text="标签名称2" active-text="标签2" />
  <hips-side-bar-item text="标签名称3" active-text="标签3" />
</hips-side-bar>
1
2
3
4
5

# 添加图标或者图片

<hips-side-bar v-model="sideBar">
  <hips-side-bar-item text="标签名称1" icon="question" />
  <hips-side-bar-item text="标签名称2" icon="screen" />
  <hips-side-bar-item
    text="标签名称3"
    :image="ImageNormal"
    :active-image="ImagePress"
  />
</hips-side-bar>
1
2
3
4
5
6
7
8
9

# 添加提示

<hips-side-bar v-model="sideBar">
  <hips-side-bar-item text="标签名称1" dot />
  <hips-side-bar-item text="标签名称2" :badge="10" />
  <hips-side-bar-item text="标签名称3" :badge="100" :max-badge="99" />
</hips-side-bar>
1
2
3
4
5

# 设定宽度

<hips-side-bar v-model="sideBar" :width="280">
  <hips-side-bar-item text="标签名称1" dot />
  <hips-side-bar-item text="标签名称2" :badge="10" />
  <hips-side-bar-item text="标签名称3" :badge="100" :max-badge="99" />
</hips-side-bar>
1
2
3
4
5

# 设定选中线条颜色

<hips-side-bar v-model="sideBar" active-color="red">
  <hips-side-bar-item text="标签名称1" />
  <hips-side-bar-item text="标签名称2" />
  <hips-side-bar-item text="标签名称3" />
</hips-side-bar>
1
2
3
4
5

# APIs

参数 说明 类型 默认值
value 使用 v-model 绑定 Number -1
width 宽度 String | Number 240
active-color 选中状态下线条颜色 String #1F8CEB
animated 是否开启线条动画 Boolean false
duration 线条动画时长 Number 300

# SideBarItem

参数 说明 类型 默认值
text 标题 String -
active-text 选中状态标题 String -
icon 图标 String -
active-icon 选中状态图标 String -
image 图片 String -
active-image 选中状态图片 String -
badge 徽章数值 String | Number -
dot 徽章使用点显示 Boolean false
max-badge 徽章最大数值 String | Number 99

# Events

名称 说明 参数
change sidebaritem 点击触发 index

# 样式变量

变量名 说明 默认值
side-bar-border-color 边框颜色 #eeeeee
side-bar-line-width 选择线条宽度 4rpx
side-bar-line-height 选择线条高度 40rpx
side-bar-item-height item 高度 100rpx
side-bar-item-text-font-size item 内容文字大小 28rpx
side-bar-item-text-active-font-size item 选中时文字大小 36rpx
side-bar-item-image-size item 左侧图片尺寸 44rpx
side-bar-item-bg-color item 背景颜色 white
side-bar-item-color item 文字颜色 #4d4d4d

注意

Icon 图标