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úť.
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.
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äčší.
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' |
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 |
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 |
Eventy
| Name | Description |
|---|---|
dialog | Called when the button is clicked |
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 |
|---|---|
--wj-color-base | 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 |
--wj-color-contrast | Button text colour |
--wj-padding-bottom | Bottom inner indent button |
--wj-padding-end | Right internal offset if the direction is LTR, and left internal offset if the direction is RTL button |
--wj-padding-start | Left internal offset if the direction is LTR, and right internal offset if the direction is RTL button |
--wj-padding-top | Upper internal offset button |
Sloty
| Name | Description |
|---|---|
| `` | The contents are placed between the named slots. |
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. |