Combobox
Combobox info coming soon
사용법
With Combobox, you can allow a user to create new values that may not be present in a provided items list.
API
Components.Combobox.
Components.Combobox.
Components.Combobox.
Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
Components.Combobox.
오토 포커스 활성화
Components.Combobox.
대체 박스 인풋 스타일을 적용
Components.Combobox.
items prop으로 넘겨진 모든 항목의 유니크한 로컬 사본을 보관합니다.
Changes display of selections to chips
Components.Combobox.
Add input clear functionality, default icon is Material Icons clear
컨트롤에 색상을 지정
인풋 길이 카운터를 생성. 넘버가 지정되지 않으면 25가 기본 값으로 쓰입니다. 검증(validation)은 적용되지 않습니다.
다크 테마를 적용
선택된 칩(chip)에 삭제(remove) 아이콘을 추가
리스트 항목의 최대 높이를 낮춤
Components.Combobox.
입력시 자동 문자 표시 비활성화
수동으로 인풋을 에러 상태로 만듬
Components.Combobox.
인풋을 에러 상태로 만들고 커스텀 에러메시지를 전달. rules prop에 의해 발생하는 임이의 검증과 결합가능. 이 필드가 검증을 호출하지는 않습니다.
Components.Combobox.
Components.Combobox.
인풋 타입을 전체-너비로 설정
컴포넌트의 높이를 설정
Components.Combobox.
Components.Combobox.
이미 선택된 셀렉트 메뉴 항목을 보여주지 않음
Components.Combobox.
항목 의 아바타 값 속성을 설정
항목 의 비활성화(disabled) 값 속성을 설정
항목 의 텍스트 값 속성을 설정
항목 의 값 속성을 설정
오브젝트 배열이나 문자열 배열. 오브젝트를 사용하면 text 와 value 필드를 사용. 이는 item-text 와 item-value 를 사용해서 바꿀 수 있습니다.
Components.Combobox.
라이트 테마를 적용
Components.Combobox.
Apply a custom character mask to the input. See mask table above for more information
Components.Combobox.
Components.Combobox.
복수 선택이 가능하도록 변경. 값의 배열을 받음(?).
데이터가 없을때 보여지는 문자열
Components.Combobox.
clearable prop을 사용할때, 일단 한번 클리어되면 현재 상태에 따라 선택 메뉴가 열리거나 열려있게 됩니다. When using the clearable prop, once cleared
Components.Combobox.
Components.Combobox.
Components.Combobox.
접두사(prefix) 표시
Components.Combobox.
Components.Combobox.
Components.Combobox.
Returns the unmodified masked string
선택시 item-value 로 지정된 값이 아니라 오브젝트가 바로 반환되도록 바꿈.
Components.Combobox.
True나 에러메시지 문자열을 반환하는 함수들의 배열
Bound when using the autocomplete prop. Use the .sync modifier to catch user input from the autocomplete search input
Label does not move on focus/dirty
Components.Combobox.
Components.Combobox.
Components.Combobox.
Components.Combobox.
Components.Combobox.
접미사(suffix) 표시
인풋 타입을 설정
blur 이벤트까지 검증을 지연
표시여부를 조절 (Controls visibility)
Components.Combobox.
보충
| 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 | ##:##:## |
예제
No data with chips
In this example we utilize a custom no-data slot to provide context to the user when searching / creating items.
Advanced custom options
The v-combobox improves upon the added functionality from v-select and v-autocomplete. This provides you with an expansive interface to create truly customized implementations. This example takes advantage of some more advanced features such as a custom filter algorithm, inline list editing and dynamic input items.
Multiple combobox
Previously known as tags - user is allowed to enter more than 1 value