Text fields components are used for collecting user provided information.
간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
Single line text-fields do not float their label on focus or with data.
shaped text fields are rounded if they're outlined and have higher border-radius if filled.
Text fields can be disabled or readonly.
You can reduces the text field height with dense prop.
아이콘은 앞(prepended)이나 뒤(appended)에 넣을 수 있습니다.
When clearable, you can customize the clear icon with clear-icon.
Use a counter prop to inform a user of the character limit. The counter does not perform any validation by itself. You will need to pair it with either the internal validation system, or a 3rd party library. You can use it on regular, box or outlined text fields.
When hide-details is set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display.
암호 입력은 덧붙여지는 아이콘과 표시를 제어하는 콜백과 함께 사용됩니다.
텍스트 필드는 대체 박스 디자인과 함께 사용될 수 있습니다. Append 나 prepend 아이콘 prop들은 이 모드를 지원하지 "않습니다".
텍스트 필드들은 솔로 디자인과 함께 사용될 수도 있습니다.
Text fields can be used with an alternative outlined design.
선택적으로 택스트필드의 칼라를 마테리얼 디자인 팔레트의 어떤 색상으로든 바꿀 수 있습니다. 아래 예는 검증과 커스텀 폼의 구현입니다.
텍스트 필드의 hint 프로퍼티는 텍스트 필드 아래 문자열을 추가합니다. persistent-hint 를 사용하면 텍스트 필드가 포커스 되지 않았을 때도 힌트 문자열을 유지할 수 있습니다.
prefix와 suffix 프로퍼티는 텍스트 필드에 편집 불가능한 인라인 텍스트를 앞이나 뒤에 붙일 수 있습니다.
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.
Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.
Text field label can be defined in label slot - that will allow to use HTML content
Vuetify는 rules prop 을 통해 간단한 검증(validation)을 제공합니다. rules prop은 콜백 배열을 받습니다. 규칙들(rules)을 검증할 때, 현재 v-model 값이 콜백으로 전달됩니다. 이 콜백은 true 나 에러 메시지로 String을 반환해야 합니다.
전체 너비 텍스트 필드는 무제한 인풋을 만들 수 있도록 해줍니다. 이 예제에서는 v-divider 를 이용해 필드들을 분리하였습니다.
바텀 라인(bottom line) 대신 프로그레스 바를 표시할 수도 있습니다. 기본적으로 텍스트 필드와 같은 색상을 가진 불확정 프로그래스를 사용하 ㄹ수도 있고 progress 슬롯을 이용해서 커스터마이즈할 수도 있습니다.
내장된 v-form이나 vuelidate,vee-validation같은 서드파티 플러그인은 검증 프로세스를 구성하는 것을 도와주지만 동시에 간단한 사용자 검증을 선택 할 수도 있습니다.