텍스트 필드 (Text field)

텍스트 필드 컴포넌트는 사용자가 제공한 정보를 모으는데 사용됩니다.

사용법

A simple text field with placeholder and/or label.


API

v-text-field
이름
append-icon
디폴트
undefined
타입
string
이름
append-icon-cb
디폴트
null
타입
function
New in — v1.1
이름
append-outer-icon
디폴트
undefined
타입
string
New in — v1.1
이름
append-outer-icon-cb
디폴트
null
타입
function
이름
autofocus
디폴트
false
타입
boolean

오토 포커스 활성화

이름
background-color
디폴트
undefined
타입
string
이름
box
디폴트
false
타입
boolean

대체 박스 인풋 스타일을 적용

이름
browser-autocomplete
디폴트
undefined
타입
string
이름
clear-icon
디폴트
'$vuetify.icons.clear'
타입
string
이름
clear-icon-cb
디폴트
null
타입
function
이름
clearable
디폴트
false
타입
boolean

Add input clear functionality, default icon is Material Icons clear

이름
color
디폴트
'primary'
타입
string

컨트롤에 색상을 지정

이름
counter
디폴트
undefined
타입
boolean | number | string

인풋 길이 카운터를 생성. 넘버가 지정되지 않으면 25가 기본 값으로 쓰입니다. 검증(validation)은 적용되지 않습니다.

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
disabled
디폴트
false
타입
boolean
이름
dont-fill-mask-blanks
디폴트
false
타입
boolean

Disables the automatic character display when typing

이름
error
디폴트
false
타입
boolean

수동으로 인풋을 에러 상태로 만듬

이름
error-count
디폴트
1
타입
number | string
이름
error-messages
디폴트
[]
타입
string | array

인풋을 에러 상태로 만들고 커스텀 에러메시지를 전달. rules prop에 의해 발생하는 임이의 검증과 결합가능. 이 필드가 검증을 호출하지는 않습니다.

이름
flat
디폴트
false
타입
boolean
이름
full-width
디폴트
false
타입
boolean

인풋 타입을 전체-너비로 설정

이름
height
디폴트
undefined
타입
number | string

컴포넌트의 높이를 설정

이름
hide-details
디폴트
false
타입
boolean
이름
hint
디폴트
undefined
타입
string
이름
label
디폴트
undefined
타입
string
이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
loading
디폴트
false
타입
boolean | string

선형 프로그레스바를 표시. 프로그레스바의 색을 나타내는 문자열(마테리얼 이나 테마 색상 - primary, secondary, success, info, warning, error)이나 부울값(boolean) 이 가능. 부울값의 경우 컴포넌트 색상(컴포넌트가 지원할 경우 color prop으로 지정된 값)이나 primary 색상이 사용됨

이름
mask
디폴트
undefined
타입
object | string

Apply a custom character mask to the input. See mask table above for more information

이름
messages
디폴트
[]
타입
string | array
이름
multi-line
디폴트
false
타입
boolean

textarea 로 전환

이름
outline
디폴트
false
타입
boolean
이름
persistent-hint
디폴트
false
타입
boolean
이름
placeholder
디폴트
undefined
타입
string
이름
prefix
디폴트
undefined
타입
string

접두사(prefix) 표시

이름
prepend-icon
디폴트
undefined
타입
string
이름
prepend-icon-cb
디폴트
null
타입
function
New in — v1.1
이름
prepend-inner-icon
디폴트
undefined
타입
string
New in — v1.1
이름
prepend-inner-icon-cb
디폴트
null
타입
function
이름
readonly
디폴트
false
타입
boolean
이름
return-masked-value
디폴트
false
타입
boolean

Returns the unmodified masked string

New in — v1.1
이름
reverse
디폴트
false
타입
boolean
이름
rules
디폴트
[]
타입
array

True나 에러메시지 문자열을 반환하는 함수들의 배열

이름
single-line
디폴트
false
타입
boolean

Label does not move on focus/dirty

이름
solo
디폴트
false
타입
boolean
이름
solo-inverted
디폴트
false
타입
boolean
New in — v1.1
이름
success
디폴트
false
타입
boolean
New in — v1.1
이름
success-messages
디폴트
[]
타입
string | array
이름
suffix
디폴트
undefined
타입
string

접미사(suffix) 표시

Deprecated in — v1.1
이름
textarea
디폴트
false
타입
boolean

대체 스타일의 Textarea 텍스트 필드

이름
type
디폴트
'text'
타입
string

인풋 타입을 설정

이름
validate-on-blur
디폴트
false
타입
boolean

blur 이벤트까지 검증을 지연

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

보충

Mask legend
MaskDescription
Masks
#Any digit
AAny capital letter
aAny small letter
NAny capital alphanumeric character
nAny small alphanumeric character
XAny special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card#### - #### - #### - ####
date-with-time##/##/#### ##:##
phone(###) ### - ####
social###-##-####
time##:##
time-with-seconds##:##:##

예제

한 줄 라이트 테마 (Single line light theme)

Single line text-fields do not float their label on focus or with data.


Disabled and readonly


아이콘과 함께 (With Icon)

아이콘은 앞(prepended)이나 뒤(appended)에 넣을 수 있습니다.


Clearable

When clearable, you can customize the clear icon with clear-icon.


Icon events

click:prepend, click:append, click:append-outer, and click:clear will be emitted when you click on the respective icon. Note that these events will not be fired if the slot is used instead.


Icon slots

Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.


Label slot

Text field label can be defined in label slot - that will allow to use HTML content


글자수 카운터 (Character counter)

사용자에게 글자수 제한을 보여주기 위해 카운터를 사용합니다. 카운터는 그 자체로 어떤 검증(validation)도 하지 않습니다. 검증을 위해서는 내부 검증 시스템이나 서드파티 파이브러리를 연결해야 합니다.


암호 입력 (Password input)

암호 입력은 덧붙여지는 아이콘과 표시를 제어하는 콜백과 함께 사용됩니다.


검증 (Validation)

Vuetify는 rules prop 을 통해 간단한 검증(validation)을 제공합니다. rules prop은 콜백 배열을 받습니다. 규칙들(rules)을 검증할 때, 현재 v-model 값이 콜백으로 전달됩니다. 이 콜백은 true 나 에러 메시지로 String을 반환해야 합니다.


전체-너비 텍스트 필드와 글자수 카운터 (Full-width text field with character counter)

전체 너비 텍스트 필드는 무제한 인풋을 만들 수 있도록 해줍니다. 이 예제에서는 v-divider 를 이용해 필드들을 분리하였습니다.


힌트 텍스트 (Hint text)

텍스트 필드의 hint 프로퍼티는 텍스트 필드 아래 문자열을 추가합니다. persistent-hint 를 사용하면 텍스트 필드가 포커스 되지 않았을 때도 힌트 문자열을 유지할 수 있습니다.


접두사와 접미사 (Prefixes & suffixes)

prefixsuffix 프로퍼티는 텍스트 필드에 편집 불가능한 인라인 텍스트를 앞이나 뒤에 붙일 수 있습니다.


사용자 검증 (Custom validation)

내장된 v-form이나 vuelidate,vee-validation같은 서드파티 플러그인은 검증 프로세스를 구성하는 것을 도와주지만 동시에 간단한 사용자 검증을 선택 할 수도 있습니다.


박스 스타일 (Box style)

텍스트 필드는 대체 박스 디자인과 함께 사용될 수 있습니다. Append 나 prepend 아이콘 prop들은 이 모드를 지원하지 "않습니다".


솔로 스타일 (Solo style)

텍스트 필드들은 솔로 디자인과 함께 사용될 수도 있습니다.


Outline style

Text fields can be used with an alternative outline design.


사용자 색상 (Custom colors)

선택적으로 택스트필드의 칼라를 마테리얼 디자인 팔레트의 어떤 색상으로든 바꿀 수 있습니다. 아래 예는 검증과 커스텀 폼의 구현입니다.


마스크 (Masks)

텍스트 필드는 문자 마스크로 검증할 수 있습니다. 미리 만들어져 있거나 혹은 사용자가 만든 규칙들을 이용하여 선택적으로 특정한 문자열 포맷을 만들고 검증할 수 있습니다.


프로그레스 바 (Progress bar)

바텀 라인(bottom line) 대신 프로그레스 바를 표시할 수도 있습니다. 기본적으로 텍스트 필드와 같은 색상을 가진 불확정 프로그래스를 사용하 ㄹ수도 있고 progress 슬롯을 이용해서 커스터마이즈할 수도 있습니다.