Meter Group

하나의 정확한 공용 용량을 이름과 순서가 있는 측정값으로 나눠 보여 줍니다.

용법

공용 용량

하나의 공용 용량을 순서와 이름이 있는 측정값 및 명시적인 잔여 공간으로 나눕니다.

Storage capacity하나의 공용 용량을 순서와 이름이 있는 측정값 및 명시적인 잔여 공간으로 나눕니다.80 / 100 GB

<!-- Meter Group / Grouped Capacity -->
<script setup lang="ts">
import { MeterGroupIndicator, MeterGroupItem, MeterGroupItemIndicator, MeterGroupItemLabel, MeterGroupItemValue, MeterGroupList, MeterGroupRoot, MeterGroupSegment, MeterGroupTrack, MeterGroupValueText } from '@sectile/vue/meter-group-indicator'
const items = [
  { id: 'documents', label: 'Documents', value: '42' },
  { id: 'media', label: 'Media', value: '31' },
  { id: 'archives', label: 'Archives', value: '7' },
] as const

</script>

<template>
  <MeterGroupRoot :items="items" max="100" label="Storage capacity">
    <MeterGroupValueText />
    <MeterGroupTrack>
      <MeterGroupSegment v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupIndicator />
      </MeterGroupSegment>
    </MeterGroupTrack>
    <MeterGroupList>
      <MeterGroupItem v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupItemIndicator />
        <MeterGroupItemLabel />
        <MeterGroupItemValue />
      </MeterGroupItem>
    </MeterGroupList>
  </MeterGroupRoot>
</template>

0인 값

값이 0인 항목도 순서를 유지하고 시각적 용량은 0으로 표시합니다.

Storage capacity값이 0인 항목도 순서를 유지하고 시각적 용량은 0으로 표시합니다.42 / 100 GB

<!-- Meter Group / Zero Values -->
<script setup lang="ts">
import { MeterGroupIndicator, MeterGroupItem, MeterGroupItemIndicator, MeterGroupItemLabel, MeterGroupItemValue, MeterGroupList, MeterGroupRoot, MeterGroupSegment, MeterGroupTrack, MeterGroupValueText } from '@sectile/vue/meter-group-indicator'
const items = [
  { id: 'documents', label: 'Documents', value: '42' },
  { id: 'archives', label: 'Archives', value: '0' },
] as const

</script>

<template>
  <MeterGroupRoot :items="items" max="100" label="Storage capacity">
    <MeterGroupValueText />
    <MeterGroupTrack>
      <MeterGroupSegment v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupIndicator />
      </MeterGroupSegment>
    </MeterGroupTrack>
    <MeterGroupList>
      <MeterGroupItem v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupItemIndicator />
        <MeterGroupItemLabel />
        <MeterGroupItemValue />
      </MeterGroupItem>
    </MeterGroupList>
  </MeterGroupRoot>
</template>

정확한 소수

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

Storage capacity입력한 십진수 0.1을 정확한 값으로 유지합니다.0.3 / 0.6 GB

<!-- Meter Group / Exact Decimal -->
<script setup lang="ts">
import { MeterGroupIndicator, MeterGroupItem, MeterGroupItemIndicator, MeterGroupItemLabel, MeterGroupItemValue, MeterGroupList, MeterGroupRoot, MeterGroupSegment, MeterGroupTrack, MeterGroupValueText } from '@sectile/vue/meter-group-indicator'
const items = [
  { id: 'documents', label: 'Documents', value: '0.1' },
  { id: 'media', label: 'Media', value: '0.2' },
] as const

</script>

<template>
  <MeterGroupRoot :items="items" max="0.6" label="Storage capacity">
    <MeterGroupValueText />
    <MeterGroupTrack>
      <MeterGroupSegment v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupIndicator />
      </MeterGroupSegment>
    </MeterGroupTrack>
    <MeterGroupList>
      <MeterGroupItem v-for="item in items" :key="item.id" :id="item.id">
        <MeterGroupItemIndicator />
        <MeterGroupItemLabel />
        <MeterGroupItemValue />
      </MeterGroupItem>
    </MeterGroupList>
  </MeterGroupRoot>
</template>

잘못된 입력

정확한 합계가 공용 용량 안에 들어오는 구성을 확정합니다.

Storage capacity정확한 합계가 공용 용량 안에 들어오는 구성을 확정합니다.80 / 100 GB

Rejected input: meter-group-total-exceeds-maximum

<!-- Meter Group / Invalid Input -->
<script setup lang="ts">
import { tryCreateMeterGroupState } from '@sectile/core/meter-group'

const result = tryCreateMeterGroupState({
  max: '100',
  items: [
    { id: 'documents', value: '70' },
    { id: 'media', value: '40' },
  ],
})
</script>

<template>
  <p v-if="!result.ok">Rejected input: {{ result.error.code }}</p>
</template>

API

Vue 패키지: @sectile/vue/meter-group

컴포넌트

MeterGroupRoot
MeterGroupTrack
MeterGroupSegment
MeterGroupIndicator
MeterGroupValueText
MeterGroupList
MeterGroupItem
MeterGroupItemIndicator
MeterGroupItemLabel
MeterGroupItemValue

Props

`MeterGroupRootProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
formatTotal: 타입MeterGroupTotalFormatter기본값undefined
전체 합계와 최댓값을 화면에 표시할 문자열로 바꾸는 함수입니다.
formatValue: 타입MeterGroupValueFormatter기본값undefined
값을 화면에 표시할 문자열로 바꾸는 함수입니다.
high: 타입number | string기본값undefined
높은 값 구간의 하한입니다.
items: 타입readonly MeterGroupEntry[]기본값필수
컴포넌트가 관리할 순서 있는 항목 값입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
low: 타입number | string기본값undefined
낮은 값 구간의 상한입니다.
max: 타입number | string기본값100
컴포넌트가 받을 수 있는 최댓값입니다.
optimum: 타입number | string기본값undefined
어느 임계 구간이 최적인지 결정하는 값입니다.

`MeterGroupSegmentProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
id: 타입string기본값필수
관련 파트를 연결하는 안정적인 ID입니다.

`MeterGroupItemProps`

as: 타입PrimitiveAs기본값'li'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
id: 타입string기본값필수
관련 파트를 연결하는 안정적인 ID입니다.

`MeterGroupPartProps`

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

슬롯

`MeterGroupSegmentSlotProps`

end: 타입string
공유 범위 안에서 이 구간이 끝나는 값입니다.
endPercentage: 타입number
공유 범위 대비 구간 끝점의 백분율입니다.
id: 타입string
현재 필드 또는 항목의 안정적인 ID입니다.
label: 타입string
보조 기술이 읽는 컨트롤 이름입니다.
percentage: 타입number
현재 값을 범위의 백분율로 나타낸 값입니다.
start: 타입string
공유 범위 안에서 이 구간이 시작하는 값입니다.
startPercentage: 타입number
공유 범위 대비 구간 시작점의 백분율입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.
valueText: 타입string
현재 범위 값을 사용할 수 있을 때 형식화한 문자열입니다.

`MeterGroupRootSlotProps`

max: 타입string
숫자 범위의 최댓값입니다.
percentage: 타입number
현재 값을 범위의 백분율로 나타낸 값입니다.
remaining: 타입string
공유 최댓값에서 할당량을 뺀 잔여 값입니다.
segments: 타입readonly MeterGroupSegmentSlotProps[]
공유 범위에서 계산한 순서 있는 구간 목록입니다.
total: 타입string
모든 구간 값의 합계입니다.
valueText: 타입string
현재 범위 값을 사용할 수 있을 때 형식화한 문자열입니다.
zone: 타입'optimum' | 'suboptimal' | 'even-less-good'
임계값과 최적값에서 계산한 품질 구간입니다.

`MeterGroupItemSlotProps`

end: 타입string
공유 범위 안에서 이 구간이 끝나는 값입니다.
endPercentage: 타입number
공유 범위 대비 구간 끝점의 백분율입니다.
id: 타입string
현재 필드 또는 항목의 안정적인 ID입니다.
label: 타입string
보조 기술이 읽는 컨트롤 이름입니다.
percentage: 타입number
현재 값을 범위의 백분율로 나타낸 값입니다.
start: 타입string
공유 범위 안에서 이 구간이 시작하는 값입니다.
startPercentage: 타입number
공유 범위 대비 구간 시작점의 백분율입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.
valueText: 타입string
현재 범위 값을 사용할 수 있을 때 형식화한 문자열입니다.

기타 타입

`MeterGroupEntry`

이름	타입	필수
`id`	`string`	필수
`value`	`number \| string`	필수
`label`	`string`	필수

`MeterGroupValueFormatter`

type MeterGroupValueFormatter = (value: string, entry: MeterGroupEntry) => string

`MeterGroupTotalFormatter`

type MeterGroupTotalFormatter = (total: string, max: string) => string

파트

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

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	관련 측정값 묶음에 하나의 집계 이름을 제공합니다.	`role="group"` `data-zone="<zone>"` `data-percentage="<percentage>"`
`track`	`[data-part="track"]`	하위 meter의 의미를 유지하면서 순서가 있는 시각적 트랙을 제공합니다.	`role="presentation"`
`segment`	`[data-part="segment"]`	이름이 있는 측정값 하나와 정확한 누적 시작·끝 위치를 노출합니다.	`role="meter"` `data-id="<id>"` `data-start-percentage="<percentage>"` `data-end-percentage="<percentage>"`
`indicator`	`[data-part="indicator"]`	기존 접근성 값을 유지하며 현재 구간을 그립니다.	`aria-hidden="true"` `data-percentage="<percentage>"`
`value-text`	`[data-part="value-text"]`	서식화된 값을 텍스트로 표시합니다.	—
`list`	`[data-part="list"]`	이름이 있는 meter 안내와 시각적 범례를 하나의 공유 의미로 묶습니다.	`aria-hidden="true"`
`item`	`[data-part="item"]`	같은 Core 구간을 키로 사용하는 범례 행 하나를 유지합니다.	`data-id="<id>"` `aria-hidden="true"`
`item-indicator`	`[data-part="item-indicator"]`	항목의 선택 상태를 표시합니다.	—
`item-label`	`[data-part="item-label"]`	Item Label 스타일 영역을 노출합니다.	—
`item-value`	`[data-part="item-value"]`	Item Value 스타일 영역을 노출합니다.	—

키보드 동작

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

접근성

이름이 있는 하나의 그룹 안에 순서와 이름이 있는 읽기 전용 meter를 두며 시각적 트랙과 범례는 같은 집계 의미를 공유합니다.

Meter Group ​

용법 ​

공용 용량 ​

0인 값 ​

정확한 소수 ​

잘못된 입력 ​

API ​

Props ​

MeterGroupRootProps ​

MeterGroupSegmentProps ​

MeterGroupItemProps ​

MeterGroupPartProps ​

슬롯 ​

MeterGroupSegmentSlotProps ​

MeterGroupRootSlotProps ​

MeterGroupItemSlotProps ​

기타 타입 ​

MeterGroupEntry ​

MeterGroupValueFormatter ​

MeterGroupTotalFormatter ​

파트 ​

키보드 동작 ​

접근성 ​