Neumorphism UI

Meter

저장 공간 사용량처럼 범위가 정해진 측정값을 보여 줄 때 사용합니다. 진행 중인 작업의 완료 정도에는 Progress를 사용하세요.

미리보기

저장 공간 사용량

100 GB 중 64 GB 사용을 이름, 값, 채워진 트랙으로 표시합니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/meter

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

값과 범위를 설정하고 MeterLabel, MeterValue, MeterTrack, MeterIndicator를 조합하세요. 퍼센트만으로 의미가 부족하면 단위와 맥락을 추가합니다.

"use client";

import { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "@/components/ui/meter";

export default function Example() {
  return (
    <Meter value={64} max={100}>
      <MeterLabel>Storage used</MeterLabel>
      <MeterValue />
      <MeterTrack><MeterIndicator /></MeterTrack>
    </Meter>
  );
}

API 레퍼런스

알려진 범위 안에서 사용량을 나타내는 측정 막대. 작업 진행률에는 Progress를 사용하세요. MeterLabel과 숫자 표시를 함께 제공하세요.

컴포넌트속성타입기본값설명
Metervaluenumber—범위 안의 현재 측정값입니다.
Metermin / maxnumber—허용하는 최솟값과 최댓값입니다.
MeterformatIntl.NumberFormatOptions—숫자의 지역별 표시 형식을 설정합니다.

접근성

  • 01

    작업 진행률에는 Progress를 사용하세요. MeterLabel과 숫자 표시를 함께 제공하세요.

  • 02

    render나 className을 바꿀 때 라벨 연결과 포커스 표시를 유지하세요.