Meter

설치

pnpm dlx ply-ui add meter

공통 설치 설정을 먼저 적용합니다.

사용법

value/min/max로 측정 범위를 연결합니다.

업로드처럼 작업 진행률이라면 Progress를 사용합니다.

구성

구성 요소	역할
`Root`	측정값과 `min`, `max` 범위를 관리합니다.
`Label / Value`	측정 대상의 이름과 현재 수치입니다.
`Track / Indicator`	전체 범위와 측정값의 비율을 표시합니다.

구현 코드

components/ui/meter.tsx

meter.tsx

"use client";

import type { ComponentProps } from "react";
import { Meter as Primitive } from "@base-ui/react/meter";
import { withClassName } from "../../lib/cx";
import "./meter.css";

// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
function MeterRoot({
  className,
  ...props
}: ComponentProps<typeof Primitive.Root>) {
  return (
    <Primitive.Root
      {...props}
      className={withClassName("rbx-meter", className)}
    />
  );
}

function MeterLabel({
  className,
  ...props
}: ComponentProps<typeof Primitive.Label>) {
  return (
    <Primitive.Label
      {...props}
      className={withClassName("rbx-label", className)}
    />
  );
}

function MeterValue({
  className,
  ...props
}: ComponentProps<typeof Primitive.Value>) {
  return (
    <Primitive.Value
      {...props}
      className={withClassName("rbx-description", className)}
    />
  );
}

function MeterTrack({
  className,
  ...props
}: ComponentProps<typeof Primitive.Track>) {
  return (
    <Primitive.Track
      {...props}
      className={withClassName("rbx-progress-track", className)}
    />
  );
}

function MeterIndicator({
  className,
  ...props
}: ComponentProps<typeof Primitive.Indicator>) {
  return (
    <Primitive.Indicator
      {...props}
      className={withClassName("rbx-progress-indicator", className)}
    />
  );
}

// Root/Portal 등 스타일 없는 파트와 제네릭 API는 원본을 그대로 보존합니다.
export const Meter = {
  ...Primitive,
  Root: MeterRoot,
  Label: MeterLabel,
  Value: MeterValue,
  Track: MeterTrack,
  Indicator: MeterIndicator,
};

components/ui/meter.css

meter.css

@import "./progress.css";
/* Meter: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-meter {
  display: grid;
  gap: 8px;
  width: 100%;
}

설치

사용법

구성

구현 코드

목차