ButtonGroup

scoped

ButtonGroup slúži na zoskupovanie elementov Button a Dropdown do funkčnejších celkov, ktoré budú po vložení do vnútra elementu automaticky naštýlované a usporiadané.

Základné použitie

Pridajte element wje-button-group do HTML s požadovanými atribútmi a do jeho vnútra zahrniete želané Button alebo Dropdown elementy.

Tvar ButtonGroup

Ukážka porovnáva, ako sa v skupine správajú tlačidlá s rôznym tvarom. Dôležité je, že group stále drží jeden súvislý vizuálny celok.

ButtonGroup s Dropdownom

Ukážka kombinuje klasické tlačidlo a dropdown v jednej skupine. Hodí sa pre primárnu akciu s doplnkovými sekundárnymi voľbami.

Ikony v ButtonGroup

Ukážka sa sústreďuje na prácu s ikonami v skupine tlačidiel, aby bolo jasné, ako držať rovnakú výšku, rytmus a zarovnanie.

Delené tlačidlá

ButtonGroup umožňuje zobraziť aj delené tlačidlo s viacerými funkciami.

Úprava štýlov

Farby ButtonGroup

Ukážka porovnáva farebné varianty celej skupiny tlačidiel, aby bolo jasné, ako sa group správa pri významových stavoch.

Farba okrajov v ButtonGroup

Ukážka ukazuje outline farebné varianty v button group. Hodí sa tam, kde chcete jemnejší vizuál, ale stále zachovať významové odlíšenie.

Kedy použiť

Použite wje-button-group, keď chcete riešiť daný UI problém konzistentne v rámci WebJET dizajn systému.

Kedy nepoužiť

Nepoužívajte komponent mimo jeho zodpovednosti; pri netypickom prípade radšej zložte viac menších prvkov.

Prístupnosť

Skontrolujte klávesnicové ovládanie, focus stavy, kontrast a zrozumiteľné pomenovanie interaktívnych prvkov.

Odporúčané postupy

• Preferujte API komponentu pred ručnými DOM zásahmi.
• Držte sa dizajnových tokenov a konzistentných konvencií pomenovania.
• Pred nasadením otestujte komponent v reálnych dátových scenároch.

Atribúty a vlastnosti

active

Popis	Určuje, či je komponent aktívny.
Atribút	active
Typ	boolean｜string｜number
Predvolené	false

color

Popis	Nastavuje farbu komponentu.
Atribút	color
Typ	string
Predvolené	primary

fill

Popis	Nastavuje textovú hodnotu uloženú vo voľbe fill.
Atribút	fill
Typ	string
Predvolené	link

round

Popis	Nastavuje textovú hodnotu uloženú vo voľbe round.
Atribút	round
Typ	string
Predvolené	false

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
native	Štýluje koreňovú shadow časť komponentu.

CSS vlastné premenné

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.