Meter

사용한 디스크, 채워진 좌석, 소진한 할당량처럼 미리 정해진 범위 안에서 어떤 양이 얼마나 되는지를 보여 줍니다. 프로그레스 바처럼 보이지만 아닙니다. 값은 이미 알려져 있고, 그 값이 어디에 놓였는지가 곧 의미입니다.

import { Meter } from 'neba';

<Meter value={38} label="Storage" showValue />;

Props

Prop	타입	기본값	설명
value *	number	—	측정된 양. 필수이며, 이것이 ProgressLinear와의 차이입니다. meter는 이미 알려진 양을 보고하므로 미정 상태가 없습니다
min	number	0	범위의 시작
max	number	100	범위의 끝
thresholds	readonly NebaThreshold[]	—	막대의 색이 바뀌는 지점들. { from, color } 배열이며 from이 작은 것부터 나열합니다. 값이 도달한 마지막 항목이 이기고, 아무 것에도 도달하지 못했다면 color가 그대로 쓰입니다
label	ReactNode	—	무엇을 재고 있는지에 대한 이름. 값과 함께 읽힙니다
showValue	boolean	false	막대 옆에 값을 글자로 씁니다. format이 없으면 범위에 대한 비율입니다
format	Intl.NumberFormatOptions	—	값을 쓰는 방식. meter는 대개 실제 단위를 가지므로 프로그레스 바보다 자주 쓰입니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	홈의 두께. ProgressLinear과 같은 사다리입니다
thickness	number	—	홈의 두께를 픽셀로 직접 정합니다. ProgressLinear이 받는 것과 같은 prop입니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	threshold에 도달하기 전 막대가 띠는 색 역할

<div>의 기본 속성은 루트로 전달됩니다. 위 표에서 다르게 정의한 color와 children만 제외됩니다.

value는 필수이며, 이것이 ProgressLinear와의 차이입니다. 프로그레스 바는 시간에 대한 것이라 값이 아예 없을 수도 있고 스스로 움직이는 것이 전제입니다. Meter는 양에 대한 것이라, 측정 대상이 변하지 않는 한 움직이지 않습니다.

NebaThreshold

Prop	타입	기본값	설명
from *	number	—	이 색 계열이 적용되기 시작하는 값. meter 자신의 단위로 씁니다
color * 공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	—	그 지점부터 막대가 띠는 색

예시

thresholds

막대의 색이 바뀌는 지점입니다. 각 항목은 스케일 위의 한 점과 그 지점부터 막대가 띠는 색 계열이며, 값이 도달한 마지막 항목이 이깁니다. 아무 것에도 도달하지 못했다면 color가 그대로 쓰입니다. from이 작은 것부터 나열하세요. 주어진 순서대로 읽습니다.

import { useState } from 'react';
import { Meter, Slider } from 'neba';

const thresholds = [
  { from: 70, color: 'warning' },
  { from: 90, color: 'danger' }
] as const;

export default function MeterThresholds() {
  const [used, setUsed] = useState(45);

  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Meter value={used} label="Disk used" showValue thresholds={thresholds} />
      <Slider
        aria-label="Disk used"
        value={used}
        onValueChange={(value) => setUsed(value as number)}
      />
    </div>
  );
}

min · max · format

showValue는 라벨 옆에 값을 씁니다. format이 없으면 min…max에 대한 비율이고, 있으면 Intl.NumberFormat을 거친 숫자 그 자체입니다. Meter는 대개 실제 단위를 가지므로 이쪽이 일반적인 경우입니다.

import { Meter } from 'neba';

export default function MeterValues() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <Meter value={12} min={0} max={20} label="Members" showValue />
      <Meter
        value={12}
        min={0}
        max={20}
        label="Members"
        showValue
        format={{ style: 'unit', unit: 'gigabyte', unitDisplay: 'short' }}
      />
      <Meter
        value={4.8}
        min={0}
        max={16}
        label="Memory"
        showValue
        format={{ maximumFractionDigits: 1, style: 'unit', unit: 'gigabyte' }}
      />
    </div>
  );
}

size

size는 홈의 두께이며 ProgressLinear과 같은 사다리를 씁니다. 한 페이지에 둘이 함께 있어도 서로 어긋나지 않습니다.

import { Meter } from 'neba';

const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function MeterSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      {sizes.map((size) => (
        <Meter key={size} size={size} value={62} label={size} showValue />
      ))}
    </div>
  );
}

thickness

ProgressLinear이 받는 것과 같은 prop이고, 이유도 같습니다. size는 사다리 위 한 단계, thickness는 픽셀 값입니다.

접근성

• 값과 범위 속성을 가진 role="meter"로 렌더링됩니다.
• label이 접근 가능한 이름이 되고, aria-valuetext는 화면에 찍히는 값과 같은 말을 합니다.
• 색이 유일한 전달 수단이 되지 않습니다. threshold를 넘은 막대는 길이도 더 길고, 표시된 값이 숫자를 말합니다.