Taby

Malé menu

Všechny

In efficitur nunc ac suscipit dictum. Sed vel odio non felis semper finibus at id velit. Ut pharetra consequat purus nec lacinia. In aliquam hendrerit erat sed semper. Cras blandit eu tellus eget bibendum. Pellentesque arcu justo, pretium vel facilisis vel, rhoncus vel purus. Sed vel nisl lorem. Praesent neque felis, sagittis eu rhoncus in, cursus et leo. Integer augue orci, ornare non vestibulum sit amet, rhoncus ut felis. Nullam lacinia risus sit amet ex consectetur, et sollicitudin justo pulvinar. Quisque tincidunt quam aliquam, blandit lectus nec, bibendum mi. Nulla non venenatis quam. Vestibulum ac mauris consectetur, condimentum leo sit amet, lobortis diam. Nullam a nulla vitae lectus tempus sollicitudin. Suspendisse maximus erat vitae enim mollis auctor. Aliquam mollis ac urna a auctor.

Velké menu (obory)

Pro variantu většího menu tabů (u oborů) lze použít modifikátor .m-tabs--lg.

Bakalářské studium

Donec lobortis sapien at ante sollicitudin, nec auctor sem pharetra. Pellentesque pharetra tellus in est tempor, at congue sem consectetur. Cras quis congue nulla. Sed non facilisis tortor. Sed interdum tortor ut ex maximus, at dapibus diam pharetra. Donec et egestas dui. Nullam accumsan imperdiet accumsan. Vivamus rhoncus risus vitae feugiat pharetra. Mauris orci eros, pulvinar ac ante ut, bibendum venenatis nibh. Phasellus pharetra nunc non urna posuere ultrices in vel odio.

Automatická šířka položek menu

Pokud se hodí neroztahovat menu tabů na celou šířku, lze použít modifikátor .m-tabs--compact.

Vše

Sed ullamcorper lectus eget felis ornare blandit. Mauris malesuada quam ut nisl volutpat lacinia. Phasellus a elementum arcu. Vivamus varius suscipit fringilla. Sed a venenatis felis, in pulvinar risus. Curabitur pulvinar leo sed risus hendrerit rhoncus. Mauris nec vestibulum mauris. Vivamus ultricies felis mollis ante pretium, ornare ornare risus ullamcorper. Sed vulputate, magna vitae egestas consequat, mi orci ornare lectus, ac dictum mi ex id ipsum.

Klasické submenu (profil)

Funkčnost tabů lze navěsit v podstatě na jakoukoli vlastní HTML strukturu. Samotná javascriptová obsluha funguje pomocí aria atributů:

  • role="tablist" - definuje seznam tabů (navigaci),
  • role="tab" - definuje odkaz na tab (v rámci tablistu)
    • aria-controls="{id}" - {id} určuje, který tab navigační odkaz ovládá
    • aria-selected="true" - označuje odkaz aktuálně zobrazeného tabu
  • role="tabpanel" - definuji samotný tab (obsah)
    • id="{id}" - {id} se musí shodovat s hodnotou atributu aria-controls korespondujícího odkazu
    • aria-hidden="true" - označuje všechny nevybrané taby

Zde je použití na komponentě submenu (na stránce profil člověka).

Kontakty

Donec lobortis sapien at ante sollicitudin, nec auctor sem pharetra. Pellentesque pharetra tellus in est tempor, at congue sem consectetur. Cras quis congue nulla. Sed non facilisis tortor. Sed interdum tortor ut ex maximus, at dapibus diam pharetra. Donec et egestas dui. Nullam accumsan imperdiet accumsan. Vivamus rhoncus risus vitae feugiat pharetra. Mauris orci eros, pulvinar ac ante ut, bibendum venenatis nibh. Phasellus pharetra nunc non urna posuere ultrices in vel odio.

Projekty

Donec lobortis sapien at ante sollicitudin, nec auctor sem pharetra. Pellentesque pharetra tellus in est tempor, at congue sem consectetur. Cras quis congue nulla. Sed non facilisis tortor. Sed interdum tortor ut ex maximus, at dapibus diam pharetra. Donec et egestas dui. Nullam accumsan imperdiet accumsan. Vivamus rhoncus risus vitae feugiat pharetra. Mauris orci eros, pulvinar ac ante ut, bibendum venenatis nibh. Phasellus pharetra nunc non urna posuere ultrices in vel odio.