VSwitch API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| alue | ||
| The value used when the component is selected in a group. If not provided, a unique ID will be used. | ||
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| base-color | ||
| Sets the color of the input when it is not focused. | ||
| center-affix | ||
| Vertically align appendInner, prependInner, clearIcon and label in the center. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| defaults-target | ||
| The target component to provide defaults values for. | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| direction | ||
| Changes the direction of the input. | ||
| disabled | ||
| Removes the ability to click or target the component. | ||
| error | ||
| Puts the input in a manual error state. | ||
| error-messages | ||
| 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. | ||
| false-icon | ||
| The icon used when inactive. | ||
| false-value | ||
| Sets value for falsy state. | ||
| flat | ||
| Display component without elevation. Default elevation for thumb is 4dp, flat resets it. | ||
| focused | ||
| orces a focused state styling on the component. | ||
| hide-details | ||
| 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. | ||
| hide-spin-buttons | ||
| Hides spin buttons on the input when type is set to number. | ||
| hint | ||
| Displays hint text below the input when focused. Force this always open with the persistent-hint property. | ||
| id | ||
| Sets the DOM id on the component. | ||
| indeterminate | ||
| Sets an indeterminate state for the switch. | ||
| inline | ||
| Puts children inputs into a row. | ||
| inset | ||
| Enlarge the v-switch track to encompass the thumb. | ||
| label | ||
| Sets the text of the v-label or v-field-label component. | ||
| loading | ||
| Displays circular progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color. | ||
| max-errors | ||
| Control the maximum number of shown errors from validation. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| messages | ||
| Displays a list of messages or a single message if using a string. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| multiple | ||
| Changes expected model to an array. | ||
| name | ||
| ets the component’s name attribute. | ||
| persistent-hint | ||
| Forces hint to always be visible. | ||
| prepend-icon | ||
| repends an icon to the component, uses the same syntax as v-icon. | ||
| readonly | ||
| Puts input in readonly state. | ||
| ripple | ||
| Applies the v-ripple directive. | ||
| rules | ||
| Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| true-icon | ||
| The icon used when active. | ||
| true-value | ||
| Sets value for truthy state. | ||
| type | ||
| Provides the default type for children selection controls. | ||
| validate-on | ||
| hange what type of event triggers validation to run. | ||
| validation-value | ||
| The value used when applying validation rules. | ||
| value-comparator | ||
| Apply a custom comparison algorithm to compare model-value and values contains in the items prop. | ||
| width | ||
| ets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| click:append | |
| Emitted when appended icon is clicked. | |
| click:prepend | |
| Emitted when prepended icon is clicked. | |
| update:focused | |
| Event that is emitted when the component’s focus state changes. | |
| update:indeterminate | |
| Event that is emitted when the component’s indeterminate state changes. | |
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| append |
| Adds an item inside the input and after input content. |
| default |
| The default Vue slot. |
| details |
| Slot for custom input details to modifying the display of messages. |
| input |
| The slot used for the default input element. |
| label |
| The default slot of the v-label or v-field-label component. |
| loader |
| Slot for custom loader (displayed when loading prop is equal to true). |
| message |
| Slot used to customize the message content. |
| prepend |
| Adds an item outside the input and before input content. |
| thumb |
| Slot for custom thumb content. |
| track-false |
| Slot for custom track content when value is false. |
| track-true |
| Slot for custom track content when value is true. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $switch-control-input-transition | |
| $switch-error-background-color | |
| $switch-error-color | |
| $switch-flex | |
| $switch-inset-thumb-height | |
| $switch-inset-thumb-off-height | |
| $switch-inset-thumb-off-width | |
| $switch-inset-thumb-width | |
| $switch-inset-track-border-radius | |
| $switch-inset-track-height | |
| $switch-inset-track-width | |
| $switch-label-margin-inline-start | |
| $switch-loader-color | |
| $switch-thumb-background | |
| $switch-thumb-color | |
| $switch-thumb-elevation | |
| $switch-thumb-flat-background | |
| $switch-thumb-flat-color | |
| $switch-thumb-height | |
| $switch-thumb-offset | |
| $switch-thumb-radius | |
| $switch-thumb-transition | |
| $switch-thumb-vertical-transform | |
| $switch-thumb-width | |
| $switch-track-background | |
| $switch-track-height | |
| $switch-track-opacity | |
| $switch-track-radius | |
| $switch-track-transition | |
| $switch-track-width | |