Standaard checkbox
Geneste checkboxen
Met geneste checkboxen kun je eenvoudig een hele groep checkboxen aan of uit zetten. Hier is wel javascript voor benodigd.
<script>
System.import('/node_modules/uno/dist/components/form/checkbox.js').then(function (module) {
// Select the group-list
var checkboxGroups = document.querySelectorAll('.example .input__group-list');
for(var i = 0; i < checkboxGroups.length; i++) {
new module.CheckboxGroup(checkboxGroups.item(i));
}
});
</script>
Geneste checkboxen - tabel
Geneste checkboxen kunnen ook in combinatie met een tabel gebruikt worden. De header rij bevat de hoofdcheckbox, die
alle sub checkboxen in alle andere rijen triggered.
In de javascript geef je de tabel mee als hoofdcomponent.
Zorg ervoor dat de tabel juist is opgemaakt met een thead
en tbody
.
2014 | 2015 | 2016 | |
---|---|---|---|
124 | 42 | 252 | |
42 | 526 | 12 | |
736 | 367 | 234 |
<script>
System.import('/node_modules/uno/dist/components/form/checkbox.js').then(function (module) {
// Select the table containing the checkboxes
var checkboxGroup = document.getElementById('table_nested');
new module.CheckboxGroup(checkboxGroup);
});
</script>
Horizontale checkboxen
Wanneer je slechts 2 checkboxen hebt, met een korte label, kun je deze om ruimte te besparen ook naast elkaar zetten.
Benodigde stylesheets
/uno/components/form/form.css
/uno/components/form/input.css
/uno/components/tabs/tabs.css
/uno/components/form/checkbox.css