Update App.vue, HelloWorld.vue for Vuetify v2

This commit is contained in:
Michael Hipp
2019-09-08 19:35:49 -05:00
committed by Travis McLane
parent e93103ed6b
commit ef99dc592b
2 changed files with 81 additions and 79 deletions

View File

@@ -1,29 +1,29 @@
<template>
<v-app id="inspire" dark>
<v-app id="inspire">
<v-navigation-drawer v-model="drawer" clipped fixed app>
<v-list dense>
<v-list-tile>
<v-list-tile-action>
<v-icon>dashboard</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Dashboard</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<v-icon>settings</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Settings</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-view-dashboard</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Dashboard</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-settings</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Settings</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-toolbar app fixed clipped-left>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-app-bar app fixed clipped-left>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-toolbar>
</v-app-bar>
<v-content>
<v-container fluid class="px-0">
<v-layout justify-center align-center class="px-0">
@@ -38,23 +38,23 @@
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import HelloWorld from "./components/HelloWorld.vue"
export default {
data: () => ({
drawer: false
}),
components: {
HelloWorld
},
props: {
source: String
export default {
data: () => ({
drawer: false
}),
components: {
HelloWorld
},
props: {
source: String
}
}
};
</script>
<style>
.logo {
width: 16em;
}
.logo {
width: 16em;
}
</style>

View File

@@ -8,7 +8,7 @@
</v-layout>
<v-card-actions>
<v-layout justify-center align-center class="px-0">
<v-btn color="blue" dark @click="getMessage">Press Me</v-btn>
<v-btn color="blue" @click="getMessage">Press Me</v-btn>
</v-layout>
</v-card-actions>
</v-card>
@@ -22,7 +22,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click="dialog = false">Awesome</v-btn>
<v-btn color="primary" text @click="dialog = false">Awesome</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
@@ -31,53 +31,55 @@
</template>
<script>
export default {
data() {
return {
message: " ",
raised: true,
dialog: false
};
},
methods: {
getMessage: function() {
var self = this;
window.backend.basic().then(result => {
self.message = result;
self.dialog = true;
});
export default {
data () {
return {
message: " ",
raised: true,
dialog: false
}
},
methods: {
getMessage: function () {
var self = this
window.backend.basic().then(result => {
self.message = result
self.dialog = true
})
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
margin-top: 2em;
position: relative;
min-height: 5rem;
width: 100%;
}
a:hover {
font-size: 1.7em;
border-color: blue;
background-color: blue;
color: white;
border: 3px solid white;
border-radius: 10px;
padding: 9px;
cursor: pointer;
transition: 500ms;
}
a {
font-size: 1.7em;
border-color: white;
background-color: #121212;
color: white;
border: 3px solid white;
border-radius: 10px;
padding: 9px;
cursor: pointer;
}
h1 {
margin-top: 2em;
position: relative;
min-height: 5rem;
width: 100%;
}
a:hover {
font-size: 1.7em;
border-color: blue;
background-color: blue;
color: white;
border: 3px solid white;
border-radius: 10px;
padding: 9px;
cursor: pointer;
transition: 500ms;
}
a {
font-size: 1.7em;
border-color: white;
background-color: #121212;
color: white;
border: 3px solid white;
border-radius: 10px;
padding: 9px;
cursor: pointer;
}
</style>