Init
This commit is contained in:
Gregor Schulte
432
src/views/dashboard/component/Buttons.vue
Normal file
432
src/views/dashboard/component/Buttons.vue
Normal file
@@ -0,0 +1,432 @@
|
||||
<template>
|
||||
<v-container
|
||||
id="buttons"
|
||||
fluid
|
||||
tag="section"
|
||||
>
|
||||
<base-v-component
|
||||
heading="Buttons"
|
||||
link="components/buttons"
|
||||
/>
|
||||
|
||||
<v-card>
|
||||
<v-card-text class="pt-0">
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<base-subheading>
|
||||
<h5 class="font-weight-light">
|
||||
Pick your Color
|
||||
</h5>
|
||||
</base-subheading>
|
||||
|
||||
<div>
|
||||
<v-btn
|
||||
v-for="(color, i) in colors"
|
||||
:key="i"
|
||||
elevation="1"
|
||||
:color="color === 'default' ? undefined : color"
|
||||
class="ma-1"
|
||||
>
|
||||
{{ color }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="pt-0"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<base-subheading>
|
||||
<h5 class="font-weight-light">
|
||||
Buttons with Label
|
||||
</h5>
|
||||
</base-subheading>
|
||||
|
||||
<div>
|
||||
<v-btn
|
||||
v-for="(dir, i) in ['left', 'right']"
|
||||
:key="i"
|
||||
elevation="1"
|
||||
class="ma-1"
|
||||
>
|
||||
<v-icon
|
||||
:left="dir === 'left'"
|
||||
:right="dir === 'right'"
|
||||
:class="dir === 'right' && 'order-last'"
|
||||
v-text="icons[dir]"
|
||||
/>
|
||||
{{ dir }}
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
v-for="(color, i) in colors.slice(2)"
|
||||
:key="`btn-${i}`"
|
||||
elevation="1"
|
||||
:color="color === 'default' ? undefined : color"
|
||||
class="ma-1"
|
||||
>
|
||||
<v-icon
|
||||
left
|
||||
v-text="icons[color]"
|
||||
/>
|
||||
{{ color }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<base-subheading>
|
||||
<h5 class="font-weight-light">
|
||||
Pick your Size
|
||||
</h5>
|
||||
</base-subheading>
|
||||
|
||||
<v-btn
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
elevation="1"
|
||||
:small="n === 1"
|
||||
:large="n === 3"
|
||||
class="ma-1"
|
||||
color="secondary"
|
||||
>
|
||||
{{ n === 1 ? 'small' : n === 2 ? 'regular' : 'large' }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<base-subheading>
|
||||
<h5 class="font-weight-light">
|
||||
Pick your Style
|
||||
</h5>
|
||||
</base-subheading>
|
||||
|
||||
<v-btn
|
||||
class="ma-1"
|
||||
color="secondary"
|
||||
>
|
||||
Default
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
class="ma-1"
|
||||
elevation="1"
|
||||
color="secondary"
|
||||
rounded
|
||||
>
|
||||
Rounded
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
class="ma-1"
|
||||
color="secondary"
|
||||
elevation="1"
|
||||
rounded
|
||||
>
|
||||
<v-icon left>
|
||||
mdi-heart
|
||||
</v-icon>
|
||||
With Icon
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
class="ma-1"
|
||||
color="secondary"
|
||||
elevation="1"
|
||||
fab
|
||||
small
|
||||
>
|
||||
<v-icon>
|
||||
mdi-heart
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
class="ma-1"
|
||||
color="secondary"
|
||||
text
|
||||
>
|
||||
Simple
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<base-subheading>
|
||||
<h5 class="font-weight-light">
|
||||
Pagination
|
||||
</h5>
|
||||
</base-subheading>
|
||||
|
||||
<v-pagination
|
||||
:length="5"
|
||||
:value="1"
|
||||
circle
|
||||
class="justify-start"
|
||||
/>
|
||||
|
||||
<v-pagination
|
||||
:length="3"
|
||||
:value="2"
|
||||
circle
|
||||
class="justify-start"
|
||||
next-icon="mdi-menu-right"
|
||||
prev-icon="mdi-menu-left"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<base-subheading>
|
||||
<h5 class="font-weight-light">
|
||||
Button Group
|
||||
</h5>
|
||||
</base-subheading>
|
||||
|
||||
<v-sheet>
|
||||
<v-btn-toggle color="teal">
|
||||
<v-btn
|
||||
v-for="dir in ['left', 'middle', 'right']"
|
||||
:key="dir"
|
||||
>
|
||||
{{ dir }}
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-sheet>
|
||||
|
||||
<div class="my-6" />
|
||||
|
||||
<v-btn-toggle
|
||||
color="teal"
|
||||
rounded
|
||||
>
|
||||
<v-btn
|
||||
v-for="n in 4"
|
||||
:key="n"
|
||||
>
|
||||
{{ n }}
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
|
||||
<div class="my-2" />
|
||||
|
||||
<v-btn-toggle
|
||||
color="teal"
|
||||
rounded
|
||||
>
|
||||
<v-btn
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
>
|
||||
{{ n + 4 }}
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-col>
|
||||
|
||||
<template v-for="(s, i) in social">
|
||||
<v-col
|
||||
:key="i"
|
||||
cols="12"
|
||||
class="py-1"
|
||||
>
|
||||
<base-subheading
|
||||
v-if="i === 0"
|
||||
:key="`heading-${i}`"
|
||||
>
|
||||
<h5 class="font-weight-light">
|
||||
Social buttons
|
||||
</h5>
|
||||
</base-subheading>
|
||||
|
||||
<v-row dense>
|
||||
<v-col
|
||||
cols="auto"
|
||||
md="4"
|
||||
sm="5"
|
||||
>
|
||||
<v-btn
|
||||
elevation="1"
|
||||
:color="s.color"
|
||||
dark
|
||||
>
|
||||
<v-icon
|
||||
left
|
||||
v-text="s.icon"
|
||||
/>
|
||||
{{ s.text }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="auto"
|
||||
md="1"
|
||||
sm="1"
|
||||
>
|
||||
<v-btn
|
||||
elevation="1"
|
||||
:color="s.color"
|
||||
dark
|
||||
min-width="0"
|
||||
max-width="41"
|
||||
>
|
||||
<v-icon v-text="s.icon" />
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="auto"
|
||||
md="1"
|
||||
sm="1"
|
||||
>
|
||||
<v-btn
|
||||
elevation="1"
|
||||
:color="s.color"
|
||||
dark
|
||||
fab
|
||||
min-width="0"
|
||||
small
|
||||
>
|
||||
<v-icon v-text="s.icon" />
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="auto"
|
||||
md="1"
|
||||
sm="1"
|
||||
>
|
||||
<v-btn
|
||||
:color="s.color"
|
||||
dark
|
||||
icon
|
||||
min-width="0"
|
||||
>
|
||||
<v-icon
|
||||
:color="s.color"
|
||||
v-text="s.icon"
|
||||
/>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="auto"
|
||||
md="3"
|
||||
sm="4"
|
||||
>
|
||||
<v-btn
|
||||
:color="s.color"
|
||||
dark
|
||||
text
|
||||
>
|
||||
<v-icon
|
||||
left
|
||||
:color="s.color"
|
||||
v-text="s.icon"
|
||||
/>
|
||||
{{ s.text }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</template>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DashboardButtons',
|
||||
|
||||
data: () => ({
|
||||
colors: [
|
||||
'default',
|
||||
'secondary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'error',
|
||||
],
|
||||
icons: {
|
||||
left: 'mdi-chevron-left',
|
||||
right: 'mdi-chevron-right',
|
||||
info: 'mdi-exclamation',
|
||||
success: 'mdi-check',
|
||||
warning: 'mdi-alert',
|
||||
error: 'mdi-close',
|
||||
},
|
||||
social: [
|
||||
{
|
||||
color: '#55ACEE',
|
||||
icon: 'mdi-twitter',
|
||||
text: 'Connect with Twitter',
|
||||
},
|
||||
{
|
||||
color: '#3B5998',
|
||||
icon: 'mdi-facebook',
|
||||
text: 'Share - 2.2K',
|
||||
},
|
||||
{
|
||||
color: '#DD4b39',
|
||||
icon: 'mdi-google-plus',
|
||||
text: 'Share on Google+',
|
||||
},
|
||||
{
|
||||
color: '#0976B4',
|
||||
icon: 'mdi-linkedin',
|
||||
text: 'Connect with LinkedIn',
|
||||
},
|
||||
{
|
||||
color: '#CC2127',
|
||||
icon: 'mdi-pinterest',
|
||||
text: 'Pint It - 212',
|
||||
},
|
||||
{
|
||||
color: '#E52D27',
|
||||
icon: 'mdi-youtube',
|
||||
text: 'View on Youtube',
|
||||
},
|
||||
{
|
||||
color: '#35465C',
|
||||
icon: 'mdi-tumblr',
|
||||
text: 'Repost',
|
||||
},
|
||||
{
|
||||
color: '#333333',
|
||||
icon: 'mdi-github-circle',
|
||||
text: 'Connect with Github',
|
||||
},
|
||||
{
|
||||
color: '#1769FF',
|
||||
icon: 'mdi-behance',
|
||||
text: 'Follow Us',
|
||||
},
|
||||
{
|
||||
color: '#EA4C89',
|
||||
icon: 'mdi-dribbble',
|
||||
text: 'Follow us on Dribbble',
|
||||
},
|
||||
{
|
||||
color: '#FF4500',
|
||||
icon: 'mdi-reddit',
|
||||
text: 'Repost - 232',
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
300
src/views/dashboard/component/Grid.vue
Normal file
300
src/views/dashboard/component/Grid.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<v-container
|
||||
id="grid"
|
||||
fluid
|
||||
tag="section"
|
||||
>
|
||||
<base-v-component
|
||||
heading="Grid System"
|
||||
link="components/grid"
|
||||
/>
|
||||
|
||||
<v-row class="text-center">
|
||||
<base-subheading
|
||||
subheading="XS Grid"
|
||||
text="Always Horizontal"
|
||||
class="pb-0 pl-3 mt-5"
|
||||
/>
|
||||
|
||||
<v-col
|
||||
v-for="n in 3"
|
||||
:key="`cols-${n}`"
|
||||
cols="4"
|
||||
class="pt-0"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text class="red--text text--darken-4">
|
||||
col-4
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<base-subheading
|
||||
subheading="SM Grid"
|
||||
text="Collapsed at 600px"
|
||||
class="pb-0 pl-3 mt-5"
|
||||
/>
|
||||
|
||||
<v-col
|
||||
v-for="n in 3"
|
||||
:key="`sm-${n}`"
|
||||
cols="12"
|
||||
sm="4"
|
||||
class="pt-0"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text class="red--text text--darken-4">
|
||||
col-sm-4
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<base-subheading
|
||||
subheading="MD Grid"
|
||||
text="Collapsed at 960px"
|
||||
class="pb-0 pl-3 mt-5"
|
||||
/>
|
||||
|
||||
<v-col
|
||||
v-for="n in 3"
|
||||
:key="`md-${n}`"
|
||||
cols="12"
|
||||
md="4"
|
||||
class="pt-0"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text class="red--text text--darken-4">
|
||||
col-md-4
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<base-subheading
|
||||
subheading="LG Grid"
|
||||
text="Collapsed at 1280px"
|
||||
class="pb-0 pl-3 mt-5"
|
||||
/>
|
||||
|
||||
<v-col
|
||||
v-for="n in 3"
|
||||
:key="`lg-${n}`"
|
||||
cols="12"
|
||||
lg="4"
|
||||
class="pt-0"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text class="red--text text--darken-4">
|
||||
col-lg-4
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<base-subheading
|
||||
subheading="XL Grid"
|
||||
text="Collapsed at 1920px"
|
||||
class="pb-0 pl-3 mt-5"
|
||||
/>
|
||||
|
||||
<v-col
|
||||
v-for="n in 3"
|
||||
:key="`xl-${n}`"
|
||||
cols="12"
|
||||
xl="4"
|
||||
class="pt-0"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text class="red--text text--darken-4">
|
||||
col-xl-4
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<base-subheading
|
||||
subheading="Mixed Grid"
|
||||
text="Showing different sizes on different screens"
|
||||
class="pb-0 pl-3 mt-5"
|
||||
/>
|
||||
|
||||
<v-col
|
||||
v-for="n in 4 "
|
||||
:key="`mixed-${n}`"
|
||||
sm="6"
|
||||
lg="3"
|
||||
class="pt-0"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text class="red--text text--darken-4">
|
||||
col-xl-4
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="text-center">
|
||||
<base-subheading
|
||||
subheading="Offset Grid"
|
||||
text="Adding some space when neede"
|
||||
class="pb-0 pl-3 mt-5"
|
||||
/>
|
||||
|
||||
<v-col
|
||||
md="3"
|
||||
class="pt-0"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text class="red--text text--darken-4">
|
||||
col-md-3
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
md="3"
|
||||
class="ml-auto"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text class="red--text text--darken-4">
|
||||
col-md-4 ml-auto mr-auto
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="text-center">
|
||||
<v-col
|
||||
v-for="n in 2"
|
||||
:key="`offset-${n}`"
|
||||
class="ml-auto mr-auto"
|
||||
md="4"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text class="red--text text--darken-4">
|
||||
col-md-4 ml-auto mr-auto
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="text-center mb-12">
|
||||
<v-col
|
||||
class="ml-auto mr-auto"
|
||||
md="6"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text class="red--text text--darken-4">
|
||||
col-md-6 ml-auto mr-auto
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<paragraph-heading class="text-center pb-0">
|
||||
<h4 class="font-weight-light">
|
||||
Paragraphs
|
||||
</h4>
|
||||
</paragraph-heading>
|
||||
|
||||
<v-col cols="12 pt-0">
|
||||
<v-card>
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<paragraph-heading>Some Title Here</paragraph-heading>
|
||||
|
||||
<v-card-text class="font-weight-light">
|
||||
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought.
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<paragraph-heading>Another Title Here</paragraph-heading>
|
||||
|
||||
<v-card-text class="font-weight-light">
|
||||
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought.
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<paragraph-heading>Some Title Here</paragraph-heading>
|
||||
|
||||
<v-card-text class="font-weight-light">
|
||||
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<paragraph-heading>Another Title Here</paragraph-heading>
|
||||
|
||||
<v-card-text class="font-weight-light">
|
||||
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<paragraph-heading>Another Title Here</paragraph-heading>
|
||||
|
||||
<v-card-text class="font-weight-light">
|
||||
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<paragraph-heading>Some Title Here</paragraph-heading>
|
||||
|
||||
<v-card-text class="font-weight-light">
|
||||
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<paragraph-heading>Another Title Here</paragraph-heading>
|
||||
|
||||
<v-card-text class="font-weight-light">
|
||||
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DashboardGrid',
|
||||
|
||||
components: {
|
||||
ParagraphHeading: {
|
||||
render (h) {
|
||||
return h('div', {
|
||||
class: 'headline font-weight-light col cols-12',
|
||||
}, this.$slots.default)
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
301
src/views/dashboard/component/Icons.vue
Normal file
301
src/views/dashboard/component/Icons.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<v-container
|
||||
id="icons"
|
||||
fluid
|
||||
tag="section"
|
||||
>
|
||||
<base-v-component
|
||||
heading="Icons"
|
||||
link="components/icons"
|
||||
/>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<base-material-card color="green">
|
||||
<template v-slot:heading>
|
||||
<div class="display-2 font-weight-light">
|
||||
Material Design Icons
|
||||
</div>
|
||||
|
||||
<div class="subtitle-1 font-weight-light">
|
||||
See all available
|
||||
<a
|
||||
class="white--text"
|
||||
href="https://materialdesignicons.com/"
|
||||
target="_blank"
|
||||
>
|
||||
Icons
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-row
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<v-col
|
||||
v-for="icon in icons"
|
||||
:key="icon"
|
||||
class="ma-2"
|
||||
>
|
||||
<v-tooltip
|
||||
content-class="top"
|
||||
top
|
||||
>
|
||||
<template v-slot:activator="{ attrs, on }">
|
||||
<v-icon
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<span>{{ icon }}</span>
|
||||
</v-tooltip>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</base-material-card>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mx-auto"
|
||||
cols="auto"
|
||||
>
|
||||
<v-btn
|
||||
color="success"
|
||||
href="https://materialdesignicons.com/"
|
||||
large
|
||||
target="_blank"
|
||||
>
|
||||
<v-icon left>
|
||||
mdi-material-design
|
||||
</v-icon>
|
||||
<span>See all icons</span>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DashboardIcons',
|
||||
|
||||
data: () => ({
|
||||
icons: [
|
||||
'mdi-access-point',
|
||||
'mdi-access-point-network',
|
||||
'mdi-account',
|
||||
'mdi-account-alert',
|
||||
'mdi-account-box',
|
||||
'mdi-account-box-multiple',
|
||||
'mdi-account-box-outline',
|
||||
'mdi-account-card-details',
|
||||
'mdi-account-check',
|
||||
'mdi-account-circle',
|
||||
'mdi-account-convert',
|
||||
'mdi-account-edit',
|
||||
'mdi-account-group',
|
||||
'mdi-account-heart',
|
||||
'mdi-account-key',
|
||||
'mdi-account-location',
|
||||
'mdi-account-minus',
|
||||
'mdi-account-multiple',
|
||||
'mdi-account-multiple-check',
|
||||
'mdi-account-multiple-minus',
|
||||
'mdi-account-multiple-outline',
|
||||
'mdi-account-multiple-plus',
|
||||
'mdi-account-multiple-plus-outline',
|
||||
'mdi-account-network',
|
||||
'mdi-account-off',
|
||||
'mdi-account-outline',
|
||||
'mdi-account-plus',
|
||||
'mdi-account-plus-outline',
|
||||
'mdi-account-remove',
|
||||
'mdi-account-search',
|
||||
'mdi-account-search-outline',
|
||||
'mdi-account-settings',
|
||||
'mdi-account-settings-variant',
|
||||
'mdi-account-star',
|
||||
'mdi-account-switch',
|
||||
'mdi-accusoft',
|
||||
'mdi-adjust',
|
||||
'mdi-adobe',
|
||||
'mdi-air-conditioner',
|
||||
'mdi-airballoon',
|
||||
'mdi-airplane',
|
||||
'mdi-airplane-landing',
|
||||
'mdi-airplane-off',
|
||||
'mdi-airplane-takeoff',
|
||||
'mdi-airplay',
|
||||
'mdi-airport',
|
||||
'mdi-alarm',
|
||||
'mdi-alarm-bell',
|
||||
'mdi-alarm-check',
|
||||
'mdi-alarm-light',
|
||||
'mdi-alarm-multiple',
|
||||
'mdi-alarm-off',
|
||||
'mdi-alarm-plus',
|
||||
'mdi-alarm-snooze',
|
||||
'mdi-album',
|
||||
'mdi-alert',
|
||||
'mdi-alert-box',
|
||||
'mdi-alert-circle',
|
||||
'mdi-alert-circle-outline',
|
||||
'mdi-alert-decagram',
|
||||
'mdi-alert-octagon',
|
||||
'mdi-alert-octagram',
|
||||
'mdi-alert-outline',
|
||||
'mdi-alien',
|
||||
'mdi-all-inclusive',
|
||||
'mdi-alpha',
|
||||
'mdi-alphabetical',
|
||||
'mdi-altimeter',
|
||||
'mdi-amazon',
|
||||
'mdi-amazon-alexa',
|
||||
'mdi-amazon-drive',
|
||||
'mdi-ambulance',
|
||||
'mdi-amplifier',
|
||||
'mdi-anchor',
|
||||
'mdi-android',
|
||||
'mdi-android-debug-bridge',
|
||||
'mdi-android-head',
|
||||
'mdi-android-studio',
|
||||
'mdi-angle-acute',
|
||||
'mdi-angle-obtuse',
|
||||
'mdi-angle-right',
|
||||
'mdi-angular',
|
||||
'mdi-angularjs',
|
||||
'mdi-animation',
|
||||
'mdi-animation-play',
|
||||
'mdi-anvil',
|
||||
'mdi-apple',
|
||||
'mdi-apple-finder',
|
||||
'mdi-apple-icloud',
|
||||
'mdi-apple-ios',
|
||||
'mdi-apple-keyboard-caps',
|
||||
'mdi-apple-keyboard-command',
|
||||
'mdi-apple-keyboard-control',
|
||||
'mdi-apple-keyboard-option',
|
||||
'mdi-apple-keyboard-shift',
|
||||
'mdi-apple-safari',
|
||||
'mdi-application',
|
||||
'mdi-approval',
|
||||
'mdi-apps',
|
||||
'mdi-arch',
|
||||
'mdi-archive',
|
||||
'mdi-arrange-bring-forward',
|
||||
'mdi-arrange-bring-to-front',
|
||||
'mdi-arrange-send-backward',
|
||||
'mdi-arrange-send-to-back',
|
||||
'mdi-arrow-all',
|
||||
'mdi-arrow-bottom-left',
|
||||
'mdi-arrow-bottom-left-bold-outline',
|
||||
'mdi-arrow-bottom-left-thick',
|
||||
'mdi-arrow-bottom-right',
|
||||
'mdi-arrow-bottom-right-bold-outline',
|
||||
'mdi-arrow-bottom-right-thick',
|
||||
'mdi-arrow-collapse',
|
||||
'mdi-arrow-collapse-all',
|
||||
'mdi-arrow-collapse-down',
|
||||
'mdi-arrow-collapse-horizontal',
|
||||
'mdi-arrow-collapse-left',
|
||||
'mdi-arrow-collapse-right',
|
||||
'mdi-arrow-collapse-up',
|
||||
'mdi-arrow-collapse-vertical',
|
||||
'mdi-arrow-decision',
|
||||
'mdi-arrow-decision-auto',
|
||||
'mdi-arrow-decision-auto-outline',
|
||||
'mdi-arrow-decision-outline',
|
||||
'mdi-arrow-down',
|
||||
'mdi-arrow-down-bold',
|
||||
'mdi-arrow-down-bold-box',
|
||||
'mdi-arrow-down-bold-box-outline',
|
||||
'mdi-arrow-down-bold-circle',
|
||||
'mdi-arrow-down-bold-circle-outline',
|
||||
'mdi-arrow-down-bold-hexagon-outline',
|
||||
'mdi-arrow-down-bold-outline',
|
||||
'mdi-arrow-down-box',
|
||||
'mdi-arrow-down-drop-circle',
|
||||
'mdi-arrow-down-drop-circle-outline',
|
||||
'mdi-arrow-down-thick',
|
||||
'mdi-arrow-expand',
|
||||
'mdi-arrow-expand-all',
|
||||
'mdi-arrow-expand-down',
|
||||
'mdi-arrow-expand-horizontal',
|
||||
'mdi-arrow-expand-left',
|
||||
'mdi-arrow-expand-right',
|
||||
'mdi-arrow-expand-up',
|
||||
'mdi-arrow-expand-vertical',
|
||||
'mdi-arrow-left',
|
||||
'mdi-arrow-left-bold',
|
||||
'mdi-arrow-left-bold-box',
|
||||
'mdi-arrow-left-bold-box-outline',
|
||||
'mdi-arrow-left-bold-circle',
|
||||
'mdi-arrow-left-bold-circle-outline',
|
||||
'mdi-arrow-left-bold-hexagon-outline',
|
||||
'mdi-arrow-left-bold-outline',
|
||||
'mdi-arrow-left-box',
|
||||
'mdi-arrow-left-drop-circle',
|
||||
'mdi-arrow-left-drop-circle-outline',
|
||||
'mdi-arrow-left-right-bold-outline',
|
||||
'mdi-arrow-left-thick',
|
||||
'mdi-arrow-right',
|
||||
'mdi-arrow-right-bold',
|
||||
'mdi-arrow-right-bold-box',
|
||||
'mdi-arrow-right-bold-box-outline',
|
||||
'mdi-arrow-right-bold-circle',
|
||||
'mdi-arrow-right-bold-circle-outline',
|
||||
'mdi-arrow-right-bold-hexagon-outline',
|
||||
'mdi-arrow-right-bold-outline',
|
||||
'mdi-arrow-right-box',
|
||||
'mdi-arrow-right-drop-circle',
|
||||
'mdi-arrow-right-drop-circle-outline',
|
||||
'mdi-arrow-right-thick',
|
||||
'mdi-arrow-split-horizontal',
|
||||
'mdi-arrow-split-vertical',
|
||||
'mdi-arrow-top-left',
|
||||
'mdi-arrow-top-left-bold-outline',
|
||||
'mdi-arrow-top-left-thick',
|
||||
'mdi-arrow-top-right',
|
||||
'mdi-arrow-top-right-bold-outline',
|
||||
'mdi-arrow-top-right-thick',
|
||||
'mdi-arrow-up',
|
||||
'mdi-arrow-up-bold',
|
||||
'mdi-arrow-up-bold-box',
|
||||
'mdi-arrow-up-bold-box-outline',
|
||||
'mdi-arrow-up-bold-circle',
|
||||
'mdi-arrow-up-bold-circle-outline',
|
||||
'mdi-arrow-up-bold-hexagon-outline',
|
||||
'mdi-arrow-up-bold-outline',
|
||||
'mdi-arrow-up-box',
|
||||
'mdi-arrow-up-down-bold-outline',
|
||||
'mdi-arrow-up-drop-circle',
|
||||
'mdi-arrow-up-drop-circle-outline',
|
||||
'mdi-arrow-up-thick',
|
||||
'mdi-artist',
|
||||
'mdi-assistant',
|
||||
'mdi-asterisk',
|
||||
'mdi-at',
|
||||
'mdi-atlassian',
|
||||
'mdi-atom',
|
||||
'mdi-attachment',
|
||||
'mdi-audio-video',
|
||||
'mdi-audiobook',
|
||||
'mdi-augmented-reality',
|
||||
'mdi-auto-fix',
|
||||
'mdi-auto-upload',
|
||||
'mdi-autorenew',
|
||||
'mdi-av-timer',
|
||||
'mdi-axe',
|
||||
'mdi-azure',
|
||||
'mdi-baby',
|
||||
'mdi-baby-buggy',
|
||||
'mdi-backburger',
|
||||
'mdi-backspace',
|
||||
'mdi-backup-restore',
|
||||
'mdi-badminton'
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
406
src/views/dashboard/component/Notifications.vue
Normal file
406
src/views/dashboard/component/Notifications.vue
Normal file
@@ -0,0 +1,406 @@
|
||||
<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>
|
||||
418
src/views/dashboard/component/Tabs.vue
Normal file
418
src/views/dashboard/component/Tabs.vue
Normal file
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<v-container
|
||||
id="panels"
|
||||
fluid
|
||||
tag="section"
|
||||
>
|
||||
<base-v-component
|
||||
heading="Tabs"
|
||||
link="components/tabs"
|
||||
/>
|
||||
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-card class="my-0">
|
||||
<v-card-text>
|
||||
<base-subheading
|
||||
subheading="Navigation Pills"
|
||||
text="Horizontal Tabs"
|
||||
/>
|
||||
|
||||
<base-material-tabs color="warning">
|
||||
<v-tab
|
||||
v-for="(tab, i) in tabs"
|
||||
:key="i"
|
||||
>
|
||||
{{ tab }}
|
||||
</v-tab>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card
|
||||
flat
|
||||
class="my-0"
|
||||
>
|
||||
<v-card-text>
|
||||
<p>
|
||||
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
</p>
|
||||
|
||||
<div>This is very nice.</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card
|
||||
flat
|
||||
class="my-0"
|
||||
>
|
||||
<v-card-text>
|
||||
<p>
|
||||
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card
|
||||
flat
|
||||
class="my-0"
|
||||
>
|
||||
<v-card-text>
|
||||
<p>
|
||||
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Dynamically innovate resource-leveling customer service for state of the art customer service.
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</base-material-tabs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-card class="mt-0">
|
||||
<v-card-text>
|
||||
<base-subheading
|
||||
subheading="Navigation Pills"
|
||||
text="Vertical Tabs"
|
||||
/>
|
||||
|
||||
<base-material-tabs
|
||||
color="success"
|
||||
vertical
|
||||
>
|
||||
<v-tab
|
||||
v-for="(tab, i) in tabs"
|
||||
:key="i"
|
||||
class="mb-1"
|
||||
>
|
||||
{{ tab }}
|
||||
</v-tab>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card
|
||||
flat
|
||||
class="my-0"
|
||||
>
|
||||
<v-card-text class="pt-0">
|
||||
<p>
|
||||
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
</p>
|
||||
|
||||
<div>This is very nice.</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card
|
||||
flat
|
||||
class="my-0"
|
||||
>
|
||||
<v-card-text class="pt-0">
|
||||
<p>
|
||||
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card
|
||||
flat
|
||||
class="my-0"
|
||||
>
|
||||
<v-card-text class="pt-0">
|
||||
<p>
|
||||
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Dynamically innovate resource-leveling customer service for state of the art customer service.
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</base-material-tabs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<base-subheading subheading="Collapsible Accordion" />
|
||||
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel
|
||||
v-for="n in 5"
|
||||
:key="n"
|
||||
>
|
||||
<v-expansion-panel-header>
|
||||
Collapsible Group Item #{{ n }}
|
||||
</v-expansion-panel-header>
|
||||
|
||||
<v-expansion-panel-content>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-12"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<base-subheading
|
||||
subheading="Navigation Pills"
|
||||
text="Vertical Tabs"
|
||||
/>
|
||||
|
||||
<base-material-tabs
|
||||
color="success"
|
||||
icons-and-text
|
||||
vertical
|
||||
>
|
||||
<v-tab
|
||||
v-for="(tab, i) in tabs2"
|
||||
:key="i"
|
||||
class="mb-5"
|
||||
>
|
||||
{{ tab.text }}
|
||||
<v-icon v-text="tab.icon" />
|
||||
</v-tab>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card
|
||||
flat
|
||||
class="my-0"
|
||||
>
|
||||
<v-card-text class="pt-0">
|
||||
<p>
|
||||
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card
|
||||
flat
|
||||
class="my-0"
|
||||
>
|
||||
<v-card-text class="pt-0">
|
||||
<p>
|
||||
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</base-material-tabs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mx-auto"
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<div class="text-center headline font-weight-light mb-12 pl-0">
|
||||
Page Subcategories
|
||||
</div>
|
||||
|
||||
<base-material-tabs
|
||||
v-model="tab"
|
||||
background-color="transparent"
|
||||
centered
|
||||
color="warning"
|
||||
icons-and-text
|
||||
>
|
||||
<v-tab
|
||||
v-for="(tab, i) in tabs3"
|
||||
:key="i"
|
||||
>
|
||||
{{ tab.text }}
|
||||
<v-icon v-text="tab.icon" />
|
||||
</v-tab>
|
||||
|
||||
<v-tabs-items
|
||||
v-model="tab"
|
||||
class="pt-12 transparent"
|
||||
>
|
||||
<v-tab-item>
|
||||
<v-card class="mt-0 px-5">
|
||||
<v-card-text>
|
||||
<base-subheading subheading="Description about product">
|
||||
<p class="grey--text body-2 font-weight-light">
|
||||
More Information here
|
||||
</p>
|
||||
</base-subheading>
|
||||
|
||||
<p>
|
||||
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card class="mt-0 px-5">
|
||||
<v-card-text>
|
||||
<base-subheading subheading="Location of the product product">
|
||||
<p class="grey--text body-2 font-weight-light">
|
||||
More Information here
|
||||
</p>
|
||||
</base-subheading>
|
||||
|
||||
<p>
|
||||
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Dramatically maintain clicks-and-mortar solutions without functional solutions
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card class="mt-0 px-5">
|
||||
<v-card-text>
|
||||
<base-subheading subheading="Legal info of the product product">
|
||||
<p class="grey--text body-2 font-weight-light">
|
||||
More Information here
|
||||
</p>
|
||||
</base-subheading>
|
||||
|
||||
<p>
|
||||
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Dynamically innovate resource-leveling customer service for state of the art customer service.
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
|
||||
<v-tab-item>
|
||||
<v-card class="mt-0 px-5">
|
||||
<v-card-text>
|
||||
<base-subheading heading="Help center">
|
||||
<p class="grey--text body-2 font-weight-light">
|
||||
More Information here
|
||||
</p>
|
||||
</base-subheading>
|
||||
|
||||
<p>
|
||||
From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
Another Text. The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</base-material-tabs>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DashboardPanels',
|
||||
|
||||
data: () => ({
|
||||
tab: 0,
|
||||
tabs: [
|
||||
'Profile',
|
||||
'Settings',
|
||||
'Options',
|
||||
],
|
||||
tabs2: [
|
||||
{
|
||||
text: 'Home',
|
||||
icon: 'mdi-view-dashboard',
|
||||
},
|
||||
{
|
||||
text: 'Settings',
|
||||
icon: 'mdi-clock-outline',
|
||||
},
|
||||
],
|
||||
tabs3: [
|
||||
{
|
||||
text: 'Description',
|
||||
icon: 'mdi-information',
|
||||
},
|
||||
{
|
||||
text: 'Location',
|
||||
icon: 'mdi-map-marker',
|
||||
},
|
||||
{
|
||||
text: 'Legal Info',
|
||||
icon: 'mdi-gavel',
|
||||
},
|
||||
{
|
||||
text: 'Help Center',
|
||||
icon: 'mdi-help-circle-outline',
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
120
src/views/dashboard/component/Typography.vue
Normal file
120
src/views/dashboard/component/Typography.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<v-container
|
||||
id="typography"
|
||||
fluid
|
||||
tag="section"
|
||||
>
|
||||
<base-v-component
|
||||
heading="Typography"
|
||||
link="styles/typography"
|
||||
/>
|
||||
|
||||
<v-row
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<v-col cols="12">
|
||||
<base-material-card
|
||||
color="green"
|
||||
>
|
||||
<template v-slot:heading>
|
||||
<div class="display-2 font-weight-light">
|
||||
Material Dashboard Heading
|
||||
</div>
|
||||
|
||||
<div class="subtitle-1 font-weight-light">
|
||||
Created using Roboto Font Family
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-card-text>
|
||||
<v-container
|
||||
class="pa-0"
|
||||
fluid
|
||||
>
|
||||
<v-row
|
||||
v-for="(t, i) in typography"
|
||||
:key="i"
|
||||
align="center"
|
||||
>
|
||||
<v-col
|
||||
cols="1"
|
||||
md="3"
|
||||
>
|
||||
<span
|
||||
class="tim-note"
|
||||
v-text="t[0]"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="8">
|
||||
<component
|
||||
:is="t[2]"
|
||||
:class="i"
|
||||
>
|
||||
<template v-if="i !== 'quote'">
|
||||
{{ t[1] }}
|
||||
</template>
|
||||
|
||||
<p v-if="i === 'quote'">
|
||||
{{ t[1] }}
|
||||
</p>
|
||||
<small v-if="i === 'quote'">Kanye West, Musician</small>
|
||||
|
||||
<template v-if="i === 'small'">
|
||||
<br>
|
||||
<small>Use 'small' tag for the headers</small>
|
||||
</template>
|
||||
</component>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</base-material-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const leader = 'I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.'
|
||||
const leaderShort = leader.slice(0, 105) + '...'
|
||||
const material = 'The Life of Material Dashboard'
|
||||
const small = 'Header with small subtitle'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
typography: {
|
||||
'display-4': ['Display 4', material, 'h1'],
|
||||
'display-3': ['Display 3', material, 'h2'],
|
||||
'display-2': ['Display 2', material, 'h3'],
|
||||
'display-1': ['Display 1', material, 'h4'],
|
||||
headline: ['Headline', material, 'h5'],
|
||||
'title text-uppercase': ['Title', material, 'h6'],
|
||||
'': ['Paragraph', leader, 'p'],
|
||||
blockquote: ['Quote', leader, 'blockquote'],
|
||||
'text--disabled': ['Muted Text', leaderShort, 'p'],
|
||||
'primary--text': ['Primary Text', leaderShort, 'p'],
|
||||
'info--text': ['Info Text', leaderShort, 'p'],
|
||||
'success--text': ['Success Text', leaderShort, 'p'],
|
||||
'warning--text': ['Warning Text', leaderShort, 'p'],
|
||||
'danger--text': ['Danger Text', leaderShort, 'p'],
|
||||
small: ['Small Tag', small, 'h2']
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tim-note {
|
||||
bottom: 10px;
|
||||
color: #c0c1c2;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
left: 0;
|
||||
margin-left: 20px;
|
||||
width: 260px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user