Bileşenler

Link

Bir sayfaya ya da adrese giden bağlantı; metnin içinde ya da kendi satırında durur.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { Link } from '@bigbang/ui';
Kaynak: Link.tsx
Storybook: Link · Playground

Link, @bigbang/ui paketindedir.

import { Link } from '@bigbang/ui';

<Link href="/kosullar">Kullanım koşulları</Link>;
<Link href="https://example.com" external>Belgeler</Link>;
<Link href="/liste" variant="standalone">Tümünü göster</Link>;

Özellikler

hrefZorunlu

Açıklama: Hedef: göreli yol ya da https:, http:, mailto:, tel: adresi. javascript: gibi diğer şemalar kaldırılır; bağlantı hedefsiz çizilir.
Tür: string

external

Açıklama: Hedefi rel="noopener noreferrer" ile yeni sekmede açar; dış bağlantı ikonu ve görünmeyen "yeni sekmede açılır" ya da "opens in a new tab" metni ekler.
Tür: boolean
Varsayılan: false

variant

Açıklama: inline akan metnin içindedir ve hep altı çizilidir; standalone kendi satırında durur ("Tümünü göster") ve üzerine gelince altı çizilir.
Tür: 'inline' | 'standalone'
Varsayılan: 'inline'

size

Açıklama: Bağımsız bağlantının metin boyutu: 12 ya da 14 px. Satır içi bağlantı çevresindeki metnin boyutunu alır.
Tür: 'sm' | 'md'
Varsayılan: 'md'

render

Açıklama: Yönlendiricinin bağlantı bileşenini çizer, örneğin <RouterLink to="..." />; stiller ve adres denetimi yine uygulanır.
Tür: ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Açıklama: Yalnızca yerleşim için: dış boşluk ve hiza. Rengi değiştirmek için kullanmayın.
Tür: string

childrenZorunlu

Açıklama: Bağlantı metni. Nereye gittiğini söyleyin ("Kullanım koşulları"); "buraya tıklayın" yazmayın.
Tür: ReactNode

download, hrefLang, onClick gibi diğer <a> öznitelikleri iletilir.

Veri öznitelikleri

data-component="link": kök öğe üzerinde.
data-external: external verildiğinde.

Yönlendirici ile

<Link href="/liste" render={<RouterLink to="/liste" />}>
  Tümünü göster
</Link>