Copy

Ne zaman kullanılır

Kullanıcının başka bir yere yapıştıracağı değerler için: başvuru kodu, kimlik, bağlantı, anahtar adı.

Ne zaman kullanılmaz

• Uzun metinler için: Paragrafları kopyalatmayın; seçilebilir metin yeterlidir.
• Gizli değerler için tek başına: Önce MaskedValue ile gösterin, kopyalamayı ayrıca isteyin.

Anatomi

KopyalaREF-2048-7731

AçıkKoyu

Kodu kopyala

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>
  );
}

1. Değer: Yalnızca inline varyantında; uzun değerler satır kırar.
2. Düğme: Kopyala simgesi; kopyalandıktan sonra onay işareti.
3. İpucu: “Kopyala”, ardından “Kopyalandı”.

Davranış

• Tıklama değeri panoya yazar, düğmede onay işareti belirir ve ekran okuyucu “Kopyalandı” der.
• İki saniye sonra (resetAfter) düğme eski haline döner.
• Tarayıcı izin vermezse “Kopyalanamadı” duyurulur ve onError çağrılır.
• Güvenli olmayan sayfalarda Clipboard API yoksa gizli bir metin alanıyla kopyalanır; odak düğmede kalır.

Yönergeler

• Ne kopyalandığını adda söyleyin: “Başvuru kodunu kopyala”.
• Bir sayfada aynı değer için tek bir Copy kullanın.
• Kopyalanan metni gösterilenle aynı tutun; farklıysa (children) kullanıcıya açıkça belirtin.

İçerik

Anahtar	TR	EN
ui.copy.label	Kopyala	Copy
ui.copy.copied	Kopyalandı	Copied
ui.copy.failed	Kopyalanamadı	Could not copy

İlgili bileşenler

• IconButton: Başka simge işlemleri.
• MaskedValue: Gizlenmiş değerler.