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

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Satır içi

variant="inline" akan metnin içindedir ve hep altı çizilidir; böylece bağlantı yalnızca renkle ayırt edilmez.

Ayrıntılar içinKullanım koşullarısayfasına bakın.

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

export default function Inline() {
  return (
    <p className="type-body-md text-fg-default">
      Ayrıntılar için
      <Link href="#">Kullanım koşulları</Link>
       sayfasına bakın.
    </p>
  );
}

Bağımsız

variant="standalone" kendi satırında durur, label yazı stilini kullanır ve üzerine gelince altı çizilir. size 14 ya da 12 px verir.

Tümünü göster Tümünü göster

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

export default function Standalone() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Link href="#" variant="standalone">
        Tümünü göster
      </Link>
      <Link href="#" variant="standalone" size="sm">
        Tümünü göster
      </Link>
    </div>
  );
}

Dış bağlantı

external, hedefi yeni sekmede açar, rel="noopener noreferrer" ekler, dış bağlantı ikonu ve görünmeyen “(yeni sekmede açılır)” metni koyar.

Belgeler Belgeler

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

export default function External() {
  return (
    <>
      <div className="flex flex-col items-start gap-md">
        <Link href="https://example.com" external>
          Belgeler
        </Link>
        <Link href="https://example.com" external variant="standalone">
          Belgeler
        </Link>
      </div>
    </>
  );
}

Açık ve koyu mod

Renk color-text-link ve color-text-link-hovered token’larından gelir.

Ayrıntılar içinKullanım koşullarısayfasına bakın.

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

export default function Inline() {
  return (
    <p className="type-body-md text-fg-default">
      Ayrıntılar için
      <Link href="#">Kullanım koşulları</Link>
       sayfasına bakın.
    </p>
  );
}