naive-ui/demo/documentation/components/dropdown/enUS/cascade.md

76 lines
1.1 KiB
Markdown
Raw Normal View History

2019-10-22 13:48:51 +08:00
# Cascade
Dropdown can be cascade.
2019-10-22 13:48:51 +08:00
```html
<n-dropdown
:options="options"
2019-10-22 13:48:51 +08:00
placement="bottom-start"
2019-12-01 22:55:39 +08:00
trigger="click"
:default-focus="false"
@select="handleSelect"
2019-10-22 13:48:51 +08:00
>
<n-button>People and Some Food to Eat</n-button>
2019-10-22 13:48:51 +08:00
</n-dropdown>
```
```js
const options = [
{
label: 'Jay Gatsby',
key: 'jay gatsby'
},
{
label: 'Daisy Buchanan',
key: 'daisy buchanan'
},
{
type: 'divider'
},
{
label: 'Nick Carraway',
key: 'nick carraway'
},
{
type: 'submenu',
label: 'Others',
key: 'others',
children: [
{
label: 'Jordan Baker',
key: 'jordan baker'
},
{
label: 'Tom Buchanan',
key: 'tom buchanan'
},
{
type: 'submenu',
label: 'Others',
key: 'others',
children: [
{
label: 'Chicken',
key: 'chicken'
},
{
label: 'Beef',
key: 'beef'
}
]
}
]
}
]
export default {
data () {
return {
options
}
},
methods: {
handleSelect (name) {
this.$NMessage.info(name)
}
}
}
2019-10-22 13:48:51 +08:00
```