# SideNavBar 侧边栏导航
### 介绍
用于内容选择和切换
### 安装
``` javascript
import { createApp } from 'vue';
// vue
import { SideNavBar, SubSideNavBar, SideNavBarItem } from '@nutui/nutui';
// taro
import { SideNavBar, SubSideNavBar, SideNavBarItem } from '@nutui/nutui-taro';
const app = createApp();
app.use(SideNavBar).use(SubSideNavBar).use(SideNavBarItem);
```
### 基本用法
``` html
```
``` ts
setup() {
const state = reactive({
show1: false,
width: '80%',
height: '100%',
});
const handleClick1 = () => {
state.show1 = true;
};
return {
...toRefs(state),
handleClick1
};
}
```
### 嵌套（建议最多三层）
> 小程序暂不支持异步加载
``` html
```
``` ts
setup() {
const state = reactive({
show3: false,
width: '80%',
height: '100%',
navs: [] as any[]
});
const handleClick3 = () => {
state.show3 = true;
setTimeout(() => {
state.navs = [
{
id: 16,
name: '异步abc16',
arr: [{ pid: 16, id: 17, name: 'abc16-id17' }]
},
{
id: 17,
name: '异步abc17',
arr: [{ pid: 17, id: 18, name: 'abc17-id18' }]
}
];
}, 2000);
};
const handleClick4 = (msg: string) => {
Toast.text(msg)
}
return {
...toRefs(state),
handleClick3,
handleClick4
};
}
```
## API
### SideNavBar
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|----------------------------------------------------------------|---------|------|
| offset | 导航缩进宽度 | Number、String | `15`
### SubSideNavBar
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|----------------------------------------------------------------|---------|------|
| title | 导航标题 | String | ``
| ikey | 导航唯一标识 | String、Number | ``
| open | 导航是否默认展开 | Boolean | `true`
### SideNavBarItem
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|----------------------------------------------------------------|---------|------|
| title | 导航标题 | String | `15`
| ikey | 导航唯一标识 | String、Number | ``
### SubSideNavBar Event
| 名称 | 说明 | 回调参数 |
|-------|----------|-------------|
| title-click | 导航点击 | - |
### SideNavBarItem Event
| 名称 | 说明 | 回调参数 |
|-------|----------|-------------|
| click | 导航点击 | - |