Text
선택 영역과 한글 조합을 유지하면서 유니코드 문자열을 편집합니다.
용법
유니코드 선택
사용자가 한 글자로 인식하는 문자 단위로 선택 영역을 이동하고 바꿉니다.
사용자가 한 글자로 인식하는 문자 단위로 선택 영역을 이동하고 바꿉니다.
Current: 한글과 emoji 👋
<!-- Text / Unicode Selection -->
<script setup lang="ts">
import { ref } from 'vue'
import { TextField } from '@sectile/vue/text'
const value = ref('한글과 emoji 👋')
</script>
<template>
<TextField v-model="value" />
</template>여러 줄
여러 줄을 편집하면서 선택 영역과 글자 조합 상태를 유지합니다.
여러 줄을 편집하면서 선택 영역과 글자 조합 상태를 유지합니다.
Current: Sectile
<!-- Text / Multiline -->
<script setup lang="ts">
import { ref } from 'vue'
import { TextField } from '@sectile/vue/text'
const value = ref('Sectile')
</script>
<template>
<TextField v-model="value" multiline />
</template>외부 상태 관리
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
Current: Sectile
<!-- Text / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { TextField } from '@sectile/vue/text'
const value = ref('Sectile')
</script>
<template>
<TextField v-model="value" />
</template>예시
부모가 관리하는 IME 입력
부모가 값을 관리하는 입력란에서 한글을 입력한 뒤 마지막 글자를 조합하는 중 Tab을 누릅니다. 마지막 음절이 중복되지 않고 확정값이 한 번만 반영됩니다.
부모가 값을 관리하는 입력란에서 한글을 입력한 뒤 마지막 글자를 조합하는 중 Tab을 누릅니다. 마지막 음절이 중복되지 않고 확정값이 한 번만 반영됩니다.
Current: Empty
<!-- Text / Ime Mixed -->
<script setup lang="ts">
import { ref } from 'vue'
import { TextField } from '@sectile/vue/text'
const value = ref('')
</script>
<template>
<TextField v-model="value" />
</template>API
Vue 패키지: @sectile/vue/text
TextField
Props
TextFieldProps
autocomplete편집 입력에 전달할 네이티브 자동 완성 힌트입니다.
defaultValue컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled사용자 조작을 막을지 여부입니다.
form컨트롤을 연결할 네이티브 form 요소의 ID입니다.
modelModifiers문자열 갱신에 적용할 Vue v-model 수정자입니다.
modelValue부모가 상태를 관리할 때 사용할 현재 값입니다.
multiline텍스트 입력을 textarea로 렌더링할지 여부입니다.
name네이티브 폼 제출에 사용할 이름입니다.
placeholder빈 값 상태에 표시할 안내 문자열입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
required제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
type컴포넌트가 사용할 선택 또는 동작 방식입니다.
이벤트
TextField
update:modelValue컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.
기타 타입
TextFieldModelModifiers
| 이름 | 타입 | 필수 |
|---|---|---|
lazy | boolean | — |
number | boolean | — |
trim | boolean | — |
TextFieldValueChangeHandler
type TextFieldValueChangeHandler = (value: string | number) => void파트
공통 범위: [data-scope="text"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
input | [data-part="input"] | 편집 값이나 초안을 입력받습니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Standard editing keys | 호스트 입력 관례에 따라 텍스트를 편집하고 선택합니다. |
| Tab | 기본 텍스트 동작을 유지하며 포커스를 이동합니다. |
접근성
이름이 있는 입력 또는 여러 줄 입력이 기본 편집·선택·IME·비활성·읽기 전용 의미를 유지합니다.