#Banners
The v-banner component is used as a middle-interrupting message to the user with one to two actions. It comes in two variations single-line and multi-line (implicit). These can have icons and actions that you can use with your message. Note that only one banner should be shown at a time.
#Usage
Banners can contain one to two lines of text, to which actions and icons can be added.
#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-btncomponents |
#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 to explicitly control the content and functionality within it.
#Prepend
The prepend slot allows you to to explicitly control the content and functionality within it. Icons also help to emphasize a banner’s message.