MaskedValue

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

MaskedValue.tsx

Storybook

MaskedValue · Playground

MaskedValue, @bigbang/ui paketindedir.

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

<MaskedValue value={key} label="Erişim anahtarı" copyable hideAfter={30000} />;

Yalnızca metni maskelemek için maskValue(value, options) yardımcısı da dışa aktarılır.

Özellikler

visibleStart

Açıklama

Başta görünür kalan karakter sayısı.

Tür

number

visibleEnd

Açıklama

Sonda görünür kalan karakter sayısı.

Tür

number

maskLength

Açıklama

Sabit maske karakteri sayısı; değerin uzunluğu görünmez.

Tür

number

maskChar

Açıklama

Maske karakteri.

Tür

string

valueZorunlu

Açıklama

Değerin tamamı. Maskeliyken sayfada bulunmaz; yalnızca görünür uçlar bulunur.

Tür

string

label

Açıklama

Değeri ekran okuyucular için adlandırır, örneğin 'Erişim anahtarı'; kök öğe adlandırılmış bir grup olur.

Tür

string

revealed

Açıklama

Değerin tamamını gösterir (denetimli).

Tür

boolean

defaultRevealed

Açıklama

Değerin tamamını başlangıçta gösterir (denetimsiz).

Tür

boolean

Varsayılan

false

onRevealedChange

Açıklama

Düğme ya da hideAfter değeri açtığında veya gizlediğinde yeni durumla çağrılır.

Tür

(revealed: boolean) => void

hideAfter

Açıklama

Açılan değerin kaç milisaniye sonra yeniden maskeleneceği.

Tür

number

copyable

Açıklama

Maskeliyken bile değerin tamamını kopyalayan bir Copy düğmesi ekler.

Tür

boolean

Varsayılan

false

revealable

Açıklama

Yalnızca maskeli gösterilecek değerler için göster düğmesini gizler.

Tür

boolean

Varsayılan

true

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="masked-value" ve açıkken data-revealed.
• data-part: value, toggle.