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

사용법

A simple text field with placeholder and/or label.

API

예제

Single line

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

Shaped

shaped text fields are rounded if they're outlined and have higher border-radius if filled.

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.

Character counter

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.

암호 입력 (Password input)

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

박스 스타일 (Box style)

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

솔로 스타일 (Solo style)

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

Outlined style

Text fields can be used with an alternative outline design.

Custom colors

You can optionally change a text field into any color in the Material design palette. Below is an example implementation of a custom form with validation.

Masks (using vue-the-mask)

You can add masking functionality using a 3rd party library such as vue-the-mask.

힌트 텍스트 (Hint text)

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

Prefixes & suffixes

The prefix and suffix properties allows you to prepend and append inline non-modifiable text next to the text field.

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

검증 (Validation)

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

Full-width text field with character counter

Full width text fields allow you to create boundless inputs. In this example, we use a v-divider to separate the fields.

Progress bar

You can display a progress bar instead of the bottom line. You can use the default indeterminate progress having same color as the text field or designate a custom one using the progress slot

Custom validation

While the built in v-form or 3rd party plugin such as vuelidate or vee-validation can help streamline your validation process, you can choose to simply control it yourself.

Edit this page | language on Github
Vuetify
상점For Enterprise