VSnackbar API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| absolute | ||
| Applies position: absolute to the content element. | ||
| activator | ||
| Explicitly sets the overlay’s activator. | ||
| activator-props | ||
| Apply custom properties to the activator. | ||
| attach | ||
| Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. | ||
| close-delay | ||
| Milliseconds to wait before closing component. Only applies to hover and focus events. | ||
| close-on-back | ||
| Closes the overlay content when the browser’s back button is pressed or $router.back() is called, cancelling the original navigation. persistent overlays will cancel navigation and animate as if they were clicked outside instead of closing. | ||
| close-on-content-click | ||
| Closes component when you click on its content. | ||
| 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 . | ||
| contained | ||
| Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.). | ||
| content-class | ||
| Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the v-app component (unless the attach prop is provided) and is not targetable by classes passed directly on the component. | ||
| content-props | ||
| Apply custom properties to the content. | ||
| disabled | ||
| Removes the ability to click or target the component. | ||
| eager | ||
| Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. | ||
| height | ||
| Sets the height for the component. | ||
| location | ||
| Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both… | ||
| location-strategy | ||
| A function used to specifies how the component should position relative to its activator. | ||
| 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. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| multi-line | ||
| Gives the snackbar a larger minimum height. | ||
| offset | ||
| A single value that offsets content away from the target based upon what side it is on. | ||
| opacity | ||
| Sets the overlay opacity. | ||
| open-delay | ||
| Milliseconds to wait before opening component. Only applies to hover and focus events. | ||
| open-on-click | ||
| Activate the component when the activator is clicked. | ||
| open-on-focus | ||
| Activate the component when the activator is focused. | ||
| open-on-hover | ||
| Activate the component when the activator is hovered. | ||
| origin | ||
| Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin . | ||
| position | ||
| Sets the position for the component. | ||
| 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 . | ||
| target | ||
| For locationStrategy=“connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default. | ||
| text | ||
| Specify content text for the component. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| timeout | ||
| Time (in milliseconds) to wait until snackbar is automatically hidden. Use -1 to keep open indefinitely (0 in version < 2.3 ). It is recommended for this number to be between 4000 and 10000. Changes to this property will reset the timeout. | ||
| timer | ||
| Display a progress bar that counts down until the snackbar closes. Pass a string to set a custom color, otherwise uses info. | ||
| transition | ||
| Sets the component transition. Can be one of the built in or custom transition. | ||
| variant | ||
| Applies a distinct style to the component. | ||
| vertical | ||
| Stacks snackbar content on top of the actions (button). | ||
| width | ||
| Sets the width for the component. | ||
| z-index | ||
| The z-index used for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| actions |
| Used to bind styles to v-btn to match MD2 specification. |
| activator |
| When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation. |
| default |
| The default Vue slot. |
| text |
| Slot for the component’s text content. |
可用属性
| activatorEl |
| MISSING DESCRIPTION |
| animateClick |
| MISSING DESCRIPTION |
| contentEl |
| MISSING DESCRIPTION |
| globalTop |
| MISSING DESCRIPTION |
| localTop |
| MISSING DESCRIPTION |
| scrimEl |
| MISSING DESCRIPTION |
| updateLocation |
| MISSING DESCRIPTION |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $snackbar-absolute-z-index | |
| $snackbar-action-margin | |
| $snackbar-background | |
| $snackbar-border-radius | |
| $snackbar-btn-padding | |
| $snackbar-color | |
| $snackbar-content-padding | |
| $snackbar-elevation | |
| $snackbar-font-size | |
| $snackbar-font-weight | |
| $snackbar-letter-spacing | |
| $snackbar-line-height | |
| $snackbar-multi-line-wrapper-min-height | |
| $snackbar-plain-opacity | |
| $snackbar-transition-scale | |
| $snackbar-variants | |
| $snackbar-vertical-action-margin-bottom | |
| $snackbar-wrapper-margin | |
| $snackbar-wrapper-max-width | |
| $snackbar-wrapper-min-height | |
| $snackbar-wrapper-min-width | |
| $snackbar-wrapper-padding | |
| $snackbar-z-index | |