Copy button

shadow

Copy button umožňuje jedným kliknutím skopírovať želaný obsah do clipboardu. Podporované sú input, textarea, wje-input, wje-label a a element.

Základné použitie

Ukážka zobrazuje copy button v najjednoduchšej forme, teda ako tlačidlo, ktoré kopíruje pripravenú hodnotu bez ďalšej logiky okolo.

Custom label

Pridaním vlastnosti label a label-success zmeníte text tooltipu po skopírovaní hodnoty.

Element

Ukážka kopíruje text z bežného DOM elementu. Hodí sa vtedy, keď zdrojová hodnota nie je input, ale napríklad statický kód alebo identifikátor.

Input

Ukážka kopíruje aktuálnu hodnotu z klasického inputu, takže je vidieť bežný formulárový scenár.

WJE-Input

Ukážka robí to isté pre wje-input, teda prepojí copy button priamo s hodnotou WebJET input komponentu.

Hyperlink

Ukážka kopíruje hodnotu z odkazu, čo je užitočné napríklad pri share URL alebo pri odkazoch na externé zdroje.

Kedy použiť

Použite wje-copy-button, keď používateľ zadáva hodnotu, vyberá možnosti alebo vykonáva akciu vo formulári.

Kedy nepoužiť

Nepoužívajte ho len ako vizuálny dekoratívny prvok bez interakcie. V takom prípade uprednostnite prezentačné komponenty.

Prístupnosť

Vždy prepojte komponent s popisom (label/aria-label), zachovajte ovládanie klávesnicou a pri validačných chybách zobrazte zrozumiteľnú správu.

Odporúčané postupy

• Majte jednotné validačné pravidlá a error stavy naprieč celým formulárom.
• Pri asynchrónnych operáciách zobrazte stav načítania alebo disabled stav.
• Pri zložitých formulároch preferujte menšie sekcie a okamžitú spätnú väzbu.

Atribúty a vlastnosti

for

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

value

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

Udalosti

Názov	Popis
wje-copy-button:click	Vyvolá sa pri kliknutí na komponent.

Metódy

copy

Popis	Spustí metódu copy na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(button: HTMLElement) => void

CSS tieňové časti

Názov	Popis
button	Štýluje shadow časť button.

CSS vlastné premenné

Názov	Popis
--text-color	Vlastná CSS premenná, ktorá riadi text color.
--background-color	Vlastná CSS premenná, ktorá riadi background color.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.