Time Range Field
간격과 순서 규칙을 지키며 시작·종료 시각을 편집합니다.
용법
업무 시간
일반 업무 시간 안에서 시작 시각과 종료 시각을 선택합니다.
Office hours9:30 AM – 5:45 PM
<!-- Time Range Field / Office Hours -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeRangeFieldEndInput, TimeRangeFieldRoot, TimeRangeFieldStartInput } from '@sectile/vue/temporal/time-range-field'
const hours = ref({ start: { hour: 9, minute: 30 }, end: { hour: 17, minute: 45 } })
</script>
<template>
<TimeRangeFieldRoot v-model="hours">
<label>Opens <TimeRangeFieldStartInput name="opens" /></label>
<label>Closes <TimeRangeFieldEndInput name="closes" /></label>
</TimeRangeFieldRoot>
</template>일정 간격
설정한 간격에 맞는 값만 입력하고 조절합니다.
Office hours9:30 AM – 5:45 PM
<!-- Time Range Field / Stepped -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeRangeFieldEndInput, TimeRangeFieldRoot, TimeRangeFieldStartInput } from '@sectile/vue/temporal/time-range-field'
const hours = ref({ start: { hour: 9, minute: 30 }, end: { hour: 17, minute: 45 } })
const policies = { step: { minute: 15 } }
</script>
<template>
<TimeRangeFieldRoot v-model="hours" :policies="policies">
<label>Opens <TimeRangeFieldStartInput name="opens" /></label>
<label>Closes <TimeRangeFieldEndInput name="closes" /></label>
</TimeRangeFieldRoot>
</template>외부 상태 관리
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
Office hours9:30 AM – 5:45 PM
<!-- Time Range Field / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeRangeFieldEndInput, TimeRangeFieldRoot, TimeRangeFieldStartInput } from '@sectile/vue/temporal/time-range-field'
const hours = ref({ start: { hour: 9, minute: 30 }, end: { hour: 17, minute: 45 } })
</script>
<template>
<TimeRangeFieldRoot v-model="hours">
<label>Opens <TimeRangeFieldStartInput name="opens" /></label>
<label>Closes <TimeRangeFieldEndInput name="closes" /></label>
</TimeRangeFieldRoot>
</template>API
Vue 패키지: @sectile/vue/temporal/time-range-field
TimeRangeFieldRootTimeRangeFieldStartInputTimeRangeFieldEndInput
Props
TimeRangeFieldRootProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultValue컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled사용자 조작을 막을지 여부입니다.
endLabel범위 종료 입력의 접근 가능한 이름입니다.
modelValue부모가 상태를 관리할 때 사용할 현재 값입니다.
policies검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
required제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
startLabel범위 시작 입력의 접근 가능한 이름입니다.
슬롯
TimeRangeFieldRootSlotProps
active현재 활성 항목인지 여부입니다.
disabled사용자 조작을 막을지 여부입니다.
endText범위 종료 값을 표시한 문자열입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
startText범위 시작값을 표시한 문자열입니다.
value이 계약이 노출하는 현재 값입니다.
이벤트
TimeRangeFieldRoot
update:modelValue컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.
기타 타입
TimeRangeFieldValueChangeHandler
type TimeRangeFieldValueChangeHandler = (value: TimeRange | null) => voidTimeRange
| 이름 | 타입 | 필수 |
|---|---|---|
start | TimeValue | 필수 |
end | TimeValue | 필수 |
파트
공통 범위: [data-scope="time-range-field"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
root | [data-part="root"] | 컴포넌트 경계와 내부 파트를 묶습니다. | — |
start-input | [data-part="start-input"] | 시작 값을 편집합니다. | — |
end-input | [data-part="end-input"] | 종료 값을 편집합니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Arrow Up / Arrow Down | 현재 값 구간을 증가시키거나 감소시킵니다. |
| Enter | 입력 중인 값을 확정합니다. |
| Escape | 입력을 취소하고 확정된 값을 복원합니다. |
접근성
시작과 종료 입력에 각각 이름을 제공하고 양 끝의 오류가 보이는 하나의 순서 있는 시간 범위로 노출합니다.