Navigatsiya · molecule
Havola
Boşqa sahifa yoki manzilga ötadigan matn. Brend rangida, tagi çizilgan; ustiga borilganda çiziq yöqoladi. Kengaytma: target=_blank / data-external ↗ ikoni (matnda “yangi oynada” bölsin), data-variant=more (“Hammasi →”), data-visited (ixtiyoriy), bosmada manzil çiqadi. Harakat (4.37): data-underline="grow" — tinç holatda xira çiziq, ustiga borilganda yoki fokusda töliq çiziq boşidan oxiriga çiziladi va çiqişda oxiriga qarab yiğiladi (RTL'da öngdan); data-weight="bold" — qalinroq çiziq. Menyu, footer va maqola içida işlaydi; harakat kamaytirilsa çiziq darhol paydo böladi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-tone | brandmuted | brand |
data-variant | more | — |
data-underline | grow hover/fokusda çiziq çiziladi (4.37) | — |
data-weight | bold qalin çiziq (faqat grow bilan) | — |
Anatomiya
- root
.fx-linkşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter | Ötadi |
Havola matni özi ma'noli bölsin («bu yerga bosing» emas).
Naqş: WAI-ARIA APG link · rol link
Kod
AI uçun: qaçon işlatiladi
- Boşqa sahifaga yoki manzilga ötiş matn içida.
- Amal bajariş →
button - Amal uçun havola işlatmang (saqlaş, öçiriş) — tugma.
- data-underline="grow"ni uzun abzatsdagi har havolaga qöymang — menyu, footer va kartalar uçun.
npx foxui add link
<p>Batafsil: <a class="fx-link" href="#">foydalaniş şartlari</a>.</p> <p><a class="fx-link" data-tone="muted" href="#">Yordam markazi</a></p> <a class="fx-link" href="https://example.uz" target="_blank" rel="noopener">Hujjatlar<span class="fx-sr-only"> (yangi oynada)</span></a> <a class="fx-link" data-variant="more" href="#">Hammasi</a> <nav aria-label="Pastki menyu" style="display:flex;flex-wrap:wrap;gap:var(--fx-space-5);margin-block-start:var(--fx-space-4)"><a class="fx-link" data-underline="grow" data-tone="muted" href="#">Narxlar</a><a class="fx-link" data-underline="grow" data-tone="muted" href="#">Hujjatlar</a><a class="fx-link" data-underline="grow" data-tone="muted" href="#">Nima yangi</a><a class="fx-link" data-underline="grow" data-weight="bold" href="#">Boğlaniş</a></nav>
Tokenlar: --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-emphasized --fx-ease-enter --fx-ease-standard --fx-font-weight-medium --fx-motion-base --fx-motion-fast --fx-motion-slow --fx-radius-badge --fx-space-1 --fx-text-brand --fx-text-secondary