mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
docs(dropdown): 下拉菜单组件增加针对图标使用的用例
This commit is contained in:
parent
6a2a5d6975
commit
77142dea58
49
src/dropdown/demos/enUS/icon.demo.md
Normal file
49
src/dropdown/demos/enUS/icon.demo.md
Normal 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)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
@ -6,6 +6,7 @@ When you have some functions to trigger.
|
||||
|
||||
```demo
|
||||
basic
|
||||
icon
|
||||
trigger
|
||||
cascade
|
||||
arrow
|
||||
|
49
src/dropdown/demos/zhCN/icon.demo.md
Normal file
49
src/dropdown/demos/zhCN/icon.demo.md
Normal 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)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
@ -6,6 +6,7 @@
|
||||
|
||||
```demo
|
||||
basic
|
||||
icon
|
||||
trigger
|
||||
cascade
|
||||
arrow
|
||||
|
Loading…
Reference in New Issue
Block a user