텍스트 필드 (Text field)
텍스트 필드 컴포넌트는 사용자가 제공한 정보를 모으는데 사용됩니다.
API
Components.TextFields.
Components.TextFields.
오토 포커스 활성화
Components.TextFields.
대체 박스 인풋 스타일을 적용
Components.TextFields.
Components.TextFields.
Add input clear functionality, default icon is Material Icons clear
컨트롤에 색상을 지정
인풋 길이 카운터를 생성. 넘버가 지정되지 않으면 25가 기본 값으로 쓰입니다. 검증(validation)은 적용되지 않습니다.
다크 테마를 적용
Components.TextFields.
입력시 자동 문자 표시 비활성화
수동으로 인풋을 에러 상태로 만듬
Components.TextFields.
인풋을 에러 상태로 만들고 커스텀 에러메시지를 전달. rules prop에 의해 발생하는 임이의 검증과 결합가능. 이 필드가 검증을 호출하지는 않습니다.
Components.TextFields.
인풋 타입을 전체-너비로 설정
컴포넌트의 높이를 설정
Components.TextFields.
Components.TextFields.
Components.TextFields.
라이트 테마를 적용
Components.TextFields.
Apply a custom character mask to the input. See mask table above for more information
Components.TextFields.
Components.TextFields.
Components.TextFields.
Components.TextFields.
접두사(prefix) 표시
Components.TextFields.
Components.TextFields.
Components.TextFields.
Returns the unmodified masked string
Components.TextFields.
True나 에러메시지 문자열을 반환하는 함수들의 배열
Label does not move on focus/dirty
Components.TextFields.
Components.TextFields.
Components.TextFields.
Components.TextFields.
접미사(suffix) 표시
인풋 타입을 설정
blur 이벤트까지 검증을 지연
표시여부를 조절 (Controls visibility)
보충
| Mask | Description |
|---|---|
| Masks | |
| # | Any digit |
| A | Any capital letter |
| a | Any small letter |
| N | Any capital alphanumeric character |
| n | Any small alphanumeric character |
| X | Any 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
Text fields can be disabled or 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)
prefix와 suffix 프로퍼티는 텍스트 필드에 편집 불가능한 인라인 텍스트를 앞이나 뒤에 붙일 수 있습니다.
사용자 검증 (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 슬롯을 이용해서 커스터마이즈할 수도 있습니다.