Time range picker

미리보기

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

사용법

모니터링 화면이 지금부터 거꾸로 보여 줄 기간(예: 최근 24시간), 새로 고침 간격, 지금 새로 고침을 고르게 하세요. 기간과 간격은 밀리초라서 화면은 now − range를 요청하면 됩니다. 페이지 머리글이나 툴바에 두세요. 안의 Select는 가장 긴 옵션 폭에 맞습니다. timeRangeOptions와 refreshIntervalOptions의 라벨을 번역하거나 직접 만든 기간을 넘기세요.

• 두 날짜 사이의 고정 기간에는 쓰지 마세요. 옆에 DateRangePicker를 두세요.
• 데이터가 바뀌는 것보다 자주 새로 고치지 마세요. 한 시간마다 바뀌는 데이터에 10초 간격은 요청만 늘립니다.

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

구성

div(role=group, aria-label) → Select(range) + Select(refresh interval)? + Button(refresh now)?

키보드와 접근성

묶음 안에 Select 두 개와 버튼이 있고, 각각 이름을 가지고 Tab 순서에 들어갑니다. 간격은 페이지가 숨어 있는 동안 멈추고, 다시 보일 때 한 번 새로 고칩니다.

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

예시 코드

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

import { TimeRangePicker } from '@surflane/ui/time-range-picker'

<TimeRangePicker
  label='Dashboard time'
  range={range}
  onRangeChange={setRange}
  refreshInterval={interval}
  onRefreshIntervalChange={setInterval}
  onRefresh={() => refetch()}
/>

주요 API

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

관련 토큰