更新记录
1.0.4(2024-08-06)
下载此版本
修改文档
1.0.3(2024-07-30)
下载此版本
适配r-config-provider
1.0.2(2024-07-26)
下载此版本
更新文档
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
r-sidebar-item
r-sidebar-item
侧边导航,垂直展示的导航栏,用于在不同的内容区域之间进行切换。该组件为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
名称 |
说明 |
类型 |
默认值 |
可选值 |
value |
当前导航项的索引 |
Number|String |
0 |
|
themeName |
主题名称 |
String |
default |
|
SidebarItem Props
名称 |
说明 |
类型 |
默认值 |
可选值 |
title |
内容 |
String |
- |
|
dot |
是否显示图标右上角小红点 |
Boolean |
false |
|
badge |
图标右上角徽标的内容 |
String|Number |
- |
|
badgeColor |
徽标背景颜色 |
String |
#ee0a24 |
|
max |
徽标最大值,超过最大值会显示 {max}+,仅当 content 为数字时有效 |
String | Number |
- |
|
offset |
设置徽标的偏移量,数组的两项分别对应水平向右和垂直向下方向的偏移量,默认单位为 px |
Array |
- |
|
showZero |
当 徽标值为数字 0 或字符串 '0' 时,是否展示徽标 |
Boolean |
true |
|
position |
徽标位置 |
String |
top-right |
top-left bottom-left bottom-right |
disabled |
是否禁用该项 |
Boolean |
false |
|
themeName |
主题名称 |
String |
default |
|
Sidebar Events
名称 |
说明 |
回调参数 |
change |
切换导航项后触发 |
index |
update:value |
切换导航项时触发 |
index |
SidebarItem Events
名称 |
说明 |
回调参数 |
click |
点击时触发 |
index |
SidebarItem Slots
更多组件,请前往rainui