Press UI

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

# 引入

import PressSidebar from 'press-ui/press-sidebar/press-sidebar';
import PressSidebarItem from 'press-ui/press-sidebar-item/press-sidebar-item';

export default {
  components: {
    PressSidebar,
    PressSidebarItem,
  }
}

# 代码演示

# 基础用法

通过在press-sidebar上设置activeKey属性来控制选中项。

<press-sidebar :active-key="activeKey">
  <press-sidebar-item title="标签名" />
  <press-sidebar-item title="标签名" />
  <press-sidebar-item title="标签名" />
</press-sidebar>

export default {
  data() {
    return {
      activeKey: 0,
    }
  },
};

# 徽标提示

设置dot属性后，会在右上角展示一个小红点。设置badge属性后，会在右上角展示相应的徽标。

<press-sidebar :active-key="activeKe">
  <press-sidebar-item title="标签名" dot />
  <press-sidebar-item title="标签名" badge="5" />
  <press-sidebar-item title="标签名" badge="99+" />
</press-sidebar>

# 禁用选项

通过disabled属性禁用选项。

<press-sidebar :active-key="activeKe">
  <press-sidebar-item title="标签名" />
  <press-sidebar-item title="标签名" disabled />
  <press-sidebar-item title="标签名" />
</press-sidebar>

# 监听切换事件

设置change方法来监听切换导航项时的事件。

<press-sidebar :active-key="activeKe" @change="onChange">
  <press-sidebar-item title="标签名 1" />
  <press-sidebar-item title="标签名 2" />
  <press-sidebar-item title="标签名 3" />
</press-sidebar>

export default {
  data() {
    return {
      activeKey: 0,
    }
  },
  methods: {
    onChange(value) {
      console.log('value', value);
    },
  }
};

# API

参数 说明 类型 默认值
activeKey 选中项的索引 string | number 0
事件名 说明 参数
change 切换徽章时触发 当前选中徽章的索引

# SidebarItem Props

参数 说明 类型 默认值
title 内容 string ''
dot 是否显示右上角小红点 boolean false
info 图标右上角徽标的内容（已废弃，请使用 badge 属性） string | number ''
badge 图标右上角徽标的内容 string | number ''
disabled 是否禁用该项 boolean false

# SidebarItem Slot

名称 说明
title 自定义标题栏，如果设置了title属性则不生效

# SidebarItem Event

事件名 说明 参数
click 点击徽章时触发 event.detail 为当前徽章的索引

# 在线调试

横屏

← Tab →