Skip to content

Instantly share code, notes, and snippets.

@xordoquy

xordoquy/gist:a3cb99361065fec058c77f461b4e2e07

Created June 21, 2017 22:22
Show Gist options
  • Save xordoquy/a3cb99361065fec058c77f461b4e2e07 to your computer and use it in GitHub Desktop.
Save xordoquy/a3cb99361065fec058c77f461b4e2e07 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Vuetify</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css"></link>
<link href="styles.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
</head>
<body>
<div id="app">
<v-app>
<v-navigation-drawer
persistent
:mini-variant="miniVariant"
:clipped="clipped"
v-model="drawer"
>
<v-list>
<v-list-item
v-for="(item, i) in items"
:key="i"
>
<v-list-tile value="true">
<v-list-tile-action>
<v-icon light v-html="item.icon"></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="item.title"></v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-toolbar>
<v-toolbar-side-icon @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-btn
icon
@click.native.stop="miniVariant = !miniVariant"
>
<v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
</v-btn>
<v-btn
icon
@click.native.stop="clipped = !clipped"
>
<v-icon>web</v-icon>
</v-btn>
<v-btn
icon
@click.native.stop="fixed = !fixed"
>
<v-icon>remove</v-icon>
</v-btn>
<v-toolbar-title v-text="title"></v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
icon
@click.native.stop="rightDrawer = !rightDrawer"
>
<v-icon>menu</v-icon>
</v-btn>
</v-toolbar>
<main>
<v-container fluid>
<page></page>
</v-container>
</main>
<v-navigation-drawer
temporary
:right="right"
v-model="rightDrawer"
>
<v-list>
<v-list-item>
<v-list-tile @click.native="right = !right">
<v-list-tile-action>
<v-icon light>compare_arrows</v-icon>
</v-list-tile-action>
<v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
</v-list-tile>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-footer :fixed="fixed">
<span>&copy; 2017</span>
</v-footer>
</v-app>
</div>
<script type="text/x-template" id="page">
<v-layout column align-center>
<div>
<img src="./v.png" alt="Vuetify.js" class="mb-5" height="100px" />
</div>
<blockquote>
&#8220;First, solve the problem. Then, write the code.&#8221;
<footer>
<small>
<em>&mdash;John Johnson</em>
</small>
</footer>
</blockquote>
</v-layout>
</script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script>
Vue.component('page', {
template: '#page'
})
new Vue({
el: '#app',
data: {
clipped: false,
drawer: true,
fixed: false,
items: [
{ icon: 'bubble_chart', title: 'Inspire' }
],
miniVariant: false,
right: true,
rightDrawer: false,
title: 'Vuetify.js'
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment