TMSUI

# Sidebar 侧边导航

# 使用指南

# 一般用法

Component({
  data: {
    activeIndex:0,
    listData:[
      {
        name: '早餐',
      }, {
        name: '午餐',
      }, {
        name: '晚餐',
      }, {
        name: '宵夜',
      }],
  },

  onChange(event) {
    this.setData({
      activeIndex: event.detail.index,
    });
  },
});

<tms-sidebar active-index="{{activeIndex}}" bind:change="onChange">
    <tms-sidebar-item wx:for="{{listData}}" wx:key="index">
        {{item.name}}
    </tms-sidebar-item>
</tms-sidebar>

# 自定义样式

<tms-sidebar active-index="{{activeIndex}}" id="1" bind:change="onChange">
    <tms-sidebar-item wx:for="{{listData}}" wx:key="index" custom-style="{{item.customStyle}}">
        {{item.name}}
    </tms-sidebar-item>
</tms-sidebar>

# API

# tms-sidebar组件上的api列表

参数 说明 类型 可选值 默认值
active-index 当前选中元素数组下标 Number — 0
contain-style 容器根节点样式 String — —
control 受控组件，外部控制选中元素 Boolean — true

# tms-sidebar-item组件上的api列表

参数 说明 类型 可选值 默认值
disable 是否禁用，禁用时点击无反馈 Boolean — false
custom-style 自定义元素根节点样式 String — —
badge 徽标内容 String — —
badge-style 自定义徽标样式 String — —

# EVENTS

事件名 说明 参数
bind:change 切换选中项时触发 —

# CSS变量

// 容器宽度
--sidebar-container-width: 200rpx;
// 容器高度
--sidebar-container-height: 100%;
// 成员项背景色
--sidebar-item-background: none;
// 选中项背景色
--sidebar-item-selected-background: #F7F7F7;
// 成员项最低高度
--sidebar-item-min-height: 60rpx;
// 成员项容器padding
--sidebar-item-padding: 20rpx 20rpx;
// 禁用状态透明度
--sidebar-item-disable-opacity: .5;
// 选中状态左侧标签背景色
--sidebar-item-selected-tag-background: #ee0a24;

# FAQ

← Switch 按钮 →