Time Field
시간대와 무관한 시각을 입력하고 검증합니다.
용법
시각 시각
시간대와 무관한 시와 분을 입력합니다.
Selected time9:30 AM
<!-- Time Field / Wall Clock -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeField } from '@sectile/vue/time-field'
const value = ref({ hour: 9, minute: 30, second: 0, millisecond: 0 })
</script>
<template>
<label>
<span>Start time</span>
<TimeField v-model="value" />
</label>
</template>일정 간격
설정한 간격에 맞는 값만 입력하고 조절합니다.
Selected time9:30 AM
<!-- Time Field / Stepped -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeField } from '@sectile/vue/time-field'
const value = ref({ hour: 9, minute: 30, second: 0, millisecond: 0 })
const policies = { step: { minute: 15 } }
</script>
<template>
<label>
<span>Start time</span>
<TimeField v-model="value" :policies="policies" />
</label>
</template>외부 상태 관리
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
Selected time9:30 AM
<!-- Time Field / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { TimeField } from '@sectile/vue/time-field'
const value = ref({ hour: 9, minute: 30, second: 0, millisecond: 0 })
</script>
<template>
<label>
<span>Start time</span>
<TimeField v-model="value" />
</label>
</template>API
Vue 패키지: @sectile/vue/temporal/time-field
컴포넌트
TimeField
Props
TimeFieldProps
defaultValue컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled사용자 조작을 막을지 여부입니다.
label보조 기술이 읽는 컨트롤 이름입니다.
modelValue부모가 상태를 관리할 때 사용할 현재 값입니다.
native브라우저 기본 날짜 또는 시간 입력 UI를 사용할지 여부입니다.
policies검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
required제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
기타 타입
TimeValue
ts
type TimeValue = NonNullable<TimeFieldOptions['value']>TimeFieldValueChangeHandler
ts
type TimeFieldValueChangeHandler = (value: TimeValue | null) => void파트
공통 범위: [data-scope="time-field"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
input | [data-part="input"] | 편집 값이나 초안을 입력받습니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Arrow Up / Arrow Down | 현재 값 구간을 증가시키거나 감소시킵니다. |
| Enter | 입력 중인 값을 확정합니다. |
| Escape | 입력을 취소하고 확정된 값을 복원합니다. |
접근성
이름이 있는 입력란은 기본 텍스트 입력을 유지하며 시간 검증을 하나의 값으로 노출합니다.