v-banner component is used as middle-interruptive message to user with 1-2 actions. It comes in 2 variations, single-line and multi-line (implicit). These can have icons which you can use with your message and actions.
Banners can have 1-2 lines of text, actions and icon.
Applies specified color to the control - it can be the name of material color (for example
purple) or css color (
rgba(255, 0, 0, 0.5))
Applies the dark theme variant
Designates an elevation between 0 and 24
Sets the component height
Designates a specific icon
Designates a specific icon color
Applies the light theme variant
Sets the maximum height for the content
Sets the maximum width for the content
Sets the minimum height for the content
Sets the minimum width for the content
Sets the designated mobile breakpoint
Label does not move on focus/dirty
Position the banner to the top of the screen when scrolling. Evergreen browsers only
Specifies a tag
Removes the component's border-radius
The width of the content
Single-line VBanner is used for small amount of information and is recommended for desktop only implementations. You can optionally enable the sticky prop to ensure the content is pinned to the screen (note: does not work in IE11). You can find more information about sticky positioning here.
Two-line VBanner can store larger amout of data, use it for big messages.
The icon slot allows you to to explicitly control the content and functionality within it.
Icon click event
click:icon event on icon click, even with custom icon slot.
actions slot has
dismiss function in its scope, you can use it to easily dismiss banner.