Meter

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Meter.tsx

Storybook

Meter · Playground

Meter, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

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

<Meter label="Depolama alanı" value={64} />;

Özellikler

labelZorunlu

Açıklama

Neyin ölçüldüğü, örneğin "Depolama alanı". Ölçerin adıdır.

Tür

ReactNode

labelHidden

Açıklama

Etiketi görsel olarak gizler; ekran okuyucu için ölçerin adı olarak kalır. Çevredeki metin neyin ölçüldüğünü zaten söylüyorsa kullanın.

Tür

boolean

Varsayılan

false

valueZorunlu

Açıklama

Ölçülen değer, min ile max arasında. Aralık dışındaki değer en yakın uçta çizilir.

Tür

number

min

Açıklama

Aralığın başlangıcı.

Tür

number

Varsayılan

0

max

Açıklama

Aralığın sonu.

Tür

number

Varsayılan

100

format

Açıklama

Gösterilen ve okunan değer için Intl.NumberFormat seçenekleri, örneğin { style: 'unit', unit: 'gigabyte' }. Verilmezse değer aralığın yüzdesi olarak gösterilir.

Tür

NumberFormatOptions

showValue

Açıklama

Biçimlendirilmiş değeri etiketin yanında gösterir. Ekran okuyucu değer metnini her durumda okur.

Tür

boolean

Varsayılan

true

valueText

Açıklama

Ekran okuyucunun değer için okuduğu metni değiştirir, örneğin "50 GB'ın 12 GB'ı kullanıldı". tone="auto" ile eklenen kelimenin yerine de geçer.

Tür

string

description

Açıklama

Çubuğun altında yardım metni; aria-describedby ile ölçere bağlanır.

Tür

ReactNode

size

Açıklama

İz yüksekliği: 4 ya da 8 px. Yoğun satırlarda ve tablolarda sm kullanın.

Tür

'sm' | 'md'

Varsayılan

'md'

tone

Açıklama

Dolgu rengi. auto, low, high ve optimum ile HTML meter bölgelerini izler ve değer metnine bir kelime ekler; üçü de yoksa marka rengidir. Diğer tonlar sabittir.

Tür

'auto' | ResolvedTone

Varsayılan

'auto'

low

Açıklama

Düşük bölgenin üst ucu (dahil), tone="auto" için. Varsayılan min.

Tür

number

high

Açıklama

Yüksek bölgenin alt ucu (dahil), tone="auto" için. Varsayılan max.

Tür

number

optimum

Açıklama

En iyi değer, tone="auto" için. Onu içeren bölge iyi, komşusu uyarı, karşı uçtaki tehlikedir. Varsayılan aralığın ortası.

Tür

number

className

Açıklama

Yalnızca yerleşim için: kenar boşluğu ve genişlik. Renk ya da yükseklik değiştirmek için kullanmayın.

Tür

string

Bunların dışında yerel öznitelikler (id, aria-*) kök öğeye iletilir.

Veri öznitelikleri

• data-component="meter", data-size, data-tone: kök öğede. data-tone auto’nun çözdüğü rengi verir.
• data-part: label, value, track, indicator, description.

Birim ve eşik

<Meter
  label="Kota kullanımı"
  value={32}
  max={50}
  format={{ style: 'unit', unit: 'gigabyte' }}
  low={25}
  high={40}
  optimum={0}
/>