Button

shadow

Tlačidlá sú klikateľný element, ktorý umožňuje zobraziť text, ikonu, prípadne oboje. Tlačidlá si je možné jednoducho prispôsobiť použitím rôznych atribútov a CSS vlastností.

Základné použitie

Ak chcete použiť komponent Button, zahrňte ho do HTML s požadovanými atribútmi. Pridaním atribútu disabled sa tlačidlo stane neaktívnym a nie je možné naň kliknúť.

Tooltip

Vlastnosť tooltip umožňuje zobraziť textový popis tlačidla po prejdení myšou. Pre zobrazenie textu je potrebné pridať tlačidlu atribút tooltip s textovým obsahom. Doplnením atribútu tooltip-placement je možné určiť pozíciu zobrazenia textu.

Toggle

Vlastnosť toggle umožňuje priradiť tlačidlu dva rôzne stavy a kliknutím medzi nimi prepínať. Nastavením hodnoty sa tlačidlu priradí predvolený stav.
Pre nastavenie dostupných stavov je potrebné pridať tlačidlu dva podradené elementy so slotom s hodnotou togglea tiež s vlastnosťou state, ktorá tlačidlu určí samotnú hodnotu stavu.

Caret

Vlastnosť caret umožňuje zobraziť šípku na tlačidle. Pre zobrazenie šípky je potrebné pridať tlačidlu atribút caret.

Tvar tlačidla

Vlastnosť round umožňuje upraviť tvar tlačidla. V predvolenom nastavení sú tlačidlá obdĺžnikové s malým zaoblením okrajov. Pridaním tohto atribútu sa zaoblenie tlačidla zväčší.

Tlačidlo formulára

Vlastnosti submit a reset umožňujú použiť tlačidlo na odoslanie alebo resetovanie formulára. Tlačidlo s vlastnosťou submit odošle formulár, ktorý je s ním prepojený. Tlačidlo s vlastnosťou reset obnoví všetky hodnoty formulára.

Výplň tlačidla

Vlastnosť Fill určuje výplň pozadia a okraja tlačidla. V predvolenom nastavení majú tlačidlá jednoliate pozadie solid. Ďalšie možnosti sú link a outline.

Veľkosť tlačidla

Vlastnosť size určuje veľkosť tlačidla. Nastavením tejto vlastnosti sa zmení vnútorné odsadenie tlačidla.

Ikony tlačidla

V tlačidlách je možné zobraziť aj ikony vložením elementu wje-icon. Ich umiestnenie v rámci tlačidla upravíte pomocou atribútu slot a vlastnosti start alebo end. Ak tlačidlo neobsahuje žiaden text a skladá sa len z ikony, použite vlastnosť icon-only.

Viac informácií o ikonách nájdete na stránke Ikony.

Úprava štýlov

Farby tlačidla

Vlastnosť color upravuje farbu pozadia a okraja tlačidla. Nastavením tejto hodnoty sa farba tlačidla zmení na jednu z farieb prednastavenej farebnej palety. V predvolenom nastavení majú tlačidlá pozadie primary.

Farba okrajov tlačidla

Vlastnosť color je možné kombinovať spolu s vlastnosťou fill.

CSS vlastné premenné

Ukážka sa sústreďuje na vizuálne ladenie. Vzhľad mení cez CSS premenné alebo vlastné štýly bez potreby meniť HTML štruktúru.

Kedy použiť

Použite wje-button, 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
Predvolené	false

caret

Popis	Určuje, či je voľba caret zapnutá a ovplyvňuje správanie komponentu.
Atribút	caret
Typ	boolean
Predvolené	false

color

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

customEvent

Popis	Nastavuje textovú hodnotu uloženú vo voľbe custom-event.
Atribút	custom-event
Typ	string
Predvolené	-

dialog

Popis	Nastavuje textovú hodnotu uloženú vo voľbe dialog.
Atribút	dialog
Typ	string｜object
Predvolené	-

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	false

fill

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

href

Popis	Nastavuje cieľovú URL, keď komponent funguje ako odkaz.
Atribút	href
Typ	any
Predvolené	-

outline

Popis	Určuje, či je voľba outline zapnutá a ovplyvňuje správanie komponentu.
Atribút	outline
Typ	boolean
Predvolené	false

round

Popis	Určuje, či je voľba round zapnutá a ovplyvňuje správanie komponentu.
Atribút	round
Typ	boolean
Predvolené	false

stopPropagation

Popis	Určuje, či je voľba stop-propagation zapnutá a ovplyvňuje správanie komponentu.
Atribút	stop-propagation
Typ	boolean
Predvolené	-

tooltip

Popis	Určuje, či je voľba tooltip zapnutá a ovplyvňuje správanie komponentu.
Atribút	tooltip
Typ	boolean
Predvolené	false

value

Popis	Nastavuje aktuálnu hodnotu komponentu.
Atribút	value
Typ	any
Predvolené	-

Udalosti

Názov	Popis
wje-button:click	Vyvolá sa pri kliknutí na tlačidlo.
wje-button:toggle	Vyvolá sa pri prepnutí aktívneho stavu prepínacieho tlačidla.
wje-button:submit	Vyvolá sa pri spustení odoslania formulára tlačidlom.
wje-button:reset	Vyvolá sa pri spustení resetu formulára tlačidlom.

Metódy

formAssociatedCallback

Popis	Synchronizuje komponent so životným cyklom formulára pri zmene kontextu formulára.
Signatúra	(form: HTMLFormElement) => void

formDisabledCallback

Popis	Aktualizuje stav deaktivácie komponentu pri zmene stavu nadradeného formulára.
Signatúra	(disabled: boolean) => void

CSS tieňové časti

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

CSS vlastné premenné

Názov	Popis
--wje-button-background-color	Vlastná CSS premenná, ktorá riadi background color.
--wje-button-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-button-color	Vlastná CSS premenná, ktorá riadi color.
--wje-button-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-button-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-button-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-button-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-button-margin-inline	Vlastná CSS premenná, ktorá riadi margin inline.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
icon	Slot pre obsah ikony.
caret	Slot pre obsah caret ikony.
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.
toggle	Slot pre obsah prepínača.