Bileşenler

MaskedValue

Hassas bir değeri maskeli gösteren, bir düğmeyle açan ve isteğe bağlı olarak kopyalatan gösterim.

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ç

Varsayılan

Son dört karakter görünür; göz düğmesi değeri açar, Copy değerin tamamını kopyalar.

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

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

Sabit uzunluk ve otomatik gizleme

maskLength değerin uzunluğunu saklar; hideAfter açılan değeri beş saniye sonra yeniden maskeler.

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

export default function Fixed() {
  return (
    <MaskedValue value="7Q2K-9X4M-1B6C" label="Kurtarma kodu" visibleStart={2} visibleEnd={2} maskLength={8} hideAfter={5000} />
  );
}

Açık ve koyu mod

Metin ve düğme varsayılan renkleri kullanır.

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

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