Segment Control

Anatomie

1. Label: Společný textový popisek nad celou skupinou tlačítek, který identifikuje účel komponenty.
2. Container & slot: Prostor seskupující jednotlivá tlačítka do přednastaveného layoutu. Podle nastavení řadí prvky horizontálně nebo vertikálně.
3. Neaktivní button: Neaktivní, skrytý obsah.
4. 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

1. Vertical: false - Horizontální uspořádání segmentů vedle sebe uzavřených ve společném kontejneru.
2. 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:

1. Unselected (Výchozí): Buttony, které aktuálně nejsou vybrané.
2. 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.
3. 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.