Tabs als content sectie
Tabs kunnen als content sectie of inline worden geplaatst. Hieronder een voorbeeld als content sectie
Badges
Een tab mag een badge of label bevatten. Zorg ervoor dat er geen witruimte tussen de titel van de tab en de badge zit. Dit voorkomt dat de onderlijning van de titel te ver doorloopt.
- Tab 1 met een lange titel
- Tab 22
- Tab 3
- Disabled
- Tab 5
- Another tab (6)
- Another tab (7)
- Another tab (8)
- Another tab (9)
- Another tab (10)
Panel 1
Panel 1
Panel 2
Panel 3
This tab is disabled :'(
Panel 5
Panel 6
Panel 7
Panel 8
Panel 9
Panel 10
inline tabs
inline tabs kunnen tussen de lopende tekst worden geplaatst. Voeg
hiervoor de modifiers .tab--inline
en
.tab__content--inline
toe aan de code.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget ipsum turpis. Vestibulum sit amet congue erat. Mauris at enim maximus, bibendum eros non, porttitor ante. Nunc a ante at nunc molestie pretium ut iaculis erat. Maecenas non justo ligula. Sed placerat porta sem, id euismod purus. Ut ac elementum nunc. Donec vitae velit rutrum magna fermentum varius. Praesent vitae elit lorem. Nunc condimentum maximus consectetur. Aliquam fringilla leo ut malesuada consectetur. Praesent tristique congue auctor. Donec at sem eu quam ultricies feugiat. Ut libero nisi, venenatis vitae tortor vitae, sollicitudin pretium diam. Maecenas porttitor consectetur elit sed viverra.
Donec vitae velit rutrum magna fermentum varius. Praesent vitae elit lorem. Nunc condimentum maximus consectetur. Aliquam fringilla leo ut malesuada consectetur. Praesent tristique congue auctor. Donec at sem eu quam ultricies feugiat. Ut libero nisi, venenatis vitae tortor vitae, sollicitudin pretium diam. Maecenas porttitor consectetur elit sed viverra.
Ut libero nisi, venenatis vitae tortor vitae, sollicitudin pretium diam. Donec vitae velit rutrum magna fermentum varius. Praesent vitae elit lorem. Nunc condimentum maximus consectetur. Ut libero nisi, venenatis vitae tortor vitae, sollicitudin pretium diam. Aliquam fringilla leo ut malesuada consectetur. Praesent tristique congue auctor. Donec at sem eu quam ultricies feugiat. Ut libero nisi, venenatis vitae tortor vitae, sollicitudin pretium diam. Maecenas porttitor consectetur elit sed viverra.
Donec vitae velit rutrum magna fermentum varius. Praesent vitae elit lorem. Nunc condimentum maximus consectetur. Aliquam fringilla leo ut malesuada consectetur. Praesent tristique congue auctor. Donec at sem eu quam ultricies feugiat. Ut libero nisi, venenatis vitae tortor vitae, sollicitudin pretium diam. Maecenas porttitor consectetur elit sed viverra.
Javascript
Voor de werking van tabs is javascript nodig
/* Load tab component */
System.import('/uno/components/tabs/tabs.js').then(function (module) {
/* Select all .tab elements on the page */
var tabs = document.querySelectorAll('.tab');
/* Initialize all tabs */
for (var i = 0; i < tabs.length; i++) {
new module.Tabs(tabs.item(i));
}
});
Bediening met javascript
Via javascript kan o.a. de actieve tab gewijzigd worden, via de methode
openTab(n)
, waarbij n de index van de
te activeren tab is.
/* Load tab component */
System.import('/uno/components/tabs/tabs.js').then(function (module) {
/* Create tab component */
var tab = new module.Tabs(document.querySelector('.tab'));
});
Javascript API
Publieke methodes
Methode | Omschrijving |
---|---|
openTab(idx:number):void |
Opent de tab met index idx |
disableTab(idx:number):void |
Deactiveer de tab met index idx |
enableTab(idx:number):void |
Activeer de tab met index idx |
destroy():void |
Verwijdert de tabs, verwijdert alle event-listeners. Roep deze methode aan wanneer je de tabs wilt verwijderen! |
Publieke eigenschappen
Eigenschap | Type | Omschrijving |
---|---|---|
activeTabIndex read-only |
number | De index van de actieve tab |
Benodigde stylesheets
/uno/components/tabs/tabs.css