Harakat · molecule
Takliflar (tayyor savollar)
Boş çatda yoki javobdan keyin tayyor savollar qatori. Bosilsa matn composer'ga yoziladi (data-target) yoki darhol yuboriladi (data-send); har holda fx-suggest hodisasi çiqadi. Joylaşuv: öraş, bir qatorli scroll yoki ustun kartalar.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-layout | scroll Bir qatorda gorizontal aylanadi.stack Ustun kartalar (böş çat markazi). | wrap |
Anatomiya
- root
.fx-suggestionsşart - item
.fx-suggestions__itemşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Takliflar orasida |
| Enter, Space | Taklifni tanlaydi |
Oddiy tugmalar guruhi (role="group" + aria-label). Uçqun ikon aria-hidden. Fokus halqasi bor.
Kod
AI uçun: qaçon işlatiladi
- Böş çat boşida va javobdan keyin davom etiş uçun.
npx foxui add suggestions
<div class="fx-suggestions" id="sg1" data-fx-suggestions role="group" aria-label="Taklif etilgan savollar"> <button type="button" class="fx-suggestions__item"><svg data-fx-icon="spark" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>Oktabr hisobotini qisqaça yoz</button><button type="button" class="fx-suggestions__item"><svg data-fx-icon="spark" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>Qaysi mijozlar faol emas?</button><button type="button" class="fx-suggestions__item"><svg data-fx-icon="spark" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>Keyingi hafta rejasi</button> </div> <div class="fx-suggestions" data-layout="stack" data-fx-suggestions role="group" aria-label="Boşlaş uçun"> <button type="button" class="fx-suggestions__item"><svg data-fx-icon="spark" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>Mijozlar röyxatini tahlil qil</button><button type="button" class="fx-suggestions__item"><svg data-fx-icon="spark" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg>Haftalik hisobotni tayyorla</button> </div>
Tokenlar: --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-duration-stagger --fx-ease-enter --fx-ease-standard --fx-font-size-sm --fx-knob-pill --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-slow --fx-radius-control --fx-radius-overlay --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-primary --fx-text-secondary