2020-02-07 22:31:26 +08:00
|
|
|
# Indent
|
|
|
|
You can specify `indent` & `root-indent` of the menu. `root-indent` only determines the first-leveled children.
|
|
|
|
```html
|
|
|
|
<n-menu
|
|
|
|
v-model="activeName"
|
|
|
|
:root-indent="36"
|
|
|
|
:indent="12"
|
2020-06-17 12:45:10 +08:00
|
|
|
:items="menuItems"
|
|
|
|
/>
|
2020-02-07 22:31:26 +08:00
|
|
|
```
|
|
|
|
```js
|
|
|
|
import bookIcon from 'naive-ui/lib/icons/book-outline'
|
|
|
|
import personIcon from 'naive-ui/lib/icons/person-outline'
|
|
|
|
import wineIcon from 'naive-ui/lib/icons/wine-outline'
|
|
|
|
|
2020-06-17 12:45:10 +08:00
|
|
|
const menuItems = [
|
|
|
|
{
|
|
|
|
title: 'Hear the Wind Sing',
|
|
|
|
name: 'hear-the-wind-sing',
|
|
|
|
icon: h => h('n-icon', [h(bookIcon)])
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Pinball, 1973',
|
|
|
|
name: 'pinball-1973',
|
|
|
|
icon: h => h('n-icon', [h(bookIcon)]),
|
|
|
|
disabled: true,
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
title: 'Rat',
|
|
|
|
name: 'rat'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'A Wild Sheep Chase',
|
|
|
|
name: 'a-wild-sheep-chase',
|
|
|
|
icon: h => h('n-icon', [h(bookIcon)]),
|
|
|
|
disabled: true
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Dance Dance Dance',
|
|
|
|
name: 'dance-dance-dance',
|
|
|
|
icon: h => h('n-icon', [h(bookIcon)]),
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
type: 'group',
|
|
|
|
title: 'Characters',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
title: 'Narrator',
|
|
|
|
name: 'narrator',
|
|
|
|
icon: h => h('n-icon', [h(personIcon)])
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Sheep Man',
|
|
|
|
name: 'sheep-man',
|
|
|
|
icon: h => h('n-icon', [h(personIcon)])
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Beverage',
|
|
|
|
name: 'beverage',
|
|
|
|
icon: h => h('n-icon', [h(wineIcon)]),
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
title: 'Whisky',
|
|
|
|
name: 'whisky'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Food',
|
|
|
|
name: 'food',
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
title: 'Sandwich',
|
|
|
|
name: 'sandwich'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'The past increases. The future recedes.',
|
|
|
|
name: 'the-past-increases-the-future-recedes'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
|
2020-02-07 22:31:26 +08:00
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
bookIcon,
|
|
|
|
personIcon,
|
|
|
|
wineIcon
|
|
|
|
},
|
|
|
|
data () {
|
|
|
|
return {
|
2020-06-17 12:45:10 +08:00
|
|
|
activeName: null,
|
|
|
|
menuItems
|
2020-02-07 22:31:26 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|