mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:07akioni/naive-ui

Browse Source
This commit is contained in:
07akioni 2019-12-15 19:15:32 +08:00
commit fba36e61cb
8 changed files with 475 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
demo/documentation/components/dropdown/zhCN/basic.md Normal file
View File

@ -0,0 +1,30 @@
# 基础
```html
<n-dropdown @select="handleSelect" :focusable="false">
<template v-slot:activator>
<n-button>金钱所迫，起床工作</n-button>
</template>
<n-dropdown-item
v-for="hotel in hotels"
:key="hotel"
:name="hotel.toLowerCase()"
:label="hotel"
/>
</n-dropdown>
```
```js
export default {
data () {
return {
hotels: [
'滨海湾金沙，新加坡', '布朗酒店，伦敦', '亚特兰蒂斯巴哈马，拿骚', '比佛利山庄酒店，洛杉矶'
]
}
},
methods: {
handleSelect (name) {
this.$NMessage.info(name)
}
}
}
```

54
demo/documentation/components/dropdown/zhCN/cascade.md Normal file
View File

@ -0,0 +1,54 @@
# 多级
```html
<n-dropdown
placement="bottom-start"
trigger="click"
@select="handleSelect"
>
<template v-slot:activator>
<n-button>人物和食物</n-button>
</template>
<n-dropdown-item name="jay gatsby">
杰·盖茨比
</n-dropdown-item>
<n-dropdown-item name="daisy buchanan">
黛西·布坎南
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="nick carraway">
尼克·卡拉威
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="jordan baker">
乔丹·贝克
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="tom buchanan">
汤姆·布坎南
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="chicken">
鸡肉
</n-dropdown-item>
<n-dropdown-item name="beef">
牛肉
</n-dropdown-item>
</n-dropdown-submenu>
</n-dropdown-submenu>
</n-dropdown>
```
```js
export default {
methods: {
handleSelect (name) {
this.$NMessage.info(name)
}
}
}
```

10
demo/documentation/components/dropdown/zhCN/index.md
View File

@ -0,0 +1,10 @@
# 下拉菜单
```demo
basic
trigger
placement
cascade
width
size
manual-position
```

80
demo/documentation/components/dropdown/zhCN/manualPosition.md Normal file
View File

@ -0,0 +1,80 @@
# 手动定位
在特殊情况下，你可能想手动定位下拉菜单。比如在一块区域右击以弹出下拉菜单。
```html
<div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @contextmenu="handleContextMenu">
右击
</div>
<n-dropdown
placement="bottom-start"
trigger="manual"
manually-positioned
@select="handleSelect"
@blur="handleBlur"
:x="x"
:y="y"
v-model="showDropdown"
>
<n-dropdown-item name="jay gatsby">
杰·盖茨比
</n-dropdown-item>
<n-dropdown-item name="daisy buchanan">
黛西·布坎南
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="nick carraway">
尼克·卡拉威
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="jordan baker">
乔丹·贝克
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="tom buchanan">
汤姆·布坎南
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="chicken">
鸡肉
</n-dropdown-item>
<n-dropdown-item name="beef">
牛肉
</n-dropdown-item>
</n-dropdown-submenu>
</n-dropdown-submenu>
</n-dropdown>
```
```js
export default {
methods: {
handleSelect (name) {
this.showDropdown = false
this.$NMessage.info(name)
},
handleBlur () {
this.showDropdown = false
},
handleContextMenu (e) {
e.preventDefault()
this.showDropdown = false
this.$nextTick().then(() => {
this.showDropdown = true
this.x = e.clientX
this.y = e.clientY
})
}
},
data () {
return {
showDropdown: false,
x: 0,
y: 0
}
}
}
```

31
demo/documentation/components/dropdown/zhCN/placement.md Normal file
View File

@ -0,0 +1,31 @@
# 弹出位置
```html
<n-dropdown @select="handleSelect" placement="bottom-start" :focusable="false">
<template v-slot:activator>
<n-button>金钱所迫，起床工作</n-button>
</template>
<n-dropdown-item
v-for="hotel in hotels"
:key="hotel"
:name="hotel.toLowerCase()"
>
{{ hotel }}
</n-dropdown-item>
</n-dropdown>
```
```js
export default {
data () {
return {
hotels: [
'滨海湾金沙，新加坡', '布朗酒店，伦敦', '亚特兰蒂斯巴哈马，拿骚', '比佛利山庄酒店，洛杉矶'
]
}
},
methods: {
handleSelect (name) {
this.$NMessage.info(name)
}
}
}
```

149
demo/documentation/components/dropdown/zhCN/size.md Normal file
View File

@ -0,0 +1,149 @@
# 尺寸
```html
<n-dropdown
placement="bottom-start"
trigger="click"
size="small"
@select="handleSelect"
:focusable="false"
>
<template v-slot:activator>
<n-button>小号</n-button>
</template>
<n-dropdown-item name="jay gatsby">
杰·盖茨比
</n-dropdown-item>
<n-dropdown-item name="daisy buchanan">
黛西·布坎南
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="nick carraway">
尼克·卡拉威
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="jordan baker">
乔丹·贝克
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="tom buchanan">
汤姆·布坎南
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="chicken">
鸡肉
</n-dropdown-item>
<n-dropdown-item name="beef">
牛肉
</n-dropdown-item>
</n-dropdown-submenu>
</n-dropdown-submenu>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="medium"
@select="handleSelect"
:focusable="false"
>
<template v-slot:activator>
<n-button>中号</n-button>
</template>
<n-dropdown-item name="jay gatsby">
杰·盖茨比
</n-dropdown-item>
<n-dropdown-item name="daisy buchanan">
黛西·布坎南
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="nick carraway">
尼克·卡拉威
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="jordan baker">
乔丹·贝克
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="tom buchanan">
汤姆·布坎南
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="chicken">
鸡肉
</n-dropdown-item>
<n-dropdown-item name="beef">
牛肉
</n-dropdown-item>
</n-dropdown-submenu>
</n-dropdown-submenu>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="large"
:focusable="false"
@select="handleSelect"
>
<template v-slot:activator>
<n-button>大号</n-button>
</template>
<n-dropdown-item name="jay gatsby">
杰·盖茨比
</n-dropdown-item>
<n-dropdown-item name="daisy buchanan">
黛西·布坎南
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="nick carraway">
尼克·卡拉威
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="jordan baker">
乔丹·贝克
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="tom buchanan">
汤姆·布坎南
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="chicken">
鸡肉
</n-dropdown-item>
<n-dropdown-item name="beef">
牛肉
</n-dropdown-item>
</n-dropdown-submenu>
</n-dropdown-submenu>
</n-dropdown>
```
```js
export default {
methods: {
handleSelect (name) {
this.$NMessage.info(name)
}
}
}
```
```css
.n-button {
margin: 0 8px 12px 0;
}
```

64
demo/documentation/components/dropdown/zhCN/trigger.md Normal file
View File

@ -0,0 +1,64 @@
# 触发
```html
<n-dropdown @select="handleSelect" trigger="hover">
<template v-slot:activator>
<n-button>悬停</n-button>
</template>
<n-dropdown-item
v-for="hotel in hotels"
:key="hotel"
:name="hotel.toLowerCase()"
:label="hotel"
/>
</n-dropdown>
<n-dropdown @select="handleSelect" trigger="click" :focusable="false">
<template v-slot:activator>
<n-button>点击</n-button>
</template>
<n-dropdown-item
v-for="hotel in hotels"
:key="hotel"
:name="hotel.toLowerCase()"
:label="hotel"
/>
</n-dropdown>
<n-dropdown @select="handleSelect" trigger="manual" v-model="showDropdown">
<template v-slot:activator>
<n-button @click="handleClick">手动</n-button>
</template>
<n-dropdown-item
v-for="hotel in hotels"
:key="hotel"
:name="hotel.toLowerCase()"
:label="hotel"
/>
</n-dropdown>
```
```js
export default {
data () {
return {
hotels: [
'滨海湾金沙，新加坡', '布朗酒店，伦敦', '亚特兰蒂斯巴哈马，拿骚', '比佛利山庄酒店，洛杉矶'
],
showDropdown: false
}
},
methods: {
handleSelect (name) {
this.$NMessage.info(name)
},
handleClick () {
this.showDropdown = !this.showDropdown
}
}
}
```
```css
.n-button {
margin: 0 8px 12px 0;
}
```

57
demo/documentation/components/dropdown/zhCN/width.md Normal file
View File

@ -0,0 +1,57 @@
# 宽度
可以设置 `width`、`max-width`、`min-width`、`submenu-width`、`submenu-max-width`、`sub-min-width`。
```html
<n-dropdown
placement="bottom-start"
trigger="click"
:width="180"
:submenu-width="180"
@select="handleSelect"
>
<template v-slot:activator>
<n-button>人物和食物</n-button>
</template>
<n-dropdown-item name="jay gatsby">
杰·盖茨比
</n-dropdown-item>
<n-dropdown-item name="daisy buchanan">
黛西·布坎南
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="nick carraway">
尼克·卡拉威
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="jordan baker">
乔丹·贝克
</n-dropdown-item>
<n-dropdown-divider />
<n-dropdown-item name="tom buchanan">
汤姆·布坎南
</n-dropdown-item>
<n-dropdown-submenu>
<template v-slot:activator>
其他
</template>
<n-dropdown-item name="chicken">
鸡肉
</n-dropdown-item>
<n-dropdown-item name="beef">
牛肉
</n-dropdown-item>
</n-dropdown-submenu>
</n-dropdown-submenu>
</n-dropdown>
```
```js
export default {
methods: {
handleSelect (name) {
this.$NMessage.info(name)
}
}
}
```