Bug Tracker Active
Tabs
Tabs je navigační komponenta, která umožňuje organizovat obsah do několika panelů, přičemž v jednu chvíli je viditelný pouze jeden panel. Mezi jednotlivými taby se přepíná kliknutím na záložky.
WCAG 2.2Klávesnice
Tabs jsou ve Figmě vytvořeny jako samostatné záložky. Pro vytvoření komplexní struktury doporučujeme vyžít předpřipravené příklady variant. Pokud budete sestavovat Taby samostatně, nezapomeňte na zabalený autolayout přidat token Tabs.Item.Block.Border.BottomBase. Ten zajistí linku přes celý frame. V případě sestavování Block varianty, si prostudujte ještě popis uvedený níže.
Základní varianta s kompaktním zobrazením tabů. Taby jsou zobrazeny v jedné řadě s minimálním stylingem, vhodné pro jednodušší rozhraní. Tab zobrazuje pouze ikonu a napis.
Varianta pro případ, kdy je třeba do tabu dostat více informací. Každý tab má vlastní blokový vzhled, což poskytuje lepší vizuální hierarchii.
Nezapomeňte že Block varianta se vždy sestavuje s tabsContainerem. Ten je stejný jako klasický container, jen má dolní rohy oblé a horní ostré.
V Tabu může být v jednu chvíli zobrazena ikona, nadpis, popisek, tag a badge. Pokud se napis a popis do Tabu nevejdou, jejich obsah je zobrazen jako tooltip.
Varianta umožňující přidávání nových tabů za běhu. Obsahuje tlačítko "+" (většinou s textací "přidat nový", ale může být vlastní text) pro vytvoření nového tabu. Vhodné pro aplikace kde uživatelé potřebují vytvářet vlastní pracovní prostory.
Speciální varianta, kdy je jeden tab zobrazen na fixní pozici. Používá se na doméně Kalkulačky.
Pravidla pro vnořování tabů
První úroveň tabů → Může být použita varianta inline nebo default.
Pokud je první úroveň inline → Druhá úroveň musí být default.
Pokud je první úroveň default → Uvnitř je možné mít opět pouze default taby. Inline varianta se vnořovat nesmí.
Tabs automaticky přizpůsobují své chování různým velikostem obrazovky. Na menších zařízeních se zobrazují navigační šipky pro posun mezi taby, když se nevejdou do dostupného prostoru.
Zásady použití: