Skip to main content

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

DescriptionIf true, a check icon will appear in the button
Attributeactive
Typeboolean
Default'false'

caret

DescriptionIf true, a space for the caret icon appears in the button
Attributecaret
Typeboolean
Default'false'

color

DescriptionThe 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.
Attributecolor
Type"danger." | "primary" | "success" | "neutral" | "complete" | "warning" | string | undefined
Defaultundefined

dialog

DescriptionAssociates 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.
Attributedialog
Typestring
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the button.
Attributedisabled
Typeboolean
Defaultfalse

fill

DescriptionSet 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".
Attributefill
Type"link" | "default" | "outline" | "solid" | undefined
Defaultundefined

size

DescriptionSet 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.
Attributesize
Type"default" | "large" | "small" | undefined
Defaultundefined

toggle

DescriptionAllows 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.
Attributetoggle
Typeany
Defaultfalse

tooltip

DescriptionAllows you to add text that will be displayed when the mouse hovers over the button.
Attributetooltip
Typeany
Defaultfalse

tooltip-placement

DescriptionSpecifies the position of the text in the "tooltip" attribute. The default position is "top"
Attributetooltip-placement
Typeany
Defaulttop

Eventy

NameDescription
wje-button:clickThe wje-button:click event is fired when the button is clicked.
wje-button:resetThe wje-button:reset event is fired when a button of type 'reset' is clicked when the associated form is reset.
wje-button:submitThe wje-button:submit event is fired when a button of type 'submit' is clicked when a form submission is triggered.
wje-button:toggleThe 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

NameDescription
nativeRefers to the <a> element inside the button

CSS Custom Vlastnosti

NameDescription
--wje-button-background-colorButton background colour
--wj-button-border-colorButton edge colour
--wj-button-border-radiusRounding the edges of the button
--wj-button-border-styleButton edge style
--wj-button-border-widthWidth of the button edges
--wje-button-colorButton text colour

Sloty

NameDescription
``The contents are placed between the named slots.
caretThe content is placed to the right of the button text in LTR and to the left in RTL.
endThe content is placed to the right of the button text in LTR and to the left in RTL.
icon-onlyIt should be applied to an icon in a button that does not contain text.
startThe content is placed to the left of the button text in LTR and to the right in RTL.