docs(dropdown): 下拉菜单组件增加针对图标使用的用例

This commit is contained in:
songjian 2021-08-05 09:46:05 +08:00
parent 6a2a5d6975
commit 77142dea58
4 changed files with 100 additions and 0 deletions

View File

@ -0,0 +1,49 @@
# Icon
```html
<n-dropdown :options="options">
<n-button>User profile</n-button>
</n-dropdown>
```
```js
import { h, defineComponent } from 'vue'
import { NIcon } from 'naive-ui'
import {
PersonCircleOutline as UserIcon,
Pencil as EditIcon,
LogOutOutline as LogoutIcon
} from '@vicons/ionicons5'
const renderIcon = (icon) => {
return () => {
return h(NIcon, null, {
default: () => h(icon)
})
}
}
export default defineComponent({
setup () {
return {
options: [
{
label: 'Profile',
key: 'profile',
icon: renderIcon(UserIcon)
},
{
label: 'Edit Profile',
key: 'editProfile',
icon: renderIcon(EditIcon)
},
{
label: 'Logout',
key: 'logout',
icon: renderIcon(LogoutIcon)
}
]
}
}
})
```

View File

@ -6,6 +6,7 @@ When you have some functions to trigger.
```demo
basic
icon
trigger
cascade
arrow

View File

@ -0,0 +1,49 @@
# 图标
```html
<n-dropdown :options="options">
<n-button>用户资料</n-button>
</n-dropdown>
```
```js
import { h, defineComponent } from 'vue'
import { NIcon } from 'naive-ui'
import {
PersonCircleOutline as UserIcon,
Pencil as EditIcon,
LogOutOutline as LogoutIcon
} from '@vicons/ionicons5'
const renderIcon = (icon) => {
return () => {
return h(NIcon, null, {
default: () => h(icon)
})
}
}
export default defineComponent({
setup () {
return {
options: [
{
label: '用户资料',
key: 'profile',
icon: renderIcon(UserIcon)
},
{
label: '编辑用户资料',
key: 'editProfile',
icon: renderIcon(EditIcon)
},
{
label: '退出登录',
key: 'logout',
icon: renderIcon(LogoutIcon)
}
]
}
}
})
```

View File

@ -6,6 +6,7 @@
```demo
basic
icon
trigger
cascade
arrow