Qatlamlar · molecule
Havola oldindan köriş
Havola ustiga kursor olib borilganda (yoki fokusda) sahifaning kiçik rasmi, sarlavhasi, qisqa tavsifi va domeni çiqadi (4.81) — foydalanuvçi bosmasdan qayerga ketişini köradi. Xulq hover kartaniki (data-fx-hovercard: keçikiş, Esc, karta ustida yopilmaydi); bu komponent faqat körinişni beradi: class="fx-hovercard fx-linkpreview". Rasm — oldindan tayyorlangan OG rasm (1,91:1).
Yangi tariflar haqida narxlar sahifasida yozilgan, ulaniş böyiça — hujjatlarda.
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(230%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22314%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22171%22%20font-family%3D%22sans-serif%22%20font-size%3D%2235%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3ETariflar%3C%2Ftext%3E%3C%2Fsvg%3E)
Tariflar — oylik va yillik obuna
Start, Biznes va Korporativ tariflar: 3 foydalanuvçidan boşlab, yillik tölovda 2 oy bepul.
savdo.uz/tariflar%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(180%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22314%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22171%22%20font-family%3D%22sans-serif%22%20font-size%3D%2235%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EHujjatlar%3C%2Ftext%3E%3C%2Fsvg%3E)
Telegram botni CRM'ga ulaş
5 daqiqalik qöllanma: bot tokeni, webhook va arizalarni avtomatik taqsimlaş.
docs.savdo.uzVariantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | sm tavsifsiz, torroq | md |
Anatomiya
- root
.fx-linkpreviewşart - shot
.fx-linkpreview__shotixtiyoriy - body
.fx-linkpreview__bodyixtiyoriy - title
.fx-linkpreview__titleşart - desc
.fx-linkpreview__descixtiyoriy - domain
.fx-linkpreview__domainixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab (fokus) | ~300 ms dan keyin oldindan köriş oçiladi |
| Esc | Yopadi |
Havolaga aria-describedby (karta matni) avtomatik; siçqonça (~500 ms) va klaviatura fokusida (~300 ms) oçiladi, Esc yopadi, fokus havolada qoladi. Rasm bezak (alt=""), ma'no sarlavha va domenda.
Naqş: WAI-ARIA APG tooltip
Kod
AI uçun: qaçon işlatiladi
- Maqola, yordam markazi va çatdagi taşqi havolalar.
- Changelog yoki e'lonlarda boşqa sahifaga işora.
npx foxui add linkpreview
<p style="max-inline-size:40rem">Yangi tariflar haqida <a class="fx-link" href="#" data-fx-hovercard="lp-tarif">narxlar sahifasida</a> yozilgan, ulaniş böyiça — <a class="fx-link" href="#" data-fx-hovercard="lp-docs">hujjatlar</a>da.</p> <div class="fx-hovercard fx-linkpreview" id="lp-tarif" popover="manual"> <img class="fx-linkpreview__shot" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20314%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(200%2070%25%2072%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(230%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22314%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22171%22%20font-family%3D%22sans-serif%22%20font-size%3D%2235%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3ETariflar%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="600" height="314"> <div class="fx-linkpreview__body"><p class="fx-linkpreview__title">Tariflar — oylik va yillik obuna</p><p class="fx-linkpreview__desc">Start, Biznes va Korporativ tariflar: 3 foydalanuvçidan boşlab, yillik tölovda 2 oy bepul.</p><span class="fx-linkpreview__domain"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg>savdo.uz/tariflar</span></div> </div> <div class="fx-hovercard fx-linkpreview" id="lp-docs" popover="manual"> <img class="fx-linkpreview__shot" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20314%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(150%2070%25%2072%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(180%2060%25%2042%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22314%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22300%22%20y%3D%22171%22%20font-family%3D%22sans-serif%22%20font-size%3D%2235%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EHujjatlar%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="600" height="314"> <div class="fx-linkpreview__body"><p class="fx-linkpreview__title">Telegram botni CRM'ga ulaş</p><p class="fx-linkpreview__desc">5 daqiqalik qöllanma: bot tokeni, webhook va arizalarni avtomatik taqsimlaş.</p><span class="fx-linkpreview__domain"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg>docs.savdo.uz</span></div> </div>
Tokenlar: --fx-bg-muted --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-line-height-snug --fx-radius-control --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-8 --fx-text-secondary --fx-text-tertiary