v-overflow-btn is used to give the user the ability to select items from the list. It has 3 variations: editable, overflow and segmented
When using objects for the items prop, you must associate item-text and item-value with existing properties on your objects. These values are defaulted to text and value and can be changed.
The auto property of menu-props is only supported for the default input style.
제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.
Allow the menu to overflow off the screen
Appends an icon to the component, uses the same syntax as v-icon
Appends an icon to the outside the component's input, uses same syntax as v-icon
Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This will attach to the root v-app component by default.
When searching, will always highlight the first option
오토 포커스 활성화
Changes the background-color of the input
items prop으로 넘겨진 모든 항목의 유니크한 로컬 사본을 보관합니다.
Changes display of selections to chips
Applied when using clearable and the input is dirty
Add input clear functionality, default icon is Material Icons clear
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
인풋 길이 카운터를 생성. 넘버가 지정되지 않으면 25가 기본 값으로 쓰입니다. 검증(validation)은 적용되지 않습니다.
Applies the dark theme variant to the component. This will default the components color to white unless you've configured your application theme to dark or if you are using the color prop on the component. You can find more information on the Material Design documentation for dark themes.
선택된 칩(chip)에 삭제(remove) 아이콘을 추가
Reduces the input height
Disables keyboard lookup
Disable the input
Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
Creates an editable button
수동으로 인풋을 에러 상태로 만듬
The total number of errors that should display at once
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
Applies the alternate filled input style
아이템을 필터링하는데 사용되는 함수
solo나 solo-inverted prop을 사용할때 요소의 높이(elevation)와 그림자를 제거
Designates input type as full-width
Sets the height of the input
Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display
Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the items array changes if not already open.
이미 선택된 셀렉트 메뉴 항목을 보여주지 않음
Hint text
컴포넌트의 DOM 아이디를 설정
Sets color of selected items
항목 의 비활성화(disabled) 값 속성을 설정
항목 의 텍스트 값 속성을 설정
Set property of items's value - must be primitive. Dot notation is supported. Note: This is currently not supported with v-combobox GitHub Issue
Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys. This can be changed using the item-text, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
{
text: string | number | object
value: string | number | object
disabled: boolean
divider: boolean
header: string
}Sets input label
Applies the light theme variant to the component.
Specifies the height of the loader
선형 프로그레스바를 표시. 프로그레스바의 색을 나타내는 문자열(마테리얼 이나 테마 색상 - primary, secondary, success, info, warning, error)이나 부울값(boolean) 이 가능. 부울값의 경우 컴포넌트 색상(컴포넌트가 지원할 경우 color prop으로 지정된 값)이나 primary 색상이 사용됨
Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }"
Displays a list of messages or message if using a string
복수 선택이 가능하도록 변경. 값의 배열을 받음(?).
데이터가 없을때 보여지는 문자열
Do not apply filtering when searching. Useful when data is being filtered server side
clearable prop을 사용할때, 일단 한번 클리어되면 현재 상태에 따라 선택 메뉴가 열리거나 열려있게 됩니다. When using the clearable prop, once cleared
Applies the outlined style to the input
Forces hint to always be visible
Sets the input’s placeholder text
접두사(prefix) 표시
Prepends an icon to the component, uses the same syntax as v-icon
Prepends an icon inside the component's input, uses the same syntax as v-icon
Puts input in readonly state
선택시 item-value 로 지정된 값이 아니라 오브젝트가 바로 반환되도록 바꿈.
Reverses the input orientation
Adds a border radius to the input
Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message
Search value. Can be used with .sync modifier.
Creates a segmented button
Round if outlined and increase border-radius if filled. Must be used with either outlined or filled
Label does not move on focus/dirty
Changes display of selections to chips with the small property
인풋의 스타일을 바꿈
포커스 되지 않은 요소의 불투명도를 낮춤
Puts the input in a manual success state
Puts the input in a success state and passes through custom success messages.
접미사(suffix) 표시
인풋 타입을 설정
blur 이벤트까지 검증을 지연
The input's value
Apply a custom value comparator function
Adds an item inside the input and after input content
Adds an item after menu content
Adds an item outside the input and after input content
The default Vue slot.
Define a custom item appearance
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}Replaces the default label
Customize the messages slot.
{
key: number, // the messages index
message: string, // the message
}필터링된 아이템이 없을때 보여짐
Adds an item outside the input and before input content
Adds an item inside the input and before input content
Adds an item before menu content
커스텀 프로그레스 바를 위한 슬롯(loading prop이 부울 False 가 아닐때 표시)
Define a custom selection appearance
{
parent: VueComponent
item: object
index: number
select: function
selected: boolean
disabled: boolean
}Emitted when the input is blurred
EventEmitted when the input is changed by user interaction
anyEmitted when input is clicked
MouseEventEmitted when appended icon is clicked
EventEmitted when appended outer icon is clicked
EventEmitted when clearable icon clicked
EventEmitted when prepended icon is clicked
EventEmitted when prepended inner icon is clicked
EventEmitted when component is focused
Event연결된 모델을 업데이트 (The updated bound model)
anyEmitted when any key is pressed
KeyboardEventEmitted when click is pressed
MouseEventEmitted when click is released
MouseEventThe error.sync event
booleanEmitted when menu item is selected using keyboard arrows
numberThe search-input.sync event
string$border-radius-root $border-radius-root 0 0 !default;48px !default;42px !default;12px !default;12px !default;16px !default;38px !default;8px 16px !default;$border-radius-root !default;0 1px 6px 0 rgba(32,33,36,0.28) !default;2 !default;2px 0 !default;16px !default;calc(50% - 10px) !default;12px !default;0 4px 6px 0 rgba(32,33,36,0.28) !default;0 0 $border-radius-root $border-radius-root !default;thin 0 !default;48px !default;-16px !default;16px !default;48px !default;간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
You can add a counter to v-overflow-btn to control the max char count
v-overflow-btn can be disabled in order to prevent a user from interacting with it
You can use dense prop to reduce overflow button height and lower max height of list items.
editable v-overflow-btn can be directly edited, just as v-text-field
텍스트 필드는 대체 박스 디자인과 함께 사용될 수 있습니다. Append 나 prepend 아이콘 prop들은 이 모드를 지원하지 "않습니다".
You can add a hint for the user using the hint property
v-overflow-btn can have loading state with a linear progress bar under them
You can set underlying v-menu props using menu-props property
v-overflow-btn can be put into readonly mode, it'll become inactive but won't change the color
segmented v-overflow-btn has and additional divider between the content and the icon
더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!