更新记录

1.0.3（2024-08-06） 下载此版本

修改文档

1.0.2（2024-07-30） 下载此版本

适配r-config-provider

1.0.1（2024-07-23） 下载此版本

修复控制台警告

平台兼容性

r-sidebar

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

示例

<template>
  <r-config-provider>
    <view style="padding: 20px; background-color: #f8f7f6">
      <r-divider content-position="left">基本使用</r-divider>
      <r-sidebar v-model:value="active">
        <r-sidebar-item title="标签名称" />
        <r-sidebar-item title="标签名称" />
        <r-sidebar-item title="标签名称" />
      </r-sidebar>

      <r-divider content-position="left">徽标提示</r-divider>

      <r-sidebar v-model:value="active">
        <r-sidebar-item title="标签名称" dot />
        <r-sidebar-item title="标签名称" badge="5" />
        <r-sidebar-item title="标签名称" />
      </r-sidebar>

      <r-divider content-position="left">禁用选项</r-divider>
      <r-sidebar v-model:value="active">
        <r-sidebar-item title="标签名称" />
        <r-sidebar-item title="标签名称" disabled />
        <r-sidebar-item title="标签名称" />
      </r-sidebar>

      <r-divider content-position="left">监听切换事件</r-divider>

      <r-sidebar v-model:value="active" @change="onChange">
        <r-sidebar-item title="标签名 1" />
        <r-sidebar-item title="标签名 2" />
        <r-sidebar-item title="标签名 3" />
      </r-sidebar>
    </view>
  </r-config-provider>
</template>

<script setup>
import { ref } from "vue";
const active = ref(0);
const onChange = (index) => {
  console.log(index);
};
</script>

API

Sidebar Props

SidebarItem Props

Sidebar Events

SidebarItem Events

SidebarItem Slots

更多组件，请前往rainui