# 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
<nut-cell @click="handleClick1">
  <span><label>右侧</label></span>
</nut-cell>
<nut-popup position="right" v-model:visible="show1" :style="{ width, height }">
  <nut-sidenavbar>
    <nut-subsidenavbar title="智能城市AI" ikey="6">
      <nut-subsidenavbar title="人体识别1" ikey="9">
        <nut-sidenavbaritem ikey="10" title="人体检测1"></nut-sidenavbaritem>
        <nut-sidenavbaritem ikey="11" title="细粒度人像分割1"></nut-sidenavbaritem>
      </nut-subsidenavbar>
      <nut-subsidenavbar title="人体识别2" ikey="12">
        <nut-sidenavbaritem ikey="13" title="人体检测2"></nut-sidenavbaritem>
        <nut-sidenavbaritem ikey="14" title="细粒度人像分割2"></nut-sidenavbaritem>
      </nut-subsidenavbar>
    </nut-subsidenavbar>
  </nut-sidenavbar>
</nut-popup>
```
``` ts
setup() {
  const state = reactive({
    show1: false,
    width: '80%',
    height: '100%',
  });

  const handleClick1 = () => {
    state.show1 = true;
  };

  return {
    ...toRefs(state),
    handleClick1
  };
}
```

### 嵌套（建议最多三层）
> 小程序暂不支持异步加载

``` html
<nut-cell @click="handleClick3">
  <span><label>显示</label></span>
</nut-cell>
<nut-popup position="right" v-model:visible="show3" :style="{ width, height }">
  <nut-sidenavbar :show="show3">
    <nut-sidenavbaritem ikey="1" title="人脸识别" @click="handleClick4('人脸识别')"></nut-sidenavbaritem>
    <nut-sidenavbaritem ikey="2" title="云存自然语言处理"></nut-sidenavbaritem>
    <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
      <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
      <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
    </nut-subsidenavbar>
    <nut-subsidenavbar title="智能城市AI" ikey="6">
      <nut-sidenavbaritem ikey="7" title="企业风险预警模型"></nut-sidenavbaritem>
      <nut-sidenavbaritem ikey="8" title="水质量检测"></nut-sidenavbaritem>
      <nut-subsidenavbar title="人体识别" ikey="9">
        <nut-sidenavbaritem ikey="10" title="人体检测"></nut-sidenavbaritem>
        <nut-sidenavbaritem ikey="11" title="细粒度人像分割"></nut-sidenavbaritem>
      </nut-subsidenavbar>
    </nut-subsidenavbar>
    <nut-subsidenavbar title="自然语言处理" ikey="12">
      <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
      <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
    </nut-subsidenavbar>
    <nut-subsidenavbar v-for="item in navs" :key="item.id" :title="item.name" :ikey="item.id">
      <nut-sidenavbaritem v-for="citem in item.arr" :key="citem.id" :title="citem.name"></nut-sidenavbaritem>
    </nut-subsidenavbar>
  </nut-sidenavbar>
</nut-popup>
```
``` 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 | 导航点击 | - |


