Button
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 toggle
a 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 about colors, visit Customization Basics. |
Attribute | color |
Type | "danger." | "primary" | "success" | "neutral" | "complete" | "warning" | string | undefined |
Default | undefined |
dialog
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 | dialog |
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. |