#Banners
The v-banner component is used as a middle-interrupting message to the user with one to two actions.
#Usage
Banners come in two variations single-line and multi-line (implicit). These can have icons and actions that you can use with your message.
<v-banner text="..." :stacked="false">
<template v-slot:actions>
<v-btn>Click me</v-btn>
</template>
</v-banner>#API
| Component | Description |
|---|---|
| v-banner | Primary Component |
| v-banner-text | Sub-component used to display the v-banner subtitle. Wraps the #text slot |
| v-banner-actions | Sub-component that modifies the default styling of v-btn. Wraps the #actions slot |
#Anatomy
The recommended placement of elements inside of v-banner is:
- Place a
v-banner-avatarorv-banner-iconon the far left - Place
v-banner-textto the right of any visual content - Place
v-banner-actionsto the far right of textual content, offset bottom
| Element / Area | Description |
|---|---|
| 1. Container | The Banner container holds all v-banner components |
| 2. Avatar / Icon (optional) | Leading media content intended to improve visual context |
| 3. Text | A content area for displaying text and other inline elements |
| 4. Actions (optional) | A content area that typically contains one or more v-btn components |
#Examples
#Props
#Lines
The prop lines can be used to specify how the displayed text should be handled based on its length.
#Sticky
You can optionally turn on the sticky prop to ensure that the content is pinned to the top of the screen.
#Slots
#Actions
Banners may have one or two text buttons that don’t stand out that much.
#Icon
The icon slot allows you to explicitly control the content and functionality within it.
#Prepend
The prepend slot allows you to explicitly control the content and functionality within it. Icons also help to emphasize a banner’s message.