Meter

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

메모리나 저장소 사용량처럼 알려진 범위 내 측정값을 표시합니다. 값을 단위와 함께 보여주세요. low, high, optimum은 네이티브 meter 요소처럼 범위를 나눕니다. 가장 좋은 범위에서는 채움 색이 그대로이고, 한 범위 떨어지면 caution, 두 범위 떨어지면 danger가 됩니다. Target은 트랙을 가로지르는 목표를, Tick은 트랙 아래의 눈금을 표시하고, 둘 다 미터의 설명에 이름이 들어갑니다. Meter.Arc는 카드의 지표처럼 미터를 바늘이 있는 반원으로 그리며 Track 자리에 둡니다. low, high, optimum이 반원을 구간으로 나누고, 임계마다 작은 틈을 두며 상태 표식 색으로 그립니다. 그리기에 너무 좁은 구간은 점이 됩니다.

작업 완료나 길이를 모르는 로딩에는 Meter가 아닌 Progress를 사용하세요. 색만으로 위험을 판단하게 하지 마세요. 텍스트로도 위험을 설명하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root → Label + Value + Track(Indicator + Target? + Tick*) | Arc (svg, aria-hidden: a zone per range + needle)

키보드와 접근성

Meter는 읽기 전용 측정이며 Tab 순서에 없습니다. 측정 대상과 단위를 Label과 aria-valuetext에 설명하세요. RTL에서도 채움은 논리적 시작에서 자랍니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Meter } from '@surflane/ui'

<Meter.Root value={30} min={0} max={64} aria-valuetext='30 GiB of 64 GiB'>
  <Meter.Label>Memory allocation</Meter.Label>
  <Meter.Value>{(_, value) => `${value} / 64 GiB`}</Meter.Value>
  <Meter.Track>
    <Meter.Indicator />
  </Meter.Track>
</Meter.Root>

// Lower is better: past 40 GiB the fill turns caution, past 56 danger.
<Meter.Root value={46} max={64} low={40} high={56} optimum={0}>…</Meter.Root>

<Meter.Root value={34} aria-valuetext='34%'>
  <Meter.Label>Bonds in the portfolio</Meter.Label>
  <Meter.Track>
    <Meter.Indicator />
    <Meter.Target value={40} label='Target 40%' />
    <Meter.Tick value={50} />
  </Meter.Track>
</Meter.Root>

// A half circle in its ranges: lower is calmer.
<Meter.Root value={17.2} min={10} max={40} low={20} high={30} optimum={10} aria-valuetext='17.2, calm'>
  <Meter.Label>VIX volatility index</Meter.Label>
  <Meter.Value>{(_, value) => value.toFixed(1)}</Meter.Value>
  <Meter.Arc />
</Meter.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰