Bileşenler

Copy

Bir değeri panoya kopyalayan, onay işaretiyle gösterip duyuran düğme.

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ç

Varyantlar

icon yalnızca simgedir ve ipucu gösterir; button metin taşır; inline değeri ve ardından simge düğmesini gösterir.

REF-2048-7731

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

export default function Default() {
  return (
    <div className="flex flex-wrap items-center gap-lg">
      <Copy value="REF-2048-7731" label="Başvuru kodunu kopyala" copiedLabel="Başvuru kodu kopyalandı" />
      <Copy value="REF-2048-7731" variant="button" />
      <Copy value="REF-2048-7731" variant="inline" label="Başvuru kodunu kopyala" copiedLabel="Başvuru kodu kopyalandı" />
    </div>
  );
}

Satır içi

children gösterilen metni değiştirir; panoya her zaman value yazılır.

Başvuru kodu: REF-2048-7731
Davet bağlantısı: example.com/invite/7Q2K

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

export default function Inline() {
  return (
    <dl className="flex flex-col gap-md">
      <div className="flex flex-col gap-xxs">
        <dt className="type-label-sm text-fg-subtle">Başvuru kodu</dt>
        <dd>
          <Copy value="REF-2048-7731" variant="inline" label="Başvuru kodunu kopyala" copiedLabel="Başvuru kodu kopyalandı" />
        </dd>
      </div>
      <div className="flex flex-col gap-xxs">
        <dt className="type-label-sm text-fg-subtle">Davet bağlantısı</dt>
        <dd>
          <Copy value="https://example.com/invite/7Q2K" variant="inline">
            example.com/invite/7Q2K
          </Copy>
        </dd>
      </div>
    </dl>
  );
}

Açık ve koyu mod

Düğme renkleri Button ile aynıdır.

REF-2048-7731

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

export default function Default() {
  return (
    <div className="flex flex-wrap items-center gap-lg">
      <Copy value="REF-2048-7731" label="Başvuru kodunu kopyala" copiedLabel="Başvuru kodu kopyalandı" />
      <Copy value="REF-2048-7731" variant="button" />
      <Copy value="REF-2048-7731" variant="inline" label="Başvuru kodunu kopyala" copiedLabel="Başvuru kodu kopyalandı" />
    </div>
  );
}