Menu
It is made on top off <Accordion> plugin. So, all the props of <Accordion> component will be applicable to <Menu> component. Also be aware while changing styles for .accordion and its descendent classes, because <Menu> component has all the classes of <Accordion> component. For more details, You can inspect the example given below.This component is useful in making sidebar menu.
<template>
<Menu :items="items"></Menu>
</template>
<script setup lang="ts">
import {Menu} from "@wovosoft/wovoui";
const items = [
{
text: "One",
link: "#one"
},
{
text: "Two",
link: "#one"
},
{
text: "Three",
link: "#one",
children: [
{
text: "Child Two",
link: "#one"
},
{
text: "Child One",
link: "#one",
children: [
{
text: "Child One",
link: "#one"
},
{
text: "Child Two",
link: "#one"
},
]
},
{
text: "Child Two",
link: "#one"
},
{
text: "Child One",
link: "#one",
children: [
{
text: "Child One",
link: "#one"
},
{
text: "Child Two",
link: "#one"
},
]
},
{
text: "Child Two",
link: "#one"
},
]
},
{
text: "Four",
link: "#one"
},
{
text: "Five",
link: "#one",
children: [
{
text: "Child One",
link: "#one"
},
{
text: "Child Two",
link: "#one"
},
]
},
]
</script>
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
items props
items should be an array containing menu items of the type given below. title is used to set title for the link generated and text is used for innerHTML for that link. Now, if text is not present, then it will be used as text.
type item = {
title?: string,
text?: string,
link?: string | object
}
2
3
4
5
When link is string it generates an <a> element with provided link as href attribute value. And when link is object, it generates a <router-link> component and considers link as value for to prop.