Meter

정확한 범위 값을 품질 기준과 함께 보여 줍니다.

용법

임계 구간

명시한 기준값으로 현재 값을 최적·준최적·비최적 구간으로 분류합니다.

Storage health명시한 기준값으로 현재 값을 최적·준최적·비최적 구간으로 분류합니다.82 GB used

<!-- Meter / Threshold Zones -->
<script setup lang="ts">
import { MeterRoot, MeterTrack, MeterIndicator, MeterValueText } from '@sectile/vue/meter'
</script>

<template>
  <MeterRoot value="82" min="0" max="100" low="35" high="75" optimum="20" label="Storage health" v-slot="{ zone }">
    <MeterTrack><MeterIndicator /></MeterTrack>
    <MeterValueText />
    <span aria-hidden="true">{{ zone }}</span>
  </MeterRoot>
</template>

정확한 소수

입력한 십진수 0.1을 정확한 값으로 유지합니다.

Storage health입력한 십진수 0.1을 정확한 값으로 유지합니다.0.1 GB used

<!-- Meter / Exact Decimal -->
<script setup lang="ts">
import { MeterRoot, MeterTrack, MeterIndicator, MeterValueText } from '@sectile/vue/meter'
</script>

<template>
  <MeterRoot value="0.1" min="0" max="0.3" low="0.1" high="0.2" optimum="0.15" label="Storage health" v-slot="{ zone }">
    <MeterTrack><MeterIndicator /></MeterTrack>
    <MeterValueText />
    <span aria-hidden="true">{{ zone }}</span>
  </MeterRoot>
</template>

같은 최솟값과 최댓값

최솟값과 최댓값이 같을 때 유일하게 유효한 값을 표시합니다.

Storage health최솟값과 최댓값이 같을 때 유일하게 유효한 값을 표시합니다.7 GB used

<!-- Meter / Degenerate Range -->
<script setup lang="ts">
import { MeterRoot, MeterTrack, MeterIndicator, MeterValueText } from '@sectile/vue/meter'
</script>

<template>
  <MeterRoot value="7" min="7" max="7" label="Storage health" v-slot="{ zone }">
    <MeterTrack><MeterIndicator /></MeterTrack>
    <MeterValueText />
    <span aria-hidden="true">{{ zone }}</span>
  </MeterRoot>
</template>

API

Vue 패키지: @sectile/vue/meter

컴포넌트

MeterRoot
MeterTrack
MeterIndicator
MeterValueText

Props

`MeterRootProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
formatValue: 타입MeterValueFormatter기본값undefined
값을 화면에 표시할 문자열로 바꾸는 함수입니다.
high: 타입number | string기본값undefined
높은 값 구간의 하한입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
low: 타입number | string기본값undefined
낮은 값 구간의 상한입니다.
max: 타입number | string기본값100
컴포넌트가 받을 수 있는 최댓값입니다.
min: 타입number | string기본값0
컴포넌트가 받을 수 있는 최솟값입니다.
optimum: 타입number | string기본값undefined
어느 임계 구간이 최적인지 결정하는 값입니다.
value: 타입number | string기본값필수
이 계약이 노출하는 현재 값입니다.

`MeterPartProps`

as: 타입PrimitiveAs기본값파트별로 다름
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

슬롯

`MeterRootSlotProps`

high: 타입string
높은 값 구간의 하한입니다.
low: 타입string
낮은 값 구간의 상한입니다.
max: 타입string
숫자 범위의 최댓값입니다.
min: 타입string
숫자 범위의 최솟값입니다.
optimum: 타입string
어느 임계 구간이 최적인지 결정하는 값입니다.
percentage: 타입number
현재 값을 범위의 백분율로 나타낸 값입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.
valueText: 타입string
현재 범위 값을 사용할 수 있을 때 형식화한 문자열입니다.
zone: 타입'optimum' | 'suboptimal' | 'even-less-good'
임계값과 최적값에서 계산한 품질 구간입니다.

기타 타입

`MeterValueFormatter`

type MeterValueFormatter = (value: string) => string

파트

공통 범위: [data-scope="meter"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	이름이 있는 읽기 전용 측정값과 정확한 범위를 노출합니다.	`role="meter"` `data-zone="<zone>"` `data-percentage="<percentage>"`
`track`	`[data-part="track"]`	범위가 있는 측정값의 시각적 경로를 제공합니다.	—
`indicator`	`[data-part="indicator"]`	기존 접근성 값을 유지하며 정확한 백분율만큼 채웁니다.	`aria-hidden="true"` `data-zone="<zone>"` `data-percentage="<percentage>"`
`value-text`	`[data-part="value-text"]`	서식화된 값을 텍스트로 표시합니다.	—

키보드 동작

키	동작
`None`	범위 표시는 읽기 전용 의미와 값만 제공합니다.

접근성

이름이 있는 읽기 전용 meter가 표준 ARIA 속성으로 최솟값·최댓값·현재 값·형식화된 값을 노출합니다.

관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.

Meter ​

용법 ​

임계 구간 ​

정확한 소수 ​

같은 최솟값과 최댓값 ​

API ​

Props ​

MeterRootProps ​

MeterPartProps ​

슬롯 ​

MeterRootSlotProps ​

기타 타입 ​

MeterValueFormatter ​

파트 ​

키보드 동작 ​

접근성 ​