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

Custom label

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

Element

Input

WJE-Input

Hyperlink

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

copyTarget

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

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.