Segment Control

Otevřít ve Figmě

Komponenta Segment Control představuje lineární sadu dvou nebo více tlačítek, z nichž právě jedno je v daný okamžik aktivní. Funguje jako vizuálně kompaktní alternativa k Radio Buttonům nebo Tabům. Slouží k okamžitému přepínání mezi souvisejícími pohledy, režimy nebo filtrování dat v rámci jednoho kontejneru bez nutnosti obnovy celé stránky.

Anatomie

Label: Společný textový popisek nad celou skupinou tlačítek, který identifikuje účel komponenty.
Container & slot: Prostor seskupující jednotlivá tlačítka do přednastaveného layoutu. Podle nastavení řadí prvky horizontálně nebo vertikálně.
Neaktivní button: Neaktivní, skrytý obsah.
Aktivní button: Aktuálně zvolený zobrazený obsah.

Properties

showLabel: Zobrazí hlavní textový popisek skupiny.
children: Slot určený pro vkládání tlačítek. Počet si volí designér, min. 2.
text: Konkrétní text popisku skupiny (aktivní pouze při showLabel = true).
required: Označí skupinu jako povinnou a přidá symbol * k hlavnímu popisku.
optional: Pokud je true, vykreslí text (volitelné) vedle hlavního popisku.
showTooltip: Zobrazí ikonu nápovědy, která po najetí otevře bublinu s dodatečným popisem.

Varianty

Vertical: false - Horizontální uspořádání segmentů vedle sebe uzavřených ve společném kontejneru.
Vertical: true - Vertikální varianta.

Stavy

Komponenta jako celek nemá samostatné stavy, velikosti a varianty, její vizuální chování je definováno stavy jednotlivých vnořených tlačítek:

Unselected (Výchozí): Buttony, které aktuálně nejsou vybrané.
Selected (Aktivní): Právě zvolený button. Vizuálně musí být odlišený, aby bylo vidět, že je aktivní. Současně může být aktivní vždy pouze jeden button.
Disabled: Celá komponenta nebo konkrétní segment může být deaktivován. Text i pozadí jsou zašedlé a nereagují na kliknutí.

Velikosti

Velikost komponenty je určena výškou vložených tlačítek. Container, který obaluje buttony, má specifický padding. Je dovolené používat velikosti tlačítek (xsmall, small, medium, large).

Jak používat

SegmentControl může zastoupit funkci komponenty Tabs uvnitř obsahu - fungovat jako menu.
Jeden z buttonů je vždy aktivní jako výchozí hned při načtení stránky.
SegmentControl může být uvnitř nebo vně kontejneru, ke kterému spadá.

Jak nepoužívat

Segment Control nelze použít pro situace, kdy může uživatel vybrat více možností najednou.
Nepoužívejte komponentu, pokud výběr mění obsah celé stránky na úrovni hlavní navigace. Pro tento účel jsou určeny Tabs.
Nepoužívejte Segment Control jako přímou náhradu za běžná akční tlačítka v dialogu. Namísto toho použijte nativní tlačítka v komponentě nebo ButtonGroup.
Nekombinujte různé styly a velikosti tlačítek.