Skip to content

Commit d87f6fa

Browse files
DiegoCardosoDiegoCardoso
authored
chore: improve menu-bar dev page (#9549)
* chore: improve menu-bar dev page * chore: add checkable items / add direction selection * refactor: use radio-buttons instead of select
1 parent 1b6d882 commit d87f6fa

File tree

1 file changed

+91
-5
lines changed

1 file changed

+91
-5
lines changed

‎dev/menu-bar.html‎

Lines changed: 91 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,40 @@
77
<title>Menu bar</title>
88
<link rel="stylesheet" href="/packages/vaadin-lumo-styles/lumo.css" />
99
<script type="module" src="./common.js"></script>
10+
<style>
11+
.controls {
12+
display: grid;
13+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
14+
gap: 2rem;
15+
margin-bottom: 2rem;
16+
font-size: 0.875rem;
17+
}
18+
19+
.control-group {
20+
display: flex;
21+
flex-direction: column;
22+
gap: 1em;
23+
}
24+
</style>
1025

1126
<script type="module">
1227
import '@vaadin/menu-bar';
1328
import '@vaadin/tooltip';
29+
import '@vaadin/checkbox';
30+
import '@vaadin/checkbox-group';
31+
import '@vaadin/radio-group';
32+
import '@vaadin/split-layout';
1433

1534
const menuBar = document.querySelector('vaadin-menu-bar');
1635
menuBar.items = [
17-
{ text: 'View', tooltip: 'Options for how to view the content' },
36+
{
37+
text: 'View',
38+
tooltip: 'Options for how to view the content',
39+
children: [
40+
{ text: 'Ruler', checked: false },
41+
{ text: 'Status bar', checked: true },
42+
],
43+
},
1844
{ text: 'Edit' },
1945
{
2046
text: 'Share',
@@ -23,7 +49,8 @@
2349
text: 'On social media',
2450
children: [{ text: 'Facebook' }, { text: 'Twitter' }, { text: 'Instagram' }],
2551
},
26-
{ text: 'By email' },
52+
{ text: 'By email', disabled: true },
53+
{ component: 'hr' },
2754
{ text: 'Get link' },
2855
],
2956
},
@@ -34,12 +61,71 @@
3461
},
3562
{ text: 'Duplicate', tooltip: 'Create a duplicate' },
3663
];
64+
65+
['dropdown-indicators', 'small', 'primary', 'tertiary', 'tertiary-inline', 'end-aligned'].forEach((variant) => {
66+
document.querySelector(`#${variant}`).addEventListener('checked-changed', (e) => {
67+
let theme = menuBar.getAttribute('theme') || '';
68+
if (e.detail.value) {
69+
theme += ` ${variant}`;
70+
} else {
71+
theme = theme.replace(variant, '');
72+
}
73+
74+
menuBar.setAttribute('theme', theme.trim());
75+
});
76+
});
77+
78+
menuBar.addEventListener('item-selected', (e) => {
79+
const item = e.detail.value;
80+
if (item.checked != null) {
81+
item.checked = !item.checked;
82+
}
83+
});
84+
85+
const enable = document.querySelector('#enable');
86+
enable.addEventListener('value-changed', (e) => {
87+
menuBar.toggleAttribute('disabled', e.detail.value == 'disabled');
88+
});
89+
90+
const direction = document.querySelector('#direction');
91+
direction.addEventListener('value-changed', (e) => menuBar.setAttribute('dir', e.detail.value));
3792
</script>
3893
</head>
3994

4095
<body>
41-
<vaadin-menu-bar>
42-
<vaadin-tooltip slot="tooltip" hover-delay="500" hide-delay="500"></vaadin-tooltip>
43-
</vaadin-menu-bar>
96+
<div class="controls">
97+
<div class="control-group">
98+
<vaadin-checkbox-group label="Themes">
99+
<vaadin-checkbox
100+
id="dropdown-indicators"
101+
value="dropdown-indicators"
102+
label="Dropdown indicators"
103+
></vaadin-checkbox>
104+
<vaadin-checkbox id="small" value="small" label="Small"></vaadin-checkbox>
105+
<vaadin-checkbox id="primary" value="primary" label="Primary"></vaadin-checkbox>
106+
<vaadin-checkbox id="tertiary" value="tertiary" label="Tertiary"></vaadin-checkbox>
107+
<vaadin-checkbox id="tertiary-inline" value="tertiary-inline" label="Tertiary inline"></vaadin-checkbox>
108+
<vaadin-checkbox id="end-aligned" value="end-aligned" label="End aligned"></vaadin-checkbox>
109+
</vaadin-checkbox-group>
110+
</div>
111+
<div class="control-group">
112+
<vaadin-radio-group label="State" id="enable">
113+
<vaadin-radio-button label="Enabled" value="enabled" checked></vaadin-radio-button>
114+
<vaadin-radio-button label="Disabled" value="disabled"></vaadin-radio-button>
115+
</vaadin-radio-group>
116+
</div>
117+
<div class="control-group">
118+
<vaadin-radio-group label="Direction" id="direction">
119+
<vaadin-radio-button label="LTR" value="ltr" checked></vaadin-radio-button>
120+
<vaadin-radio-button label="RTL" value="rtl"></vaadin-radio-button>
121+
</vaadin-radio-group>
122+
</div>
123+
</div>
124+
<vaadin-split-layout>
125+
<vaadin-menu-bar>
126+
<vaadin-tooltip slot="tooltip" hover-delay="500" hide-delay="500"></vaadin-tooltip>
127+
</vaadin-menu-bar>
128+
<span>Resize to show overflow button</span>
129+
</vaadin-split-layout>
44130
</body>
45131
</html>

0 commit comments

Comments
 (0)