Kiritiş · primitive
Fayl tugmasi
Oddiy «Fayl tanlaş» maydoni: native input type="file", maydon şaklida — tugma va tanlangan fayl nomi brauzerdan. Bitta yoki köp fayl, accept bilan tur çeklanadi. Sudrab taşlaş kerak bölsa — dropzone. Fayl turi belgisi (4.142): .fx-file__icon[data-type=pdf|doc|xls|ppt|zip|img|txt] — bukilgan burçakli varaq va kengaytma yorliği; .fx-file__item — belgi, nom va hajm qatori.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smlg | md |
data-type | pdfdocxlspptzipimgtxt | — |
data-size | smlg | md |
Anatomiya
- input
.fx-fileşart - type-icon
.fx-file__iconixtiyoriy - item
.fx-file__itemixtiyoriy - name
.fx-file__nameixtiyoriy - size
.fx-file__sizeixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Space / Enter | Fayl tanlaş oynasini oçadi |
Native input: Tab bilan fokus, Space/Enter oynani oçadi; körinadigan label va aria-describedby (hint).
Kod
AI uçun: qaçon işlatiladi
- Bitta yoki bir neçta fayl tanlaş, sudrab taşlaş şart emas (forma, profil).
- Sudrab taşlaş va katta yuklaş maydoni →
dropzone - Native input'ni yaşirib, örniga div-tugma yasamang — klaviatura va ekran öquvçi buziladi.
- Hajm va turni faqat xatoda aytmang — hint'da oldindan yozing.
- Fayl turini faqat rang bilan bildirmang — yorliq (PDF, XLS) va nom/hajm qatorida tur sözi bölsin.
npx foxui add file
<div class="fx-field"> <label class="fx-label" for="fayl1">Şartnoma nusxasi</label> <input class="fx-file" id="fayl1" type="file" accept=".pdf,image/*" aria-describedby="fayl1-h"> <span class="fx-hint" id="fayl1-h">PDF yoki rasm, 10 MB gaça.</span> </div> <div class="fx-field" data-invalid> <label class="fx-label" for="fayl2">Rasmlar</label> <input class="fx-file" id="fayl2" type="file" multiple accept="image/*" aria-describedby="fayl2-h"> <span class="fx-hint" id="fayl2-h">Eng köpi 5 ta rasm tanlang.</span> </div> <!-- Fayl turi belgilari (4.142) --> <div class="fx-file__item"><span class="fx-file__icon" data-type="pdf" aria-hidden="true"><span>PDF</span></span><span class="fx-file__meta"><span class="fx-file__name">Şartnoma №214 — Aziz Karimov.pdf</span><span class="fx-file__size">PDF · 1,2 MB</span></span></div> <div class="fx-file__item"><span class="fx-file__icon" data-type="xls" aria-hidden="true"><span>XLS</span></span><span class="fx-file__meta"><span class="fx-file__name">Oktyabr savdo hisoboti.xlsx</span><span class="fx-file__size">Excel · 384 KB</span></span></div> <div class="fx-file__item"><span class="fx-file__icon" data-type="doc" aria-hidden="true"><span>DOC</span></span><span class="fx-file__meta"><span class="fx-file__name">Tijoriy taklif.docx</span><span class="fx-file__size">Word · 96 KB</span></span></div> <span class="fx-file__icon" data-type="zip" data-size="sm" aria-hidden="true"><span>ZIP</span></span> <span class="fx-file__icon" data-type="img" aria-hidden="true"><span>JPG</span></span> <span class="fx-file__icon" data-type="ppt" data-size="lg" aria-hidden="true"><span>PPT</span></span>
Tokenlar: --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-field --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-error --fx-border-color-field --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-md --fx-control-h-sm --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-knob-pill --fx-motion-fast --fx-radius-badge --fx-radius-control --fx-space-3 --fx-space-4 --fx-text-disabled --fx-text-on-category --fx-text-primary --fx-text-secondary --fx-text-tertiary