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 wj-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 Custom Vlastnosti

Atribúty a Vlastnosti

active

Description	If true, a check icon will appear in the button
Attribute	active
Type	boolean
Default	'false'

caret

Description	If true, a space for the caret icon appears in the button
Attribute	caret
Type	boolean
Default	'false'

color

Description	The color to be used from the application color palette. The default options are "primary", "warning", "success", "warning", "warning", and "neutral". For more information on colors, visit Customization Basics.
Attribute	color
Type	"danger." ｜ "primary" ｜ "success" ｜ "neutral" ｜ "complete" ｜ "warning" ｜ string ｜ undefined
Default	undefined

dialogue

Description	Associates a button with a specific event. When the button is clicked, the named event is triggered, allowing you to implement actions such as opening a dialog box or executing a custom event. See the dialog component for more information.
Attribute	dialogue
Type	string
Default	undefined

disabled

Description	If true, the user cannot interact with the button.
Attribute	disabled
Type	boolean
Default	false

fill

Description	Set to "link" for a transparent button without borders, to "outline" for a transparent button with border, or to "solid" with filled background. The default fill is "solid".
Attribute	fill
Type	"link" ｜ "default" ｜ "outline" ｜ "solid" ｜ undefined
Default	undefined

size

Description	Set to "small" for a button with a smaller height and padding, or to "large" for a button with a larger height and padding. By default, the size is set to the default.
Attribute	size
Type	"default" ｜ "large" ｜ "small" ｜ undefined
Default	undefined

toggle

Description	Allows you to assign two different states to a button and toggle between them by clicking. Setting a value assigns a default state to the button. The child element must contain a slot with the value toggle and also a state property with one of the two available state values.
Attribute	toggle
Type	any
Default	false

tooltip

Description	Allows you to add text that will be displayed when the mouse hovers over the button.
Attribute	tooltip
Type	any
Default	false

tooltip-placement

Description	Specifies the position of the text in the "tooltip" attribute. The default position is "top"
Attribute	tooltip-placement
Type	any
Default	top

Eventy

Name	Description
wje-button:click	The wje-button:click event is fired when the button is clicked.
wje-button:reset	The wje-button:reset event is fired when a button of type 'reset' is clicked when the associated form is reset.
wje-button:submit	The wje-button:submit event is fired when a button of type 'submit' is clicked when a form submission is triggered.
wje-button:toggle	The wje-button:toggle event is fired when the button with the 'toggle' slot is clicked, when switching state.

Metódy

No public methods available for this component.

CSS Shadow Parts

Name	Description
native	Refers to the <a> element inside the button

CSS Custom Vlastnosti

Name	Description
--wje-button-background-color	Button background colour
--wj-button-border-color	Button edge colour
--wj-button-border-radius	Rounding the edges of the button
--wj-button-border-style	Button edge style
--wj-button-border-width	Width of the button edges
--wje-button-color	Button text colour

Sloty

Name	Description
``	The contents are placed between the named slots.
caret	The content is placed to the right of the button text in LTR and to the left in RTL.
end	The content is placed to the right of the button text in LTR and to the left in RTL.
icon-only	It should be applied to an icon in a button that does not contain text.
start	The content is placed to the left of the button text in LTR and to the right in RTL.