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

ButtonGroup s Dropdownom

Ikony v ButtonGroup

Delené tlačidlá

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

Úprava štýlov

Farby ButtonGroup

Farba okrajov v ButtonGroup

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

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

Udalosti

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

Metódy

findButton

Popis	Nájde button v dátach spravovaných komponentom.
Signatúra	(el: object) => object

toggle

Popis	Prepne toggle medzi zapnutým a vypnutým stavom.
Signatúra	(activeButton: object, buttons: Array<object>, index: any) => void

updateButtonState

Popis	Aktualizuje button state podľa najnovších údajov komponentu.
Signatúra	(button: HTMLElement, modeToRemove: string) => void

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.