407 lines
10 KiB
Vue
407 lines
10 KiB
Vue
<template>
|
|
<v-container
|
|
id="alerts"
|
|
fluid
|
|
tag="section"
|
|
>
|
|
<base-v-component
|
|
heading="Alerts"
|
|
link="components/alerts"
|
|
/>
|
|
|
|
<v-row>
|
|
<v-col
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<v-card>
|
|
<v-card-text>
|
|
<base-subheading subheading="Notification Style" />
|
|
|
|
<base-material-alert
|
|
color="info"
|
|
dark
|
|
>
|
|
This is a plain notification.
|
|
</base-material-alert>
|
|
|
|
<base-material-alert
|
|
color="info"
|
|
dark
|
|
dismissible
|
|
>
|
|
This is a notification with close button.
|
|
</base-material-alert>
|
|
|
|
<base-material-alert
|
|
color="info"
|
|
dark
|
|
dismissible
|
|
icon="mdi-bell"
|
|
>
|
|
This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.
|
|
</base-material-alert>
|
|
|
|
<base-material-alert
|
|
color="primary"
|
|
dark
|
|
dismissible
|
|
icon="mdi-bell"
|
|
>
|
|
You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.
|
|
</base-material-alert>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<v-card>
|
|
<v-card-text>
|
|
<base-subheading subheading="Notification states" />
|
|
|
|
<base-material-alert
|
|
v-for="color in colors"
|
|
:key="color"
|
|
:color="color"
|
|
dark
|
|
dismissible
|
|
>
|
|
<span
|
|
class="text-uppercase"
|
|
v-text="color"
|
|
/> — This is a regular alert made with the color of "{{ color }}"
|
|
</base-material-alert>
|
|
|
|
<base-material-alert
|
|
color="secondary"
|
|
dark
|
|
dismissible
|
|
>
|
|
<span>PRIMARY</span> — This is a regular alert made with the color "secondary"
|
|
</base-material-alert>
|
|
|
|
<base-material-alert
|
|
color="pink darken-1"
|
|
dark
|
|
dismissible
|
|
>
|
|
<span>PINK DARKEN-1</span> — This is a regular alert made with the color "pink darken-1"
|
|
</base-material-alert>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12">
|
|
<v-card>
|
|
<v-card-text class="text-center">
|
|
<base-subheading
|
|
class="text-center"
|
|
subheading="Snackbar Locations"
|
|
/>
|
|
|
|
<v-row
|
|
class="mt-n12"
|
|
justify="center"
|
|
>
|
|
<v-col
|
|
cols="10"
|
|
lg="8"
|
|
>
|
|
<v-row>
|
|
<v-col
|
|
v-for="dir in directions"
|
|
:key="dir"
|
|
cols="4"
|
|
>
|
|
<v-btn
|
|
color="secondary"
|
|
default
|
|
class="v-btn--block"
|
|
@click="randomColor(), direction = dir, snackbar = true"
|
|
>
|
|
{{ dir }}
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<base-subheading
|
|
class="text-center"
|
|
subheading="Dialogs"
|
|
/>
|
|
|
|
<v-row
|
|
class="mt-n12"
|
|
justify="center"
|
|
>
|
|
<v-col
|
|
cols="10"
|
|
lg="8"
|
|
>
|
|
<v-row>
|
|
<v-col cols="4">
|
|
<v-btn
|
|
color="secondary"
|
|
default
|
|
rounded
|
|
@click="dialog = true"
|
|
>
|
|
Classic Dialog
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="4">
|
|
<v-btn
|
|
color="info"
|
|
default
|
|
rounded
|
|
@click="dialog2 = true"
|
|
>
|
|
Notice Modal
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="4">
|
|
<v-btn
|
|
color="pink darken-1"
|
|
dark
|
|
default
|
|
rounded
|
|
@click="dialog3 = true"
|
|
>
|
|
Small Alert Modal
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<base-material-snackbar
|
|
v-model="snackbar"
|
|
:type="color"
|
|
v-bind="{
|
|
[parsedDirection[0]]: true,
|
|
[parsedDirection[1]]: true
|
|
}"
|
|
>
|
|
Welcome to <span class="font-weight-bold"> MATERIAL DASHBOARD </span> — a beautiful admin panel for every web developer.
|
|
</base-material-snackbar>
|
|
|
|
<v-dialog
|
|
v-model="dialog"
|
|
max-width="500"
|
|
>
|
|
<v-card class="text-center">
|
|
<v-card-title>
|
|
Dialog Title
|
|
|
|
<v-spacer />
|
|
|
|
<v-icon
|
|
aria-label="Close"
|
|
@click="dialog = false"
|
|
>
|
|
mdi-close
|
|
</v-icon>
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
|
|
<v-btn
|
|
color="error"
|
|
text
|
|
@click="dialog = false"
|
|
>
|
|
Close
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-dialog
|
|
v-model="dialog2"
|
|
max-width="500"
|
|
>
|
|
<v-card>
|
|
<v-card-title>
|
|
How do you become an affiliate?
|
|
|
|
<v-spacer />
|
|
|
|
<v-icon
|
|
aria-label="Close"
|
|
@click="dialog2 = false"
|
|
>
|
|
mdi-close
|
|
</v-icon>
|
|
</v-card-title>
|
|
|
|
<v-card-text class="body-1 text-center">
|
|
<v-row>
|
|
<v-col
|
|
cols="12"
|
|
md="8"
|
|
>
|
|
<div>
|
|
<div>
|
|
<strong>1. Register</strong>
|
|
</div>
|
|
|
|
<div class="grey--text">
|
|
The first step is to create an account at Creative Tim. You can choose a social network or go for the classic version, whatever works best for you.
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
|
|
<v-col
|
|
class="hidden-sm-and-down"
|
|
md="4"
|
|
>
|
|
<v-sheet>
|
|
<v-img
|
|
src="https://demos.creative-tim.com/material-dashboard/assets/img/card-1.jpg"
|
|
height="100"
|
|
width="200"
|
|
/>
|
|
</v-sheet>
|
|
</v-col>
|
|
|
|
<v-col
|
|
cols="12"
|
|
md="8"
|
|
>
|
|
<div>
|
|
<div>
|
|
<strong>2. Apply</strong>
|
|
</div>
|
|
|
|
<div class="grey--text">
|
|
The first step is to create an account at <a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
|
|
<v-col
|
|
class="hidden-sm-and-down"
|
|
md="4"
|
|
>
|
|
<v-sheet>
|
|
<v-img
|
|
src="https://demos.creative-tim.com/material-dashboard/assets/img/card-2.jpg"
|
|
height="100"
|
|
width="200"
|
|
/>
|
|
</v-sheet>
|
|
</v-col>
|
|
|
|
<v-col cols="12">
|
|
If you have more questions, don't hesitate to contact us or send us a tweet @creativetim. We're here to help!
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-btn
|
|
class="mt-6"
|
|
color="info"
|
|
depressed
|
|
default
|
|
rounded
|
|
@click="dialog2 = false"
|
|
>
|
|
Sounds good
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-dialog
|
|
v-model="dialog3"
|
|
max-width="300"
|
|
>
|
|
<v-card>
|
|
<v-card-title>
|
|
Are you sure?
|
|
|
|
<v-spacer />
|
|
|
|
<v-icon
|
|
aria-label="Close"
|
|
@click="dialog3 = false"
|
|
>
|
|
mdi-close
|
|
</v-icon>
|
|
</v-card-title>
|
|
|
|
<v-card-text class="pb-6 pt-12 text-center">
|
|
<v-btn
|
|
class="mr-3"
|
|
text
|
|
@click="dialog3 = false"
|
|
>
|
|
Nevermind
|
|
</v-btn>
|
|
|
|
<v-btn
|
|
color="success"
|
|
text
|
|
@click="dialog3 = false"
|
|
>
|
|
Yes
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DashboardNotifications',
|
|
|
|
data: () => ({
|
|
color: 'info',
|
|
colors: [
|
|
'info',
|
|
'success',
|
|
'warning',
|
|
'error',
|
|
],
|
|
dialog: false,
|
|
dialog2: false,
|
|
dialog3: false,
|
|
direction: 'top center',
|
|
directions: [
|
|
'top left',
|
|
'top center',
|
|
'top right',
|
|
'bottom left',
|
|
'bottom center',
|
|
'bottom right',
|
|
],
|
|
snackbar: false,
|
|
}),
|
|
|
|
computed: {
|
|
parsedDirection () {
|
|
return this.direction.split(' ')
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
randomColor () {
|
|
this.color = this.colors[Math.floor(Math.random() * this.colors.length)]
|
|
},
|
|
},
|
|
}
|
|
</script>
|