텍스트 필드 (Text field)

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

사용법

A simple text field with placeholder and/or label.


API

v-text-field

보충

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.


글자수 카운터 (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 슬롯을 이용해서 커스터마이즈할 수도 있습니다.