FileUpload Item
Element FileUploadItem predstavuje individuálnu položku (súbor) v rámci FileUpload komponentu. Zobrazuje podrobnosti, ako je názov súboru, veľkosť, priebeh nahrávania, a poskytuje akcie, ako je vymazanie súboru. Tento komponent je určený na použitie v kontexte FileUpload komponentu.
Pre viac informácií o použití FileUploadItem sa presuňte do dokumentácie elementu FileUpload
Základné použitie
Ukážka zobrazuje jednu položku nahrávaného súboru v predvolenom stave, teda tak, ako sa bude javiť v zozname po výbere súboru.
S obrázkom
Ukážka používa image variant file-upload-item, aby bolo vidieť, ako sa líši náhľadová položka od všeobecného súboru.
Is uploaded
Atribút is-uploaded zobrazí element v stave nahratého súboru.
Kedy použiť
Použite wje-file-upload-item, 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
isUploaded
| Popis | Určuje, či je voľba is-uploaded zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | is-uploaded |
| Typ | boolean |
| Predvolené | false |
size
| Popis | Nastavuje veľkosť komponentu. |
| Atribút | size |
| Typ | string ｜ number |
| Predvolené | - |
uploaded
| Popis | Určuje, či je položka súboru už nahraná. |
| Atribút | uploaded |
| Typ | any |
| Predvolené | - |
Udalosti
| Názov | Popis |
|---|---|
wje-button:click | Vyvolá sa pri kliknutí na tlačidlo. |
wje-file-upload-item:remove | Vyvolá sa pri odoslaní udalosti wje-file-upload-item:remove. |
Metódy
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS tieňové časti
| Názov | Popis |
|---|---|
button | Štýluje shadow časť button. |
image | Štýluje shadow časť image. |
name | Štýluje shadow časť name. |
size | Štýluje shadow časť size. |
CSS vlastné premenné
| Názov | Popis |
|---|---|
--primary-color | Vlastná CSS premenná, ktorá riadi primary color. |
Sloty
| Názov | Popis |
|---|---|
img | Slot pre náhľad obrázka alebo iného média. |
action | Slot pre akčné ovládacie prvky, napríklad tlačidlá. |