Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 6e922cb0 编写于 作者: Y yangxiaolu3
浏览文件
操作

feat: first

上级 15fa9f03
隐藏空白更改
内联 并排
Showing with 720 addition and 93 deletion
.github/workflows/sync-desc.yml → .github/workflows/sync-docs.yml
浏览文件 @ 6e922cb0
......@@ -13,13 +13,13 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
# - run: yarn install
# - run: yarn copydocs
- run: yarn install
- run: yarn copydocs
- name : Deploy
uses : JamesIves/github-pages-deploy-action@4.1.7
with :
branch : docs_dev # action 应该部署到的分支。
folder : docs #操作应该部署的文件夹。
folder : site_docs #操作应该部署的文件夹。
repository-name: jdf2e/nutui-docs
token: ${{ secrets.GIT_ACTION }}
target-folder: docs_copy
\ No newline at end of file
target-folder: src/docs_vue
\ No newline at end of file
docs/docs_vue/docs/avatar/doc.md 已删除 100644 → 0
浏览文件 @ 15fa9f03
# Avatar 头像
### 介绍
用来代表用户或事物，支持图片、图标或字符展示。
### 安装
``` javascript
import { createApp } from 'vue';
// vue
import { Avatar,Icon } from '@nutui/nutui';
// taro
import { Avatar,Icon } from '@nutui/nutui-taro';
const app = createApp();
app.use(Avatar);
app.use(Icon);
```
### 基本用法
内置 smal / normal / large 三种尺寸规格
``` html
<nut-avatar size="large" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
<nut-avatar size="normal" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
<nut-avatar size="small" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
```
### 修改形状类型
``` html
<nut-avatar icon="my" shape="square"></nut-avatar>
<nut-avatar icon="my" shape="round"></nut-avatar>
```
### 修改背景色
``` html
<nut-avatar icon="my" bg-color="#FA2C19" />
```
### 修改背景icon
``` html
<nut-avatar icon="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />
```
### 设置头像的文本内容
``` html
<nut-avatar>N</nut-avatar>
```
### Prop
| 字段 | 说明 | 类型 | 默认值 |
|----------|--------------------------------------------------------------------------|--------|--------|
| bg-color | 设置头像背景色 | String | #eee |
| size | 设置头像的大小，提供三种：large/normal/small，支持直接输入数字 | String | normal |
| shape | 设置头像的形状，默认是圆形，可以设置为square方形 | String | round |
| icon | 设置头像的icon图标, 类似Icon组件的name属性，支持名称和链接 | String | '' |
### Events
| 字段 | 说明 | 类型 | 回调参数 |
|----------|----------------------|----------|----------|
| active-avatarror | 点击触发事件 | Function | event |
\ No newline at end of file
jd/copymd.js
浏览文件 @ 6e922cb0
const computerBase = '';
const vueBaseUrl = `${computerBase}..`;
const reactBaseUrl = `${computerBase}nutui-react`;
const vueBaseUrl = `..`;
const targetBaseUrl = 'site_docs';
const fse = require('fs-extra');
const copyFile = (from, to) => {
fse
......@@ -15,21 +14,20 @@ const copyFile = (from, to) => {
const copy = async (fromGit, type) => {
let configPath = `src/config.json`;
let configPkgPath = `package.json`;
let nutuiDocsConfigPath = `docs/docs_${type}/config.json`;
let nutuiDocsConfigPath = `${targetBaseUrl}/docs_${type}/config.json`;
const exists = await fse.pathExists(configPath);
console.log(exists, configPath);
if (exists) {
const fromConfig = await fse.readJson(configPath);
const fromPkgConfig = await fse.readJson(configPkgPath);
const docsConfig = await fse.readJson(nutuiDocsConfigPath);
console.log(docsConfig);
docsConfig.version = fromPkgConfig.version;
docsConfig.nav = fromConfig.nav;
docsConfig.docs = fromConfig.docs;
console.log(fromConfig.docs);
fse
.writeJson(nutuiDocsConfigPath, docsConfig, {
......@@ -43,18 +41,15 @@ const copy = async (fromGit, type) => {
if (item.show) {
let cmpName = item.name.toLowerCase();
let docpath = `src/packages/__VUE/${cmpName}/doc.md`;
if (type == 'react') {
docpath = `${fromGit}/src/packages/${cmpName}/doc.md`;
}
let doctaropath = `src/packages/__VUE/${cmpName}/doc.taro.md`;
fse.readFile(docpath, (err, data) => {
if (!err) {
copyFile(docpath, `docs/docs_${type}/docs/${cmpName}/doc.md`);
copyFile(docpath, `${targetBaseUrl}/docs_${type}/docs/${cmpName}/doc.md`);
}
});
fse.readFile(doctaropath, (err, data) => {
if (!err) {
copyFile(doctaropath, `docs/docs_${type}/docs/${cmpName}/doc.taro.md`);
copyFile(doctaropath, `${targetBaseUrl}/docs_${type}/docs/${cmpName}/doc.taro.md`);
}
});
}
......
docs/docs_vue/config.json → site_docs/docs_vue/config.json
浏览文件 @ 6e922cb0
......@@ -583,6 +583,41 @@
"exportEmpty": true,
"exportEmptyTaro": true,
"author": "haiweilian"
},
{
"version": "3.1.15",
"name": "SideNavBar",
"type": "component",
"cName": "侧边栏导航",
"desc": "垂直展示的导航栏，用于内容选择和切换",
"sort": 14,
"taro": true,
"show": true,
"author": "szg2008"
},
{
"version": "3.1.15",
"name": "SideNavBarItem",
"type": "component",
"cName": "侧边栏导航子组件",
"desc": "",
"sort": 15,
"exportEmpty": true,
"taro": true,
"show": false,
"author": "szg2008"
},
{
"version": "3.1.15",
"name": "SubSideNavBar",
"type": "component",
"cName": "侧边栏导航子组件",
"desc": "",
"sort": 16,
"exportEmpty": true,
"taro": true,
"show": false,
"author": "szg2008"
}
]
},
......
site_docs/docs_vue/docs/avatar/doc.md 0 → 100644
浏览文件 @ 6e922cb0
# Avatar 头像
### 介绍
用来代表用户或事物，支持图片、图标或字符展示。
### 安装
```javascript
import { createApp } from 'vue';
// vue
import { Avatar, Icon } from '@nutui/nutui';
// taro
import { Avatar, Icon } from '@nutui/nutui-taro';
const app = createApp();
app.use(Avatar);
app.use(Icon);
```
### 基本用法
内置 smal / normal / large 三种尺寸规格
:::demo
```html
<template>
<nut-avatar
size="large"
icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
<nut-avatar
size="normal"
icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
<nut-avatar
size="small"
icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
></nut-avatar>
</template>
```
:::
### 修改形状类型
:::demo
```html
<template>
<nut-avatar icon="my" shape="square"></nut-avatar>
<nut-avatar icon="my" shape="round"></nut-avatar>
</template>
```
:::
### 修改背景色
:::demo
```html
<template>
<nut-avatar icon="my" bg-color="#FA2C19" />
</template>
```
:::
### 修改背景 icon
:::demo
```html
<template>
<nut-avatar
icon="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
/>
</template>
```
:::
### 设置头像的文本内容
:::demo
```html
<template>
<nut-avatar>N</nut-avatar>
</template>
```
:::
### Prop
| 字段 | 说明 | 类型 | 默认值 |
| -------- | ---------------------------------------------------------------- | ------ | ------ |
| bg-color | 设置头像背景色 | String | #eee |
| size | 设置头像的大小，提供三种：large/normal/small，支持直接输入数字 | String | normal |
| shape | 设置头像的形状，默认是圆形，可以设置为 square 方形 | String | round |
| icon | 设置头像的 icon 图标, 类似 Icon 组件的 name 属性，支持名称和链接 | String | '' |
### Events
| 字段 | 说明 | 类型 | 回调参数 |
| ---------------- | ------------ | -------- | -------- |
| active-avatarror | 点击触发事件 | Function | event |
docs/docs_vue/docs/button/doc.md → site_docs/docs_vue/docs/button/doc.md
浏览文件 @ 6e922cb0
......@@ -6,7 +6,7 @@
### 安装
``` javascript
```javascript
import { createApp } from 'vue';
// vue
import { Button } from '@nutui/nutui';
......@@ -23,121 +23,177 @@ app.use(Button);
按钮支持 `default`、`primary`、`info`、`warning`、`danger`、`success` 六种类型，默认为 `default`。
:::demo
```html
<nut-button type="primary">主要按钮</nut-button>
<nut-button type="info">信息按钮</nut-button>
<nut-button type="default">默认按钮</nut-button>
<nut-button type="danger">危险按钮</nut-button>
<nut-button type="warning">警告按钮</nut-button>
<nut-button type="success">成功按钮</nut-button>
<template>
<nut-button type="primary">主要按钮</nut-button>
<nut-button type="info">信息按钮</nut-button>
<nut-button type="default">默认按钮</nut-button>
<nut-button type="danger">危险按钮</nut-button>
<nut-button type="warning">警告按钮</nut-button>
<nut-button type="success">成功按钮</nut-button>
</template>
```
:::
### 朴素按钮
通过 `plain` 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
:::demo
```html
<nut-button plain type="primary">朴素按钮</nut-button>
<nut-button plain type="info">朴素按钮</nut-button>
<template>
<nut-button plain type="primary">朴素按钮</nut-button>
<nut-button plain type="info">朴素按钮</nut-button>
</template>
```
:::
### 禁用状态
通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
:::demo
```html
<nut-button disabled type="primary">禁用状态</nut-button>
<nut-button plain disabled type="info">禁用状态</nut-button>
<nut-button plain disabled type="primary">禁用状态</nut-button>
<template>
<nut-button disabled type="primary">禁用状态</nut-button>
<nut-button plain disabled type="info">禁用状态</nut-button>
<nut-button plain disabled type="primary">禁用状态</nut-button>
</template>
```
:::
### 按钮形状
通过 `shape` 属性设置按钮形状，支持圆形、方形按钮，默认为圆形。
:::demo
```html
<nut-button shape="square" type="primary">方形按钮</nut-button>
<nut-button type="info">圆形按钮</nut-button>
<template>
<nut-button shape="square" type="primary">方形按钮</nut-button>
<nut-button type="info">圆形按钮</nut-button>
</template>
```
:::
### 加载状态
```html
<nut-button loading type="info"></nut-button>
<nut-button loading type="warning">加载中...</nut-button>
<nut-button :loading="isLoading" type="success" @click="changeLoading">Click me!</nut-button>
```
``` javascript
// ...
let isLoading = ref(false);
const changeLoading = () => {
isLoading.value = true;
setTimeout(() => {
isLoading.value = false;
}, 3000);
};
:::demo
return {
isLoading,
changeLoading
```html
<template>
<nut-button loading type="info"></nut-button>
<nut-button loading type="warning">加载中...</nut-button>
<nut-button :loading="isLoading" type="success" @click="changeLoading">Click me!</nut-button>
</template>
<script>
import { ref } from 'vue';
export default {
setup(props) {
let isLoading = ref(false);
const changeLoading = () => {
isLoading.value = true;
setTimeout(() => {
isLoading.value = false;
}, 3000);
};
return {
isLoading,
changeLoading
};
}
};
// ...
</script>
```
:::
### 图标按钮
:::demo
```html
<template>
<nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
<nut-button shape="square" type="primary" icon="star">收藏</nut-button>
</template>
```
:::
### 按钮尺寸
支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。
:::demo
```html
<nut-button size="large" type="primary">大号按钮</nut-button>
<nut-button type="primary">普通按钮</nut-button>
<nut-button size="small" type="primary">小型按钮</nut-button>
<nut-button size="mini" type="primary">小型按钮</nut-button>
<template>
<nut-button size="large" type="primary">大号按钮</nut-button>
<nut-button type="primary">普通按钮</nut-button>
<nut-button size="small" type="primary">小型按钮</nut-button>
<nut-button size="mini" type="primary">小型按钮</nut-button>
</template>
```
:::
### 块级元素
按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素，常用来实现通栏按钮。
:::demo
```html
<nut-button block type="primary">块级元素</nut-button>
<template>
<nut-button block type="primary">块级元素</nut-button>
</template>
```
:::
### 自定义颜色
通过 color 属性可以自定义按钮的颜色。
:::demo
```html
<nut-button color="#7232dd">单色按钮</nut-button>
<nut-button color="#7232dd" plain>单色按钮</nut-button>
<nut-button color="linear-gradient(to right, #ff6034, #ee0a24)">
渐变色按钮
</nut-button>
<template>
<nut-button color="#7232dd">单色按钮</nut-button>
<nut-button color="#7232dd" plain>单色按钮</nut-button>
<nut-button color="linear-gradient(to right, #ff6034, #ee0a24)"> 渐变色按钮 </nut-button>
</template>
```
:::
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| type | 类型，可选值为 `primary` `info` `warning` `danger` `success` | String |`default` |
| size | 尺寸，可选值为 `large` `small` `mini` | String | `normal` |
| shape | 形状，可选值为 `square` | String | `round` |
| color | 按钮颜色，支持传入 linear-gradient 渐变色 | String | - |
| plain | 是否为朴素按钮 | Boolean | `false` |
| disabled | 是否禁用按钮 | Boolean | `false` |
| block | 是否为块级元素 | Boolean | `false` |
| icon | 按钮图标，同Icon组件name属性 | String | - |
| loading | 按钮loading状态 | Boolean | `false` |
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ------------------------------------------------------------ | ------- | --------- |
| type | 类型，可选值为 `primary` `info` `warning` `danger` `success` | String | `default` |
| size | 尺寸，可选值为 `large` `small` `mini` | String | `normal` |
| shape | 形状，可选值为 `square` | String | `round` |
| color | 按钮颜色，支持传入 linear-gradient 渐变色 | String | - |
| plain | 是否为朴素按钮 | Boolean | `false` |
| disabled | 是否禁用按钮 | Boolean | `false` |
| block | 是否为块级元素 | Boolean | `false` |
| icon | 按钮图标，同 Icon 组件 name 属性 | String | - |
| loading | 按钮 loading 状态 | Boolean | `false` |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|----------------|--------------|
| 事件名 | 说明 | 回调参数 |
| ------ | -------------- | ----------------- |
| click | 点击按钮时触发 | event: MouseEvent |
docs/docs_vue/docs/cell/doc.md → site_docs/docs_vue/docs/cell/doc.md
浏览文件 @ 6e922cb0
......@@ -6,133 +6,188 @@
### 安装
``` javascript
```javascript
import { createApp } from 'vue';
import { Cell,Icon } from '@nutui/nutui';
import { Cell, Icon } from '@nutui/nutui';
const app = createApp();
app.use(Cell).use(Icon);
```
### 基本用法
``` html
<nut-cell title="我是标题" desc="描述文字"></nut-cell>
<nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
<nut-cell title="点击测试" @click="testClick"></nut-cell>
<nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
```
``` javascript
// ...
import { ref } from 'vue';
import { Toast } from '@nutui/nutui';
export default {
setup() {
:::demo
```html
<template>
<nut-cell title="我是标题" desc="描述文字"></nut-cell>
<nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
<nut-cell title="点击测试" @click="testClick"></nut-cell>
<nut-cell title="圆角设置 0" round-radius="0"></nut-cell>
</template>
<script>
import { ref } from 'vue';
import { Toast } from '@nutui/nutui';
export default {
setup() {
const switchChecked = ref(true);
const testClick = (event) => {
Toast.text('点击事件')
Toast.text('点击事件');
};
return { testClick,switchChecked };
}
}
// ...
return { testClick, switchChecked };
}
};
</script>
```
:::
### 直接使用插槽
``` html
<nut-cell title="我是标题" desc="描述文字">
<div>自定义内容</div>
</nut-cell>
:::demo
```html
<template>
<nut-cell title="我是标题" desc="描述文字">
<div>自定义内容</div>
</nut-cell>
</template>
```
:::
### 链接 | 分组用法
``` html
<nut-cell-group title="链接 | 分组用法" desc="使用 nut-cell-group 支持 title desc slots">
<nut-cell title="链接" is-link></nut-cell>
<nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
<nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
</nut-cell-group>
:::demo
```html
<template>
<nut-cell-group title="链接 | 分组用法" desc="使用 nut-cell-group 支持 title desc slots">
<nut-cell title="链接" is-link></nut-cell>
<nut-cell title="URL 跳转" desc="https://m.jd.com" is-link url="https://m.jd.com"></nut-cell>
<nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
</nut-cell-group>
</template>
```
:::
### 自定义右侧箭头区域
``` html
<nut-cell-group title="自定义右侧箭头区域">
<nut-cell title="Switch">
<template v-slot:link>
<nut-switch v-model="switchChecked" />
</template>
</nut-cell>
</nut-cell-group>
:::demo
```html
<template>
<nut-cell-group title="自定义右侧箭头区域">
<nut-cell title="Switch">
<template v-slot:link>
<nut-switch v-model="switchChecked" />
</template>
</nut-cell>
</nut-cell-group>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
setup() {
const testClick = (event: Event) => {
console.log('点击事件');
};
const switchChecked = ref(true);
return { testClick, switchChecked };
}
};
</script>
```
:::
### 自定义左侧 Icon 区域
``` html
<nut-cell-group title="自定义左侧 Icon 区域">
<nut-cell title="图片">
<template v-slot:icon>
<img class="nut-icon" src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png" />
</template>
</nut-cell>
</nut-cell-group>
:::demo
```html
<template>
<nut-cell-group title="自定义左侧 Icon 区域">
<nut-cell title="图片">
<template v-slot:icon>
<img
class="nut-icon"
src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</template>
</nut-cell>
</nut-cell-group>
</template>
```
:::
### 单元格展示图标
``` html
<nut-cell title="姓名" icon="my" desc="张三"></nut-cell>
:::demo
```html
<template>
<nut-cell title="姓名" icon="my" desc="张三"></nut-cell>
</template>
```
:::
### 只展示 desc ，可通过 desc-text-align 调整内容位置
``` html
<nut-cell desc-text-align="left" desc="张三"></nut-cell>
:::demo
```html
<template>
<nut-cell desc-text-align="left" desc="张三"></nut-cell>
</template>
```
:::
## API
### CellGroup Prop
| 字段 | 说明 | 类型 | 默认值 |
|-------|----------|--------|--------|
| ----- | -------- | ------ | ------ |
| title | 分组标题 | String | - |
| desc | 分组描述 | String | - |
### Cell Prop
| 字段 | 说明 | 类型 | 默认值 |
|------------------------|------------------------------------------------------------------------------------------------|----------------|--------|
| title | 标题名称 | String | - |
| sub-title | 左侧副标题 | String | - |
| desc | 右侧描述 | String | - |
| desc-text-align | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp) | String | right |
| is-link | 是否展示右侧箭头并开启点击反馈 | Boolean | false |
| icon | 左侧 [图标名称](#/icon) 或图片链接 | String | - |
| round-radius | 圆角半径 | Number | 6px |
| url `小程序不支持` | 点击后跳转的链接地址 | String | - |
| to `小程序不支持` | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String｜Object | - |
| replace `小程序不支持` | 是否在跳转时替换当前页面历史 | Boolean | false |
| 字段 | 说明 | 类型 | 默认值 |
| ---------------------- | ---------------------------------------------------------------------------------------------- | ---------------- | ------ |
| title | 标题名称 | String | - |
| sub-title | 左侧副标题 | String | - |
| desc | 右侧描述 | String | - |
| desc-text-align | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp) | String | right |
| is-link | 是否展示右侧箭头并开启点击反馈 | Boolean | false |
| icon | 左侧 [图标名称](#/icon) 或图片链接 | String | - |
| round-radius | 圆角半径 | Number | 6px |
| url `小程序不支持` | 点击后跳转的链接地址 | String | - |
| to `小程序不支持` | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String ｜ Object | - |
| replace `小程序不支持` | 是否在跳转时替换当前页面历史 | Boolean | false |
### Cell Event
| 名称 | 说明 | 回调参数 |
|-------|----------|-------------|
| ----- | -------- | ----------- |
| click | 点击事件 | event:Event |
## Cell Slots
| 名称 | 说明 |
|---------------|----------------------|
| ------------- | -------------------- |
| icon `v3.1.4` | 自定义左侧`icon`区域 |
| default | 自定义内容 |
| link | 自定义右侧`link`区域 |
## CellGroup Slots
| 名称 | 说明 |
|-----------------|---------------------|
| 名称 | 说明 |
| --------------- | --------------------- |
| title `v3.1.10` | 自定义`title`标题区域 |
| desc `v3.1.12` | 自定义`desc`描述区域 |
site_docs/docs_vue/docs/sidenavbar/doc.md 0 → 100644
浏览文件 @ 6e922cb0
# 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 | 导航点击 | - |
docs/docs_vue/docs/switch/doc.md → site_docs/docs_vue/docs/switch/doc.md
浏览文件 @ 6e922cb0
......@@ -115,14 +115,14 @@ export default {
| disable | 禁用状态 | Boolean | `false` |
| loading | 加载状态 | Boolean | `false` |
| name | [图标名称](#/icon) | String | `loading` |
| color | [图标颜色](#/icon) | String | - |
| size | [图标尺寸](#/icon) | String、Number | `12px` |
| color | [图标颜色](#/icon)，仅在`loading`状态下生效 | String | - |
| size | [图标尺寸](#/icon)，仅在`loading`状态下生效 | String、Number | `12px` |
| active-color | 打开时的背景颜色 | String | `#fa2c19` |
| inactive-color | 关闭时的背景颜色 | String | `#ebebeb` |
| active-text | 打开时文字描述 | String | - |
| inactive-text | 关闭时文字描述 | String | - |
| active-value | 打开时组件的值 | Boolean、String、Number | true |
| inactive-value | 关闭组件的值 | Boolean、String、Number | false |
| active-value | 打开时组件的值 | Boolean、String、Number | `true` |
| inactive-value | 关闭组件的值 | Boolean、String、Number | `false` |
### Events
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或