Körsatiş · molecule
Biriktirma
Fayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği. Composer içida ixçam (chip), xabar içida katta (card). Holatlar: yuklanmoqda, tayyor, xato (söz bilan).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | card Xabar içida: katta 16:9 köriniş. | chip |
data-state | uploadingerror | done |
Anatomiya
- root
.fx-attachmentşart - thumb
.fx-attachment__thumbixtiyoriy - name
.fx-attachment__nameşart - meta
.fx-attachment__metaixtiyoriy - remove
.fx-attachment__removeixtiyoriy - progress
.fx-attachment__progressixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Olib taşlaş tugmasiga |
| Enter, Space | Olib taşlaydi |
Olib taşlaş tugmasi: aria-label «<nom> ni olib taşlaş»; olib taşlangaç fokus qöşni biriktirmaga yoki composer maydoniga ötadi. Yuklaniş — native <progress>. Xato — “!” belgisi + sabab matni.
Kod
AI uçun: qaçon işlatiladi
- Composer içida biriktirilgan fayllar.
- Xabardagi fayl/rasm kartoçkasi.
npx foxui add attachment
<div style="display:flex;flex-wrap:wrap;gap:var(--fx-space-2)"> <div class="fx-attachment" data-fx-attachment><span class="fx-attachment__thumb" aria-hidden="true">PDF</span><span class="fx-attachment__name">shartnoma.pdf</span><span class="fx-attachment__meta">2,4 MB</span><button type="button" class="fx-attachment__remove" aria-label="shartnoma.pdf ni olib taşlaş"><svg data-fx-icon="x" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div> <div class="fx-attachment" data-state="uploading" data-fx-attachment><span class="fx-attachment__thumb" aria-hidden="true">XLS</span><span class="fx-attachment__name">tushum-oktabr.xlsx</span><span class="fx-attachment__meta">Yuklanmoqda… 62 %</span><button type="button" class="fx-attachment__remove" aria-label="tushum-oktabr.xlsx ni olib taşlaş"><svg data-fx-icon="x" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button><progress class="fx-attachment__progress" max="100" value="62" aria-label="Yuklaniş"></progress></div> <div class="fx-attachment" data-state="error" data-fx-attachment><span class="fx-attachment__thumb" aria-hidden="true">MOV</span><span class="fx-attachment__name">katta-video.mov</span><span class="fx-attachment__meta">Fayl 50 MB dan katta</span><button type="button" class="fx-attachment__remove" aria-label="katta-video.mov ni olib taşlaş"><svg data-fx-icon="x" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div> </div> <div class="fx-attachment" data-variant="card" data-fx-attachment style="max-inline-size:20rem"><span class="fx-attachment__thumb" aria-hidden="true">PNG</span><span class="fx-attachment__name">maket-bosh-sahifa.png</span><span class="fx-attachment__meta">860 KB</span><button type="button" class="fx-attachment__remove" aria-label="maket-bosh-sahifa.png ni olib taşlaş"><svg data-fx-icon="x" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-error-subtle --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-default --fx-border-color-error --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-ease-standard --fx-fg-error --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-radius-circle --fx-radius-control --fx-size-icon-sm --fx-size-min-target --fx-space-1 --fx-space-12 --fx-space-2 --fx-text-brand --fx-text-error --fx-text-primary --fx-text-tertiary