mirror of
https://git.meshkee.com/cssd/cssd-front.git
synced 2026-10-12 05:43:17 +03:30
fix
This commit is contained in:
sajjad
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<material-card class=""
|
||||
color="black"
|
||||
title="Add a New Test"
|
||||
>
|
||||
<v-layout wrap class="ma-2">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Test Name"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Unique ID"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout wrap class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative">
|
||||
<v-layout wrap class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Relative WM-Color-LightGrey">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Input Name"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-select
|
||||
class="pa-2"
|
||||
v-model="select"
|
||||
:hint="`${select.state}, ${select.abbr}`"
|
||||
:items="items"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
return-object
|
||||
single-line
|
||||
color="black"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-select
|
||||
class="pa-2"
|
||||
v-model="select"
|
||||
:hint="`${select.state}, ${select.abbr}`"
|
||||
:items="items"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Size"
|
||||
return-object
|
||||
single-line
|
||||
color="black"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md5 sm5>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Value"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout v-for="(Div, Key) in ArrayDiv" wrap :key="Key" class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Relative WM-Color-LightGrey Form">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Input Name"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-select
|
||||
class="pa-2"
|
||||
v-model="select"
|
||||
:hint="`${select.state}, ${select.abbr}`"
|
||||
:items="items"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
return-object
|
||||
single-line
|
||||
color="black"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md2 sm2>
|
||||
<v-select
|
||||
class="pa-2"
|
||||
v-model="select"
|
||||
:hint="`${select.state}, ${select.abbr}`"
|
||||
:items="items"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Size"
|
||||
return-object
|
||||
single-line
|
||||
color="black"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md5 sm5>
|
||||
<v-text-field
|
||||
class="pa-2"
|
||||
label="Value"
|
||||
color="black">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
top
|
||||
color="pink"
|
||||
@click="Remove()"
|
||||
id="RemoveFormBuilder"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
|
||||
REMOVE</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="cyan"
|
||||
@click="Duplicator"
|
||||
id="FormBuilder"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
ADD</v-btn>
|
||||
</v-layout>
|
||||
<div id="WM-FormBuilder"></div>
|
||||
<v-flex class="text-xs-center" xs12 md12 sm12 >
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ArrayDiv : [],
|
||||
select: { state: 'Florida', abbr: 'FL' },
|
||||
items: [
|
||||
{ state: 'Florida', abbr: 'FL' },
|
||||
{ state: 'Georgia', abbr: 'GA' },
|
||||
{ state: 'Nebraska', abbr: 'NE' },
|
||||
{ state: 'California', abbr: 'CA' },
|
||||
{ state: 'New York', abbr: 'NY' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods : {
|
||||
Duplicator () {
|
||||
var Forms = document.getElementsByClassName('Form');
|
||||
var ArrayForm = [];
|
||||
|
||||
for(var i=0; i<Forms.length; i++) {
|
||||
ArrayForm.push(Forms[i]);
|
||||
}
|
||||
this.ArrayDiv.push(ArrayForm);
|
||||
},
|
||||
Remove () {
|
||||
var ID = document.getElementById('RemoveFormBuilder');
|
||||
var Element = ID.parentNode;
|
||||
Element.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.WM-Border {
|
||||
border: 1px solid;
|
||||
}
|
||||
.WM-Border-Black {
|
||||
border-color: #2f353b !important;
|
||||
}
|
||||
.WM-Border-Gray {
|
||||
border-color: #aaa !important;
|
||||
}
|
||||
.WM-Color-LightGrey {
|
||||
background-color : #F5F5F5;
|
||||
}
|
||||
.WM-Relative {
|
||||
position: relative;
|
||||
}
|
||||
.v-btn--top.v-btn--absolute.v-btn--small {
|
||||
top: -25px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<material-card color="green">
|
||||
<div
|
||||
slot="header"
|
||||
>
|
||||
<div class="title font-weight-light mb-2">Material Design Icons</div>
|
||||
<div class="category font-weight-thin">
|
||||
See all available
|
||||
<a
|
||||
class="white--text"
|
||||
href="https://materialdesignicons.com/"
|
||||
target="_blank"
|
||||
>
|
||||
Icons
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-layout
|
||||
align-center
|
||||
justify-center
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
v-for="icon in icons"
|
||||
:key="icon"
|
||||
ma-2
|
||||
>
|
||||
<v-tooltip
|
||||
top
|
||||
content-class="top">
|
||||
<v-icon slot="activator">
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
<span>{{ icon }}</span>
|
||||
</v-tooltip>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
|
||||
<div class="mx-auto">
|
||||
<v-btn
|
||||
large
|
||||
class="mx-0 font-weight-light"
|
||||
color="success"
|
||||
href="https://materialdesignicons.com/"
|
||||
target="_blank"
|
||||
round
|
||||
>
|
||||
<v-icon left>mdi-material-design</v-icon>
|
||||
<span>See all icons</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
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>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mapouter">
|
||||
<div class="gmap_canvas">
|
||||
<iframe
|
||||
id="gmap_canvas"
|
||||
width="100%"
|
||||
height="100%"
|
||||
src="https://maps.google.com/maps?q=google&t=&z=13&ie=UTF8&iwloc=&output=embed"
|
||||
frameborder="0"
|
||||
scrolling="no"
|
||||
marginheight="0"
|
||||
marginwidth="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.mapouter {
|
||||
text-align:right;
|
||||
height:100%;
|
||||
width:100%;
|
||||
position: absolute;
|
||||
}
|
||||
.gmap_canvas {
|
||||
overflow:hidden;
|
||||
background:none!important;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<v-container
|
||||
fluid
|
||||
grid-list-xl
|
||||
fill-height>
|
||||
<v-layout
|
||||
justify-center
|
||||
align-center
|
||||
>
|
||||
<v-flex xs12>
|
||||
<material-card
|
||||
color="green">
|
||||
<div
|
||||
slot="header"
|
||||
>
|
||||
<div class="title font-weight-light mb-2">Notifications</div>
|
||||
<div class="category">
|
||||
Handcrafted by us with
|
||||
<v-icon
|
||||
size="17"
|
||||
>
|
||||
mdi-heart
|
||||
</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-card-text>
|
||||
<v-layout
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
md6
|
||||
sm12>
|
||||
<h2 class="title font-weight-light mb-3">Notifications Style</h2>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
>
|
||||
This is a plain notification
|
||||
</material-notification>
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
>
|
||||
This is a notification with close button.
|
||||
</material-notification>
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
icon="mdi-bell-plus"
|
||||
>
|
||||
|
||||
This is a notification with close button and icon.
|
||||
</material-notification>
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
icon="mdi-bell-plus"
|
||||
>
|
||||
|
||||
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.
|
||||
</material-notification>
|
||||
</v-flex>
|
||||
|
||||
<v-flex
|
||||
md6
|
||||
sm12>
|
||||
<h2 class="title font-weight-light">Notifcation States</h2>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="info"
|
||||
dismissible
|
||||
>
|
||||
<strong>INFO</strong> - This is a regular notification made with `color="info"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="success"
|
||||
dismissible
|
||||
>
|
||||
<strong>SUCCESS</strong> - This is a regular notification made with `color="success"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="warning"
|
||||
dismissible
|
||||
>
|
||||
<strong>WARNING</strong> - This is a regular notification made with `color="warning"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="error"
|
||||
dismissible
|
||||
>
|
||||
<strong>DANGER</strong> - This is a regular notification made with `color="error"`
|
||||
</material-notification>
|
||||
|
||||
<material-notification
|
||||
class="mb-3"
|
||||
color="purple"
|
||||
dismissible
|
||||
>
|
||||
<strong>PRIMARY</strong> - This is a regular notification made with `color="purple"`
|
||||
</material-notification>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<div class="text-xs-center">
|
||||
<h2 class="title font-weight-light mb-2">Notification Places</h2>
|
||||
<span class=" subheading font-weight-light grey--text">Click to view notifications</span>
|
||||
</div>
|
||||
|
||||
<v-container grid-list-lg>
|
||||
<v-layout
|
||||
justify-center
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('top', 'left')"
|
||||
>
|
||||
Top Left
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('top')"
|
||||
>
|
||||
Top Center
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout
|
||||
justify-center
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('top', 'right')"
|
||||
>
|
||||
Top Right
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('bottom', 'left')"
|
||||
>
|
||||
Bottom Left
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout
|
||||
justify-center
|
||||
row
|
||||
wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('bottom')"
|
||||
>
|
||||
Bottom Center
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
sm4>
|
||||
<v-btn
|
||||
block
|
||||
color="success"
|
||||
@click="snack('bottom', 'right')"
|
||||
>
|
||||
Bottom Right
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
|
||||
<v-snackbar
|
||||
:color="color"
|
||||
:bottom="bottom"
|
||||
:top="top"
|
||||
:left="left"
|
||||
:right="right"
|
||||
v-model="snackbar"
|
||||
dark
|
||||
>
|
||||
<v-icon
|
||||
color="white"
|
||||
class="mr-3"
|
||||
>
|
||||
mdi-bell-plus
|
||||
</v-icon>
|
||||
<div>Welcome to <b>Vue Material Dashboard</b> - a beautiful freebie for every web developer.</div>
|
||||
<v-icon
|
||||
size="16"
|
||||
@click="snackbar = false"
|
||||
>
|
||||
mdi-close-circle
|
||||
</v-icon>
|
||||
</v-snackbar>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
color: null,
|
||||
colors: [
|
||||
'purple',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'error'
|
||||
],
|
||||
top: true,
|
||||
bottom: false,
|
||||
left: false,
|
||||
right: false,
|
||||
snackbar: false
|
||||
}),
|
||||
|
||||
methods: {
|
||||
snack (...args) {
|
||||
this.top = false
|
||||
this.bottom = false
|
||||
this.left = false
|
||||
this.right = false
|
||||
|
||||
for (const loc of args) {
|
||||
this[loc] = true
|
||||
}
|
||||
|
||||
this.color = this.colors[Math.floor(Math.random() * this.colors.length)]
|
||||
|
||||
this.snackbar = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
grid-list-xl
|
||||
>
|
||||
<v-layout
|
||||
justify-center
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
md12
|
||||
>
|
||||
<material-card
|
||||
color="green"
|
||||
title="Simple Table"
|
||||
text="Here is a subtitle for this table"
|
||||
>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
hide-actions
|
||||
>
|
||||
<template
|
||||
slot="headerCell"
|
||||
slot-scope="{ header }"
|
||||
>
|
||||
<span
|
||||
class="subheading font-weight-light text-success text--darken-3"
|
||||
v-text="header.text"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
slot="items"
|
||||
slot-scope="{ item }"
|
||||
>
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.country }}</td>
|
||||
<td>{{ item.city }}</td>
|
||||
<td class="text-xs-right">{{ item.salary }}</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
md12
|
||||
>
|
||||
<material-card
|
||||
color="green"
|
||||
flat
|
||||
full-width
|
||||
title="Table on Plain Background"
|
||||
text="Here is a subtitle for this table"
|
||||
>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items.slice(0, 7)"
|
||||
hide-actions
|
||||
>
|
||||
<template
|
||||
slot="headerCell"
|
||||
slot-scope="{ header }"
|
||||
>
|
||||
<span
|
||||
class="subheading font-weight-light text--darken-3"
|
||||
v-text="header.text"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
slot="items"
|
||||
slot-scope="{ item }"
|
||||
>
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.country }}</td>
|
||||
<td>{{ item.city }}</td>
|
||||
<td class="text-xs-right">{{ item.salary }}</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
headers: [
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Name',
|
||||
value: 'name'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Country',
|
||||
value: 'country'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'City',
|
||||
value: 'city'
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Salary',
|
||||
value: 'salary',
|
||||
align: 'right'
|
||||
}
|
||||
],
|
||||
items: [
|
||||
{
|
||||
name: 'Dakota Rice',
|
||||
country: 'Niger',
|
||||
city: 'Oud-Tunrhout',
|
||||
salary: '$35,738'
|
||||
},
|
||||
{
|
||||
name: 'Minerva Hooper',
|
||||
country: 'Curaçao',
|
||||
city: 'Sinaai-Waas',
|
||||
salary: '$23,738'
|
||||
}, {
|
||||
name: 'Sage Rodriguez',
|
||||
country: 'Netherlands',
|
||||
city: 'Overland Park',
|
||||
salary: '$56,142'
|
||||
}, {
|
||||
name: 'Philip Chanley',
|
||||
country: 'Korea, South',
|
||||
city: 'Gloucester',
|
||||
salary: '$38,735'
|
||||
}, {
|
||||
name: 'Doris Greene',
|
||||
country: 'Malawi',
|
||||
city: 'Feldkirchen in Kārnten',
|
||||
salary: '$63,542'
|
||||
}, {
|
||||
name: 'Mason Porter',
|
||||
country: 'Chile',
|
||||
city: 'Gloucester',
|
||||
salary: '$78,615'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
>
|
||||
<v-layout
|
||||
justify-center
|
||||
align-center
|
||||
>
|
||||
<v-flex xs12>
|
||||
<material-card
|
||||
color="green"
|
||||
title="Material Dashboard Heading"
|
||||
text="Created using Roboto Font Family"
|
||||
>
|
||||
<v-card-text>
|
||||
<h2 class="font-weight-light mb-4">Typography</h2>
|
||||
|
||||
<v-container
|
||||
class="pa-0"
|
||||
grid-list-xl
|
||||
fluid
|
||||
>
|
||||
<v-layout
|
||||
v-for="(t, i) in typography"
|
||||
:key="i"
|
||||
align-end
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
xs1
|
||||
md3>
|
||||
<span
|
||||
class="tim-note"
|
||||
v-text="t[0]"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs8>
|
||||
<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-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</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: {
|
||||
'heading-1': ['Header 1', material, 'h1'],
|
||||
'heading-2': ['Header 2', material, 'h2'],
|
||||
'heading-3': ['Header 3', material, 'h3'],
|
||||
'heading-4': ['Header 4', material, 'h4'],
|
||||
'heading-5': ['Header 5', material, 'h5'],
|
||||
'heading-6 text-uppercase': ['Header 6', material, 'h6'],
|
||||
'': ['Paragraph', leader, 'p'],
|
||||
'quote': ['Quote', leader, 'blockquote'],
|
||||
'text--disabled': ['Muted Text', leaderShort, 'p'],
|
||||
'text-primary': ['Primary Text', leaderShort, 'p'],
|
||||
'text-info': ['Info Text', leaderShort, 'p'],
|
||||
'text-success': ['Success Text', leaderShort, 'p'],
|
||||
'text-warning': ['Warning Text', leaderShort, 'p'],
|
||||
'text-danger': ['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>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-layout justify-center>
|
||||
<v-flex
|
||||
xs12
|
||||
sm10
|
||||
md8
|
||||
>
|
||||
<material-card
|
||||
color="primary"
|
||||
title="Vue Material Dashboard PRO"
|
||||
text="Are you looking for more components? Please check our Premium Version of Vue Material Dashboard."
|
||||
>
|
||||
<table class="v-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th/>
|
||||
<th class="subheading font-weight-light">Free</th>
|
||||
<th class="subheading font-weight-light">PRO</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-xs-center">
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Components</th>
|
||||
<td>60</td>
|
||||
<td>200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Plugins</th>
|
||||
<td>2</td>
|
||||
<td>15</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Example Pages</th>
|
||||
<td>3</td>
|
||||
<td>27</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Login, Register, Pricing, Lock Pages</th>
|
||||
<td>
|
||||
<v-icon color="error">mdi-close</v-icon>
|
||||
</td>
|
||||
<td>
|
||||
<v-icon color="success">mdi-check</v-icon>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-xs-left font-weight-light subheading">Premium Support</th>
|
||||
<td>
|
||||
<v-icon color="error">mdi-close</v-icon>
|
||||
</td>
|
||||
<td>
|
||||
<v-icon color="success">mdi-check</v-icon>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th/>
|
||||
<td>Free</td>
|
||||
<td>Just $59</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th/>
|
||||
<td>
|
||||
<v-btn
|
||||
class="subheading white--text font-weight-light"
|
||||
round
|
||||
large
|
||||
color="grey"
|
||||
disabled
|
||||
>Current Version</v-btn>
|
||||
</td>
|
||||
<td>
|
||||
<v-btn
|
||||
class="subheading white--text font-weight-light"
|
||||
round
|
||||
large
|
||||
color="cyan"
|
||||
>Upgrade to Pro</v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
grid-list-xl>
|
||||
<v-layout
|
||||
justify-center
|
||||
wrap
|
||||
>
|
||||
<v-flex
|
||||
xs12
|
||||
md8
|
||||
>
|
||||
<material-card
|
||||
color="green"
|
||||
title="Edit Profile"
|
||||
text="Complete your profile"
|
||||
>
|
||||
<v-form>
|
||||
<v-container py-0>
|
||||
<v-layout wrap>
|
||||
<v-flex
|
||||
xs12
|
||||
md4
|
||||
>
|
||||
<v-text-field
|
||||
label="Company (disabled)"
|
||||
disabled/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4
|
||||
>
|
||||
<v-text-field
|
||||
class="purple-input"
|
||||
label="User Name"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4
|
||||
>
|
||||
<v-text-field
|
||||
label="Email Address"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md6
|
||||
>
|
||||
<v-text-field
|
||||
label="First Name"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md6
|
||||
>
|
||||
<v-text-field
|
||||
label="Last Name"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md12
|
||||
>
|
||||
<v-text-field
|
||||
label="Adress"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4>
|
||||
<v-text-field
|
||||
label="City"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4>
|
||||
<v-text-field
|
||||
label="Country"
|
||||
class="purple-input"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md4>
|
||||
<v-text-field
|
||||
class="purple-input"
|
||||
label="Postal Code"
|
||||
type="number"/>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-textarea
|
||||
class="purple-input"
|
||||
label="About Me"
|
||||
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
text-xs-right
|
||||
>
|
||||
<v-btn
|
||||
class="mx-0 font-weight-light"
|
||||
color="success"
|
||||
>
|
||||
Update Profile
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 md4>
|
||||
<material-card class="v-card-profile">
|
||||
<v-avatar slot="offset" class="mx-auto d-block" size="130" >
|
||||
<img src="/img/" >
|
||||
</v-avatar>
|
||||
<v-card-text class="text-xs-center">
|
||||
<h6 class="category text-gray font-weight-thin mb-3">CEO / CO-FOUNDER</h6>
|
||||
<h4 class="card-title font-weight-light">Alec Thompson</h4>
|
||||
<p class="card-description font-weight-light">Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...</p>
|
||||
<v-btn
|
||||
color="success"
|
||||
round
|
||||
class="font-weight-light"
|
||||
>Follow</v-btn>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user