MaskedValue

Ne zaman kullanılır

Ekranda görünmesi gerekmeyen ama zaman zaman okunan değerler için: erişim anahtarı, kurtarma kodu, gizli bağlantı.

Ne zaman kullanılmaz

• Değer girmek için: Şifre ve gizli giriş alanlarında PasswordInput kullanın.
• Hiç gösterilmemesi gereken değerler için: Değer sayfaya hiç gelmemelidir; MaskedValue tarayıcıya gelen değeri yalnızca gözden saklar.

Anatomi

••••••••••7731Sonu 7731 olan gizli değer

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <MaskedValue value="BB7Q2K9X4M7731" label="Erişim anahtarı" copyable />
  );
}

1. Değer: Maskeli hâlde yalnızca görünür uçlar; açıkken değerin tamamı.
2. Göster düğmesi: Göz simgesi; basılı hâli değerin açık olduğunu söyler.
3. Copy (isteğe bağlı): Değerin tamamını kopyalar.

Davranış

• Maskeli değer sayfa metninde bulunmaz; ekran okuyucu yalnızca “Sonu 7731 olan gizli değer” duyar.
• Göster düğmesi değeri açar ve kapatır; metin yumuşakça geçiş yapar.
• hideAfter verilirse açılan değer o süre sonra yeniden maskelenir.
• revealed ile denetlenebilir; örneğin değeri açmadan önce kimlik doğrulaması isteyebilirsiniz.

Yönergeler

• label ile değeri adlandırın; düğme adı genel kalır (“Değeri göster”).
• Değerin uzunluğu da gizliyse maskLength verin.
• Değeri açmak denetim kaydı gerektiriyorsa onRevealedChange ile kaydedin.

İçerik

Anahtar	TR	EN
ui.masked-value.show	Değeri göster	Show value
ui.masked-value.hidden	Sonu {end} olan gizli değer	Hidden value ending in {end}
ui.masked-value.hidden-all	Gizli değer	Hidden value

İlgili bileşenler

• Copy: Yalnızca kopyalama.
• PasswordInput: Gizli değer girişi.