Kiritiş · molecule
Fayl yuklaş
Fayl tanlaş yoki sudrab taşlaş maydoni: bosilsa oyna oçiladi, ustiga olib kelinganda brend tusi, tanlangan fayllar nomi körinadi. Native input type="file" içida. Kengaytma: data-variant=compact, .fx-dropzone__limit, fayl qatorlari .fx-dropzone__list/__file (progress, data-state=error|done, qayta uriniş, thumbnail). Buferdan joylaş va papka (4.105): data-paste bilan Ctrl+V skrinşotni qöşadi (nomi «skrinshot-sana-vaqt.png»), papka taşlansa içidagi hamma fayl olinadi, «Papka tanlaş» tugmasi ham bor.
- hisobot.pdf
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | compact | — |
data-paste | on data-paste — dropzone fokusda/ustida bölsa Ctrl+Vpage Sahifaning istalgan joyida Ctrl+V | — |
Anatomiya
- root
.fx-dropzoneşart - title
.fx-dropzone__titleşart - hint
.fx-dropzone__hintixtiyoriy - files
.fx-dropzone__filesixtiyoriy - list
.fx-dropzone__listixtiyoriy - file
.fx-dropzone__fileixtiyoriy - limit
.fx-dropzone__limitixtiyoriy - paste
.fx-dropzone__pasteixtiyoriy - folder
.fx-dropzone__folderixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter/Space | Fayl tanlaş oynasi |
| Ctrl+V | Buferdagi skrinşot yoki faylni qöşadi (data-paste) |
Native file input <label> içida — Tab bilan fokus, Enter/Space bilan tanlaş; fayllar nomi aria-live.
Kod
AI uçun: qaçon işlatiladi
- Skrinşot, hujjat, rasm yuklaş.
- Bitta kiçik fayl, joy tor →
button - Ruxsat etilgan tur va hajmni yaşirmang — izohda yozing.
npx foxui add dropzone
<label class="fx-dropzone" data-fx-dropzone> <input type="file" multiple accept="image/*,.pdf"> <span class="fx-dropzone__title">Faylni şu yerga taşlang yoki tanlang</span> <span class="fx-dropzone__hint">PNG, JPG yoki PDF, 10 MB gaça</span> <span class="fx-dropzone__files" data-files aria-live="polite"></span> </label> <ul class="fx-dropzone__list"><li class="fx-dropzone__file" data-state="error"><span class="fx-dropzone__name">hisobot.pdf</span><span class="fx-dropzone__meta">Hajmi 10 MB dan oşdi</span><button type="button" class="fx-dropzone__retry">Qayta uriniş</button></li></ul> <label class="fx-dropzone" data-fx-dropzone data-paste> <input type="file" multiple accept="image/*,.pdf,.docx"> <span class="fx-dropzone__title">Hujjatlarni taşlang, tanlang yoki joylang</span> <span class="fx-dropzone__paste">Skrinşot: <kbd>Ctrl</kbd>+<kbd>V</kbd></span> <span class="fx-dropzone__hint">Butun papkani ham taşlaş mumkin · <button type="button" class="fx-dropzone__folder" data-folder>Papka tanlaş</button></span> <span class="fx-dropzone__files" data-files aria-live="polite"></span> </label>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-error --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-ease-standard --fx-fg-success --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-error --fx-text-primary --fx-text-secondary --fx-text-tertiary