데이터와 피드백@neumorphism-ui/meter

Meter

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

@neumorphism-ui/meter

Registry JSON

미리보기

저장 공간

64 GB / 100 GB

설치

npx shadcn@latest add @neumorphism-ui/meter

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

"use client";

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

Example

export default function Example() {

  return (<Meter value={64} className="w-full max-w-sm"><div className="flex justify-between gap-4"><MeterLabel>{"저장 공간"}</MeterLabel><MeterValue /></div><MeterTrack><MeterIndicator /></MeterTrack><p className="text-xs text-[var(--muted-foreground)]">64 GB / 100 GB</p></Meter>);
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Meter`	`value`	`number`	`—`	범위 안의 현재 측정값입니다.
`Meter`	`min / max`	`number`	`—`	허용하는 최솟값과 최댓값입니다.
`Meter`	`format`	`Intl.NumberFormatOptions`	`—`	숫자의 지역별 표시 형식을 설정합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성