oda-framework
Version:
140 lines (139 loc) • 5.37 kB
HTML
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="../../../oda.js"></script>
<script type="module" src="./menu.js"></script>
<oda-tester>
<oda-menu style="max-width: 300px; align-self: center;" id="menu" show-sub-title></oda-menu>
</oda-tester>
<script type="module">
const selectedItem = { label: "4 строка" };
menu.title="asfasfasdf"
menu.items = [
{
label: "1 строка", is: 'second-item',
items: [
{ label: "1.1 строка", is: 'second-item' },
{ label: "1.2 строка", is: 'second-item' },
{ label: "1.3 строка", is: 'second-item' },
]
},
{
label: "2 строка", icon: 'icons:add', group: false, is: 'red-item', execute() {
ODA.push('execute');
},
items: [
{
label: "2.1 строка", items: [
{ label: "2.1 строка" },
{ label: "2.2 строка", is: 'red-item' }]
},
{
label: "2.2 строка", is: 'red-item',
items: [
{
label: "2.2.1 строка", items: [
{
label: "2.1 строка", items: [
{ label: "2.1 строка" },
{ label: "2.2 строка", is: 'red-item' }]
},
{ label: "2.2 строка", is: 'red-item' }]
},
{ label: "2.2.2 строка" },
{ label: "2.2.3 строка" },
{ label: "2.2.4 строка", group: true },
{ label: "2.2.5 строка" },
{ label: "2.2.6 строка" },
{ label: "2.2.7 строка" },
{ label: "2.2.8 строка" },
{ label: "2.2.9 строка" },
{ label: "2.2.10 строка" }
]
},
{ label: "2.3 строка" },
{ label: "2.4 строка" },
{ label: "2.5 строка" }
]
},
{
label: "3 строка", icon: 'icons:settings',
items: [
{ label: "3.1 строка" },
{ label: "3.2 строка" },
{ label: "3.3 строка" },
{ label: "3.4 строка" },
{ label: "3.5 строка" },
{ label: "3.6 строка" },
{ label: "3.7 строка" },
{ label: "3.8 строка" },
{ label: "3.9 строка" },
{ label: "3.10 строка" }
]
},
selectedItem,
{
label: "5 строка",
items: [
{ label: "5.1 строка" },
{
label: "5.2 строка",
items: [
{ label: "5.2.1 строка" },
{ label: "5.2.2 строка" },
{ label: "5.2.3 строка" },
{ label: "5.2.4 строка" },
{ label: "5.2.5 строка" },
{ label: "5.2.6 строка" },
{ label: "5.2.7 строка" },
{ label: "5.2.8 строка" },
{ label: "5.2.9 строка" },
{ label: "5.2.10 строка" }
]
},
{ label: "5.3 строка" },
{ label: "5.4 строка" },
{ label: "5.5 строка" },
{ label: "5.6 строка" },
{ label: "5.7 строка" },
{ label: "5.8 строка" },
{ label: "5.9 строка" },
{ label: "5.10 строка" }
]
},
{ label: "6 строка" },
{
label: "7 строка",
items: [
{ label: 'новая ветка' }
]
},
{ label: "8 строка", is: 'red-item' },
{ label: "9 строка", group: true},
{ label: "10 строка" }
]
menu.selectedItem = selectedItem;
ODA({ is: 'red-item', template: `
<style>
:host{
background-color: red;
@apply --flex;
color: white;
}
</style>
{{item.label}}`,
$public: {
item: {}
}
});
ODA({ is: 'second-item', template: `
<style>
:host{
background-color: yellow;
}
</style>
<span ~text="item?.label"></span>`,
$public: {
item: null
}
})
</script>