Tabs | Uno

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.

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.

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