Banner

The 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.

<template>
<v-card>
<v-system-bar></v-system-bar>
<v-toolbar flat>
<v-toolbar-title>My Document</v-toolbar-title>
<div class="flex-grow-1"></div>
<div>
<v-switch
v-model="sticky"
label="Sticky Banner"
hide-details
></v-switch>
</div>
</v-toolbar>
<v-banner
single-line
:sticky="sticky"
>
We can't save your edits while you are in offline mode.

<template v-slot:actions>
<v-btn
text
color="deep-purple accent-4"
>Get Online</v-btn>
</template>
</v-banner>
<v-card-text class="grey lighten-4">
<v-sheet
max-width="800"
height="300"
class="mx-auto"
></v-sheet>
</v-card-text>
</v-card>
</template>
Last Updated 5 years ago
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages