Loading...
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.
V komponentě Tabs jsou ve Figmě připravené sloty pro správné strukturování obsahu. Do jednotlivých slotů lze vkládat pouze prvky, které jsou pro ně určené:
tabItems), které se řadí doleva.Button), která se řadí doprava.tabItem/highlight), která se řadí doprava.
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. Jako jediná podporuje vlastnost isSticky (při umístění v první úrovni přímo na canvasu).
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.
Vlastnost isSticky zajišťuje, že se záložky při scrollování dolů přilepí k hornímu okraji obrazovky. Umožňuje tak pohodlné přepínání obsahu stránky bez nutnosti scrollovat zpět nahoru.
Zásadní omezení: Vlastnost isSticky lze použít pouze pro první úroveň zanoření (Tabs umístěné přímo na canvasu) a výhradně pro Inline variantu. Pro Block variantu ani pro zanořené záložky v dalších úrovních není isSticky chování povoleno.
Varianta umožňující uživateli přidávat nové taby během práce s rozhraním. Obsahuje tlačítko (výchozí text „Přidat nový +“) pro vytvoření nového tabu. Je vhodná pro aplikace, kde uživatelé potřebují vytvářet vlastní nebo dodatečné pracovní prostory.
actions. Toto tlačítko může mít libovolnou funkci. Může být používané pro přidávání Tabs s mezikrokem pro uživatelské předvolby jak je popsáno v sekci Přidání položek výše.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í: