Tinyrack

Meter

알려진 범위 안의 단일 측정값을 표시해요.

핵심 속성

이 Tinyrack 래퍼는 Base UI 동작, React 19 ref, 네이티브 props, 이벤트, render 규약을 그대로 유지해요. 값을 서식화하기 전에 min과 max 범위로 제한하므로 표시 값, 채움, ARIA 값이 서로 일치해요. 플레이그라운드는 제한된 범위, 로케일별 숫자 서식, 모든 명시적 의미 변형을 다루며 재설정하면 문서의 기본값으로 돌아가요.

설치

pnpm add @tinyrack/ui

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

스타일

@import '@tinyrack/ui/components/meter.css';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

가져오기

import { TRMeter } from '@tinyrack/ui/components/meter';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

플레이그라운드

사용법

서식화된 스토리지 범위 고유 링크

예시

의미 변형 고유 링크

변형은 애플리케이션의 의미를 전달하며 숫자 값에서 임계값을 추론하지 않아요.

사용자 정의 범위와 형식화된 값 고유 링크

0이 아닌 최솟값, 단위 형식, 사람이 읽을 수 있는 값 설명이 같은 Meter 규약에 연결돼요.

API

  • TRMeter.Root에는 value가 필요하며 기본값은 min={0}, max={100}, variant="neutral"이에요. 네이티브 div props, render, React 19 ref를 전달해요. 범위를 벗어나거나 NaN인 값은 서식화 전에 제한돼요.
  • TRMeter.Label은 접근 가능한 이름을 제공해요. 표시 라벨이 적절하지 않다면 Root에 aria-label을 지정하세요.
  • TRMeter.Value는 로케일에 맞춘 값을 표시해요. 렌더 함수는 서식화된 값과 숫자 값을 받아요.
  • TRMeter.Track은 TRMeter.Indicator를 포함해요. Indicator 너비는 min과 max 사이에서 정규화된 위치를 나타내요.
  • 표시 단위에는 format과 locale을 사용하고, 보조 기술에 숫자의 맥락을 제공하려면 getAriaValueText를 사용하세요. 의미 변형은 명시적이며 Tinyrack은 낮음/높음 임계값을 추론하지 않아요.
CSS 토큰기본값용도
--tr-meter-min-width--tinyrack-measure-lg컨테이너 너비를 넘지 않는 meter 최소 너비
--tr-meter-track-size--tinyrack-space-smTrack과 Indicator 두께
--tr-meter-track-background--tinyrack-control-trackTrack 색상
--tr-meter-indicator-background의미 변형 색상Indicator 색상 재정의