Bar list

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

디렉토리별 디스크, 프로젝트별 토큰, 도구별 호출처럼 단위가 같은 이름 붙은 값의 순위를 보여 주세요. 줄마다 이름, 막대, 값이 한 줄에 놓이고, 이름 아래에 경로 같은 detail을 둘 수 있습니다. 막대는 가장 큰 값에, 값들이 같은 한도를 나눠 쓰면 max에 비례합니다. 대시보드 카드 안의 긴 순위에는 maxRows를 주세요. diverging을 주면 섹터별 시장 대비 차이처럼 부호 있는 값이 한 척도로 가운데 선에서 자랍니다. 오르면 줄의 끝 쪽으로 추세의 오름 색, 내리면 시작 쪽으로 내림 색입니다.

• 한 목록에 단위를 섞지 마세요. 측정 하나만 순위로 두고, 다른 측정은 따로 목록이나 Table에 두세요.
• 시간에 따른 변화에는 BarList를 쓰지 마세요. LineChart나 Sparkline을 쓰세요.
• 한도에 대한 측정 하나에는 BarList를 쓰지 마세요. Meter를 쓰세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

div → ol(aria-label) → li: name + detail, bar (aria-hidden), value; with maxRows, ScrollArea(region) around the ol; with diverging, the bar is a DivergingBar track (aria-hidden)

키보드와 접근성

BarList는 글로 된 순서 목록입니다. 줄마다 이름, detail, 값을 읽고 막대는 장식입니다. maxRows로 줄인 목록은 포커스를 받는 이름 붙은 영역 안에서 스크롤되어 화살표 키로 움직입니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { BarList } from '@surflane/ui'

<BarList
  label='Disk used by directory'
  items={[
    { id: 'models', label: 'models', detail: '/srv/models', value: 412, text: '412 GiB' },
    { id: 'cache', label: 'cache', detail: '/var/cache/hf', value: 168, text: '168 GiB' },
  ]}
  maxRows={6}
/>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰