Skip to content

Commit e78d237

Browse files
DiegoCardosoDiegoCardoso
authored
chore: improve progress-bar dev page (#9580)
1 parent a72f288 commit e78d237

File tree

1 file changed

+85
-0
lines changed

1 file changed

+85
-0
lines changed

‎dev/progress-bar.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,96 @@
77
<title>Progress Bar</title>
88
<link rel="stylesheet" href="/packages/vaadin-lumo-styles/lumo.css" />
99
<script type="module" src="./common.js"></script>
10+
1011
<script type="module">
12+
import '@vaadin/checkbox';
13+
import '@vaadin/checkbox-group';
14+
import '@vaadin/number-field';
1115
import '@vaadin/progress-bar';
16+
import '@vaadin/radio-group';
17+
18+
const progress = document.querySelector('vaadin-progress-bar');
19+
20+
// Handle value changes
21+
document.getElementById('value').addEventListener('value-changed', (e) => {
22+
progress.value = e.detail.value;
23+
});
24+
25+
// Handle min/max changes
26+
['min', 'max'].forEach((prop) => {
27+
document.getElementById(prop).addEventListener('value-changed', (e) => {
28+
progress[prop] = e.detail.value;
29+
});
30+
});
31+
32+
// Handle state toggles
33+
document.getElementById('indeterminate').addEventListener('checked-changed', (e) => {
34+
progress.indeterminate = e.detail.value;
35+
});
36+
37+
// Handle theme changes
38+
document.getElementById('theme').addEventListener('value-changed', (e) => {
39+
progress.setAttribute('theme', e.detail.value);
40+
});
41+
42+
// Handle direction changes
43+
document.getElementById('direction').addEventListener('value-changed', (e) => {
44+
progress.setAttribute('dir', e.detail.value);
45+
});
1246
</script>
1347
</head>
48+
1449
<body>
50+
<style>
51+
.controls {
52+
display: grid;
53+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
54+
gap: 2rem;
55+
margin-bottom: 2rem;
56+
font-size: 0.875rem;
57+
}
58+
59+
.control-group {
60+
display: flex;
61+
flex-direction: column;
62+
gap: 1em;
63+
}
64+
65+
vaadin-number-field {
66+
width: 100%;
67+
}
68+
</style>
69+
70+
<div class="controls">
71+
<div class="control-group">
72+
<vaadin-number-field id="value" label="Value" value="50" min="0" max="100" step="1"> </vaadin-number-field>
73+
<vaadin-number-field id="min" label="Min" value="0" step="1"> </vaadin-number-field>
74+
<vaadin-number-field id="max" label="Max" value="100" step="1"> </vaadin-number-field>
75+
</div>
76+
77+
<div class="control-group">
78+
<vaadin-checkbox-group label="State toggle">
79+
<vaadin-checkbox label="Indeterminate" id="indeterminate" value="indeterminate"></vaadin-checkbox>
80+
</vaadin-checkbox-group>
81+
</div>
82+
83+
<div class="control-group">
84+
<vaadin-radio-group id="theme" label="Theme">
85+
<vaadin-radio-button label="Default" value="" checked></vaadin-radio-button>
86+
<vaadin-radio-button label="Contrast" value="contrast"></vaadin-radio-button>
87+
<vaadin-radio-button label="Error" value="error"></vaadin-radio-button>
88+
<vaadin-radio-button label="Success" value="success"></vaadin-radio-button>
89+
</vaadin-radio-group>
90+
</div>
91+
92+
<div class="control-group">
93+
<vaadin-radio-group id="direction" label="Direction">
94+
<vaadin-radio-button label="LTR" value="ltr" checked></vaadin-radio-button>
95+
<vaadin-radio-button label="RTL" value="rtl"></vaadin-radio-button>
96+
</vaadin-radio-group>
97+
</div>
98+
</div>
99+
15100
<vaadin-progress-bar min="0" max="100" value="50"></vaadin-progress-bar>
16101
</body>
17102
</html>

0 commit comments

Comments
 (0)