VStepper API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| bg-color | ||
| Applies specified color to the control’s background. Used on components that also support the color prop. - 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 . | ||
| border | ||
| Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. | ||
| 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 . | ||
| disabled | ||
| Puts all children components into a disabled state. | ||
| editable | ||
| Marks step as editable. | ||
| elevation | ||
| Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page . | ||
| flat | ||
| Removes the stepper’s elevation. | ||
| height | ||
| Sets the height for the component. | ||
| hide-actions | ||
| Hide actions bar (prev and next buttons). | ||
| item-title | ||
| Property on supplied items that contains its title. | ||
| item-value | ||
| Property on supplied items that contains its value. | ||
| items | ||
| An array of strings or objects used for automatically generating children components. | ||
| location | ||
| Specifies the component’s location. Can combine by using a space separated string. | ||
| lt-labels | ||
| Places the labels beneath the step. | ||
| mandatory | ||
| Forces at least one item to always be selected (if available). | ||
| max | ||
| Sets a maximum number of selections that can be made. | ||
| max-height | ||
| Sets the maximum height for the component. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| min-height | ||
| Sets the minimum height for the component. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| mobile | ||
| Forces the stepper into a mobile state, removing labels from stepper items. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| multiple | ||
| Allows one to select multiple items. | ||
| next-text | ||
| The text used for the Next button. | ||
| non-linear | ||
| Allow user to jump to any step. | ||
| position | ||
| Sets the position for the component. | ||
| prev-text | ||
| The text used for the Prev button. | ||
| rounded | ||
| Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page . | ||
| selected-class | ||
| Configure the active CSS class applied when an item is selected. | ||
| tag | ||
| Specify a custom tag used on the root element. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| width | ||
| Sets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| actions |
| Slot for customizing v-stepper-actions . |
| default |
| The default Vue slot. |
| header |
| Slot for customizing the header. |
| header-item |
| Slot for customizing all header items. |
| icon |
| Slot for customizing all stepper item icons. |
| item |
| Define a custom item appearance. |
| next |
| Slot for customizing the next step functionailty |
| prev |
| Slot for customizing the prev step functionality |
| subtitle |
| Slot for the component’s subtitle content. |
| title |
| Slot for the component’s title content. |
| [`header-item.${string}`] |
| Slot for customizing header items when using the items prop. |
| [`item.${string}`] |
| Slot for customizing the content for each step. |
可用属性
| next |
| Move to the next step. |
| prev |
| Move to the next step. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $stepper-actions-padding | |
| $stepper-actions-stepper-padding | |
| $stepper-actions-stepper-window-item-padding | |
| $stepper-alt-labels-flex-basis | |
| $stepper-alt-labels-header-divider | |
| $stepper-border-radius | |
| $stepper-elevation | |
| $stepper-header-divider-margin | |
| $stepper-header-elevation | |
| $stepper-item-alt-labels-margin-bottom | |
| $stepper-item-avatar-background | |
| $stepper-item-avatar-color | |
| $stepper-item-avatar-font-size | |
| $stepper-item-avatar-icon-font-size | |
| $stepper-item-avatar-margin-inline-end | |
| $stepper-item-opacity | |
| $stepper-item-padding | |
| $stepper-item-subtitle-font-size | |
| $stepper-item-subtitle-line-height | |
| $stepper-item-subtitle-opacity | |
| $stepper-item-title-line-height | |
| $stepper-item-transition-duration | |
| $stepper-item-transition-property | |
| $stepper-item-transition-timing-function | |
| $stepper-window-margin | |