KongponentsMenu
KMenu - Menu component
html
<KMenu :items="items" />1
Props
items
An array of items to populate the menu with. The value passed for the items prop should adhere to this type interface:
ts
export interface MenuItem {
title: string
description?: string
}
export interface KMenuItemType extends MenuItem {
expandable: boolean
type: 'string' | 'number' | 'divider'
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Properties:
title- menu item labeldescription- text displayed whenexpandableitem is expandedexpandable- boolean of whether or not this item is expandabletype- supported values:string,number,divider
Note:
type='divider'will insert an empty item that is just an<hr>.
html
<template>
<KMenu :items="getMenuItems(6)" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup () {
const getMenuItems = (count: number): [] => {
let menuItems = []
for (let i = 0; i < count; i++) {
menuItems.push({
title: 'Item ' + i,
type: 'string',
expandable: false,
description: 'The item description for number ' + i
})
}
return menuItems
}
return {
getMenuItems,
}
}
})
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
width
You can pass a width string for KMenu. Currently we support numbers (will be converted to px), auto, and percentages for width.
By default the width is set to 284px.
html
<KMenu :items="getMenuItems(3)" width="735" />1
KMenuItem
KMenu generates a KMenuItem for each item in the items property.
Properties
item- the menu item content is built from this.- Properties:
title- menu item labeldescription- text displayed whenexpandableitem is expanded
- Interface:ts
export interface MenuItem { title: string description?: string }1
2
3
4
- Properties:
type- supported values:string,number,dividerexpandable- boolean of whether or not this item is expandablelastMenuItem- boolean of whether or not this is the last item in the menu (for styling)
html
<KMenuItem :item="{ title: 'some title', description: 'some description' }" :expandable="true" type="string" />1
Item Slots
itemTitle- the title content for the menu itemitemBody- the body content for the menu item
html
<KMenuItem>
<template v-slot:itemTitle>
Custom Title!
</template>
<template v-slot:itemBody>
Vivamus blandit metus eu nisi venenatis, vel convallis neque mollis. In enim lectus.
</template>
</KMenuItem>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Slots
body- The body of the menu, we expect this to be an array ofKMenuItemcomponents. This should be used instead of theitemsproperty.actionButton- the button at the bottom of the menu
Cras aliquet auctor ex ut hendrerit. Donec sagittis est nec aliquet semper. Quisque feugiat metus orci, at ullamcorper odio molestie non. Nam dignissim sed ligula ut commodo.
Vivamus blandit metus eu nisi venenatis, vel convallis neque mollis. In enim lectus, dignissim nec iaculis id, sodales quis nulla. Mauris pellentesque bibendum dui sed dictum.
html
<KMenu>
<template v-slot:body>
<KMenuItem v-for="item in getMenuItems(3)" :item="item" />
<KMenuItem>
<template v-slot:itemTitle>
Look mah!
</template>
<template v-slot:itemBody>
<div>Cowabunga dude!</div>
</template>
</KMenuItem>
<KMenuItem type="divider" />
<KMenuItem :expandable="true" :item="customItem" type="string" />
<KMenuItem :expandable="true" last-menu-item>
<template v-slot:itemTitle>
<span>Updated</span>
</template>
<template v-slot:itemBody>
<div>Vivamus blandit metus eu nisi venenatis, vel convallis neque mollis. In enim lectus, dignissim nec iaculis id, sodales quis nulla. Mauris pellentesque bibendum dui sed dictum.</div>
</template>
</KMenuItem>
</template>
<template v-slot:actionButton>
<KButton>Clear all the filters</KButton>
</template>
</KMenu>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28