Created
March 3, 2019 01:39
-
-
Save xoosye/f14e4b40de09aa58deeb34dae696afd2 to your computer and use it in GitHub Desktop.
Vuetify Example Pen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="app"> | |
<v-app id="sandbox" :dark="dark"> | |
<v-navigation-drawer | |
v-model="primaryDrawer.model" | |
:permanent="primaryDrawer.type === 'permanent'" | |
:temporary="primaryDrawer.type === 'temporary'" | |
:clipped="primaryDrawer.clipped" | |
:floating="primaryDrawer.floating" | |
:mini-variant="primaryDrawer.mini" | |
absolute | |
overflow | |
app | |
width="400" | |
> | |
<v-toolbar > | |
<v-btn icon class="hidden-xs-only"> | |
<v-icon>arrow_back</v-icon> | |
</v-btn> | |
<v-toolbar-title>Title</v-toolbar-title> | |
<v-spacer></v-spacer> | |
<v-btn icon class="hidden-xs-only"> | |
<v-icon>search</v-icon> | |
</v-btn> | |
</v-toolbar> | |
<v-list two-line> | |
<template v-for="(item, index) in items"> | |
<v-subheader | |
v-if="item.header" | |
:key="item.header" | |
> | |
{{ item.header }} | |
</v-subheader> | |
<v-divider | |
v-else-if="item.divider" | |
:key="index" | |
:inset="item.inset" | |
></v-divider> | |
<v-list-tile | |
v-else | |
:key="item.title" | |
avatar | |
@click="" | |
> | |
<v-list-tile-avatar> | |
<img :src="item.avatar"> | |
</v-list-tile-avatar> | |
<v-list-tile-content> | |
<v-list-tile-title v-html="item.title"></v-list-tile-title> | |
<v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title> | |
</v-list-tile-content> | |
</v-list-tile> | |
</template> | |
</v-list> | |
<div style="padding:200px;"> | |
hello | |
</div> | |
</v-navigation-drawer> | |
<v-toolbar :clipped-left="primaryDrawer.clipped" app fixed> | |
<v-toolbar-side-icon | |
v-if="primaryDrawer.type !== 'permanent'" | |
@click.stop="primaryDrawer.model = !primaryDrawer.model" | |
></v-toolbar-side-icon> | |
<v-toolbar-title>Vuetify</v-toolbar-title> | |
</v-toolbar> | |
<v-content> | |
<v-container fluid> | |
<v-layout align-center justify-center> | |
<v-flex xs10> | |
<v-card> | |
<v-card-text> | |
<v-layout row wrap> | |
<v-flex xs12 md6> | |
<span>Scheme</span> | |
<v-switch v-model="dark" primary label="Dark"></v-switch> | |
</v-flex> | |
<v-flex xs12 md6> | |
<span>Drawer</span> | |
<v-radio-group v-model="primaryDrawer.type" column> | |
<v-radio | |
v-for="drawer in drawers" | |
:key="drawer" | |
:label="drawer" | |
:value="drawer.toLowerCase()" | |
primary | |
></v-radio> | |
</v-radio-group> | |
<v-switch v-model="primaryDrawer.clipped" label="Clipped" primary></v-switch> | |
<v-switch v-model="primaryDrawer.floating" label="Floating" primary></v-switch> | |
<v-switch v-model="primaryDrawer.mini" label="Mini" primary></v-switch> | |
</v-flex> | |
<v-flex xs12 md6> | |
<span>Footer</span> | |
<v-switch v-model="footer.inset" label="Inset" primary></v-switch> | |
</v-flex> | |
</v-layout> | |
</v-card-text> | |
<v-card-actions> | |
<v-spacer></v-spacer> | |
<v-btn flat>Cancel</v-btn> | |
<v-btn flat color="primary">Submit</v-btn> | |
</v-card-actions> | |
</v-card> | |
<div style="padding:200px;"> | |
hello2 | |
</div> | |
</v-flex> | |
</v-layout> | |
</v-container> | |
</v-content> | |
<v-footer :inset="footer.inset" app> | |
<span class="px-3">© {{ new Date().getFullYear() }}</span> | |
</v-footer> | |
</v-app> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
new Vue({ | |
el: '#app', | |
data: () => ({ | |
dark: true, | |
drawers: ['Default (no property)', 'Permanent', 'Temporary'], | |
primaryDrawer: { | |
model: null, | |
type: 'default (no property)', | |
clipped: false, | |
floating: false, | |
mini: false | |
}, | |
footer: { | |
inset: false | |
}, | |
items: [ | |
{ header: 'Today' }, | |
{ | |
avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg', | |
title: 'Brunch this weekend?', | |
subtitle: "<span class='text--primary'>Ali Connors</span> — I'll be in your neighborhood doing errands this weekend. Do you want to hang out?" | |
}, | |
{ divider: true, inset: true }, | |
{ | |
avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg', | |
title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>', | |
subtitle: "<span class='text--primary'>to Alex, Scott, Jennifer</span> — Wish I could come, but I'm out of town this weekend." | |
}, | |
{ divider: true, inset: true }, | |
{ | |
avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg', | |
title: 'Oui oui', | |
subtitle: "<span class='text--primary'>Sandra Adams</span> — Do you have Paris recommendations? Have you ever been?" | |
} | |
] | |
}) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.4/dist/vuetify.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" /> | |
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.4/dist/vuetify.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
a b c