Qatlamlar · molecule
Hover karta
Ism, havola yoki avatar ustida keçikiş bilan çiqadigan kartoçka (4.149): mijoz profili, bitim qisqaçasi, havola oldindan körinişi. Siçqonça va klaviatura fokusida oçiladi, karta ustida turganda yopilmaydi, Esc yopadi; ekran çetiga qarab nişon ostida yoki tepasida joylaşadi.
Mas'ul: Aziz Karimov · bitim №214
Aziz Karimov
Savdo menejeri · Toşkent filialiFaol bitimlar: 12 ta, bu oy yopilgan — 5 ta. Oxirgi qönğiroq bugun 11:20 da.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-side | bottomtop xulq özi qöyadi (pastda joy bölmasa) | bottom |
Anatomiya
- root
.fx-hovercardşart - head
.fx-hovercard__headixtiyoriy - title
.fx-hovercard__titleixtiyoriy - sub
.fx-hovercard__subixtiyoriy - body
.fx-hovercard__bodyixtiyoriy - foot
.fx-hovercard__footixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab (fokus) | Qisqa keçikişdan keyin karta oçiladi |
| Esc | Kartani yopadi |
Nişon aria-describedby bilan karta matniga boğlanadi va aria-expanded körsatadi; klaviatura fokusida ham oçiladi, Esc yopadi. Karta mazmuni nişon sahifasida ham bor bölişi kerak.
Naqş: WAI-ARIA APG tooltip · rol tooltip
Kod
AI uçun: qaçon işlatiladi
- Röyxat yoki matndagi odam, kompaniya, bitim nomi ustida qisqa tafsilot — sahifadan çiqmasdan.
- Bir qator izoh →
tip - Bosilganda oçiladigan, amal bor qatlam →
popover - Muhim amal yoki ma'lumotni faqat hover kartaga qöymang — telefonda hover yöq; nişon bosilganda töliq sahifa oçilsin.
- Kartaga forma va köp tugma joylamang — bu oldindan köriş; amal kerak bölsa popover yoki dialog.
- Keçikişni olib taşlamang — siçqonça ötib ketganda karta miltillamasin.
npx foxui add hovercard
<p>Mas'ul: <a class="fx-link" href="#" data-fx-hovercard="hc-aziz">Aziz Karimov</a> · bitim №214</p> <div class="fx-hovercard" id="hc-aziz" popover="manual"> <div class="fx-hovercard__head"><span class="fx-avatar" data-color="blue" role="img" aria-label="Aziz Karimov">AK</span><div><p class="fx-hovercard__title">Aziz Karimov</p><span class="fx-hovercard__sub">Savdo menejeri · Toşkent filiali</span></div></div> <p class="fx-hovercard__body">Faol bitimlar: 12 ta, bu oy yopilgan — 5 ta. Oxirgi qönğiroq bugun 11:20 da.</p> <div class="fx-hovercard__foot"><span>+998 90 123 45 67</span><span>[email protected]</span></div> </div>
Tokenlar: --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-ease-enter --fx-ease-exit --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-base --fx-motion-exit-fast --fx-motion-shift-sm --fx-popover-width --fx-radius-overlay --fx-shadow-lg --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary