02.03 Boxy – Záložky

Zdrojové CSS: /src/css/molecules/box/_tabs.scss
Zdrojové JS: /src/js/components/tabs.coffee

Defaultní - bez ohraničení obsahu

Výchozí molekula se záložkami. Záložky se překlikávají pomocí JavaScriptu. Pro správnou funčnost je potřeba spárovat href odkazu na .js-tab-links s id na elementu .box-tabs__fragment. Pozor ID musí být unikátní. Do .box-tabs__fragment lze vkládat jakýkoliv obsah (např. grid, molekuly boxů, molekuly výpisů, formuláře apod.)

Dále je potřeba zvolit aktivní záložku pomocí modifikátorů is-active na js-tab-links a box-tabs__fragment – díky tomuto můžete jednoduše mít aktivní např. druhou záložku.

Pokud je některá záložka neaktivní pak doporučuji ji do kódu vůbec nedávat. Druhá možnost je z .js-tab-links odstranit href a přidat modifikátor is-disabled.

Pro responsive byly přidán do .box-tabs__fragment odkaz .box-tabs__responsive-link, který sekunduje skryté horizontální menu. Navíc byl obsah ještě obalen do box-tabs__content.

Bez borderu

Tab1 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab2 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab3 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

S ohraničením obsahu

Molekula vycházející z defaultní molekuly. Pro ohraničení obsahu je potřeba přidat modifikátor box-tabs__fragment--bordered na .box-tabs__fragment.

Bez borderu

Tab4 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab5 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab6 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

S ohraničením obsahu ze spodu

Molekula vycházející z defaultní molekuly. Pro ohraničení obsahu je potřeba přidat modifikátor box-tabs__fragment--bordered-bottom na .box-tabs__fragment.

Tab name

Tab7 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab8 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab9 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Molekula vycházející z defaultní molekuly a může se kombinovat se vzhledem viz. víše. Navíc je na .box-tabs přídán modifikátor with-history, který naváže události hashchange. Opět je potřeba spárovat href .js-tab-links s ID na .box-tabs__fragment.

Záložky s historií mohou být pouze jedny na stránce.

Ajaxová záložka:
Obsah záložky lze donačítat ajaxem. Na .js-tab-links je potřeba přidat modifikátor is-ajax spolu s atributem data-ajax s url ajaxového požadavku. Do html normálně vytvořte element .box-tabs__fragment s obsahem viz níže, aby při kliku na záložku bylo vidět, že se něco načítá. Pokud se budu přepínat mezi záložkami, pak se ajaxový požadavek provede pouze jednou pro načtení a dál funguje jako standardní záložky s historií.

Tab name

Tabh7 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tabh8 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tabh9 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Filtrační záložky

Ukázka záložek s menu využívájící molekulu filtračního menu.

Menu item 1

Tab 1 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Menu item 2

Tab 2 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Menu item 3

Tab 3 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Defaultní - zabalené na mobilní zařízení

Případ kdy je potřeba mít položky zabalené na mobilních zařízeních.

Bez borderu

Tab1 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab2 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab3 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Zanořené záložky

Pro potřeby frameworku je také důležité, aby záložky správně fungovaly i v případě, že jsou zanořené.

Bez borderu

Tab1 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Bez borderu

Tab1 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab2 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab3 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab2 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab3 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Odkazování na záložky pomocí kotev

Odkazy na záložky pomocí kotev z textu po kliknutí automaticky nascrollují na danou záložku a aktivují ji. Stejně tak je možné záložku otevřít změnou hashe v URL.

Bez borderu

Tab1 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab2 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Tab name

Tab3 - Nulla facilisi. Sed interdum orci interdum sapien. Nulla quam. Curabitur eu neque a felis dictum iaculis. Curabitur sodales dui sit amet mi. Donec cursus sapien et neque. Aenean nisi sapien, sagittis a, eleifend sed, tristique pretium, enim. Proin pulvinar sollicitudin augue. Vivamus ac lorem. Quisque ut ipsum. Vivamus in pede quis erat condimentum adipiscing. Curabitur risus erat, scelerisque sit amet, mollis id, consectetuer eu, neque. Sed vitae risus sed enim fermentum venenatis.

Pokud jsou záložky vloženy pomocí JS dodatečně, je potřeba po jejich vložení zavolat metodu trigger('ajax-init') na jQuery objektu s vloženým obsahem. To zajistí, že pokud je v URL hash s některou z vložených záložek, tato se aktivuje.

Vložit

Pokud do URL přidáte #ajax-tab-2, automaticky se po přidání rozbalí druhá záložka.