vuetify-camelcase-snippets
Version:
Vuetify camel case snippets for vscode
1,304 lines • 836 kB
JSON
{
"v-row": {
"prefix": "vRow",
"body": [
"<VRow>$1</VRow>$0"
],
"description": "v-row"
},
"v-row with class": {
"prefix": "vRowClass",
"body": [
"<VRow class=\"$1\">$2</VRow>$0"
],
"description": "v-row with empty class"
},
"v-col": {
"prefix": "vCol",
"body": [
"<VCol>$1</VCol>$0"
],
"description": "v-col"
},
"v-col with class": {
"prefix": "vColClass",
"body": [
"<VCol class=\"$1\">$2</VCol>$0"
],
"description": "v-col with empty class"
},
"v-col with cols=1": {
"prefix": "vCol1",
"body": [
"<VCol cols=\"1\">$1</VCol>$0"
],
"description": "v-col with cols=1"
},
"v-col with cols=2": {
"prefix": "vCol2",
"body": [
"<VCol cols=\"2\">$1</VCol>$0"
],
"description": "v-col with cols=2"
},
"v-col with cols=3": {
"prefix": "vCol3",
"body": [
"<VCol cols=\"3\">$1</VCol>$0"
],
"description": "v-col with cols=3"
},
"v-col with cols=4": {
"prefix": "vCol4",
"body": [
"<VCol cols=\"4\">$1</VCol>$0"
],
"description": "v-col with cols=4"
},
"v-col with cols=5": {
"prefix": "vCol5",
"body": [
"<VCol cols=\"5\">$1</VCol>$0"
],
"description": "v-col with cols=5"
},
"v-col with cols=6": {
"prefix": "vCol6",
"body": [
"<VCol cols=\"6\">$1</VCol>$0"
],
"description": "v-col with cols=6"
},
"v-col with cols=7": {
"prefix": "vCol7",
"body": [
"<VCol cols=\"7\">$1</VCol>$0"
],
"description": "v-col with cols=7"
},
"v-col with cols=8": {
"prefix": "vCol8",
"body": [
"<VCol cols=\"8\">$1</VCol>$0"
],
"description": "v-col with cols=8"
},
"v-col with cols=9": {
"prefix": "vCol9",
"body": [
"<VCol cols=\"9\">$1</VCol>$0"
],
"description": "v-col with cols=9"
},
"v-col with cols=10": {
"prefix": "vCol10",
"body": [
"<VCol cols=\"10\">$1</VCol>$0"
],
"description": "v-col with cols=10"
},
"v-col with cols=11": {
"prefix": "vCol11",
"body": [
"<VCol cols=\"11\">$1</VCol>$0"
],
"description": "v-col with cols=11"
},
"v-col with cols=12": {
"prefix": "vCol12",
"body": [
"<VCol cols=\"12\">$1</VCol>$0"
],
"description": "v-col with cols=12"
},
"Vuetify script link": {
"prefix": "vLink",
"body": [
"<script src='https://unpkg.com/vuetify/dist/vuetify.js'></script>"
],
"description": "Vuetify script link"
},
"Material design icons link": {
"prefix": "mIconLink",
"body": [
"<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel=\"stylesheet\">"
],
"description": "Material Design icons link"
},
"vuetify quick start": {
"prefix": "vQuickStart",
"body": [
"<!DOCTYPE html>",
"<html>",
"<head>",
"\t<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel=\"stylesheet\">",
"\t<link href=\"https://unpkg.com/vuetify/dist/vuetify.min.css\" rel=\"stylesheet\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui\">",
"</head>",
"<body>",
"\t<div id=\"app\">",
"\t\t<VApp>",
"\t\t\t<VContent>",
"\t\t\t\t<VContainer>Hello world</VContainer>",
"\t\t\t</VContent>",
"\t\t</VApp>",
"\t</div>",
"",
"\t<script src=\"https://unpkg.com/vue/dist/vue.js\"></script>",
"\t<script src=\"https://unpkg.com/vuetify/dist/vuetify.js\"></script>",
"\t<script>",
"\t\tnew Vue({ el: '#app' })",
"\t</script>",
"</body>",
"</html>"
],
"description": "vuetify quick start - Vuetify"
},
"Vuetify default layout": {
"prefix": "vPreDefinedLayoutDefault",
"body": [
"<VApp>",
"\t<VNavigationDrawer app></VNavigationDrawer>",
"\t<VToolbar app></VToolbar>",
"\t<VContent>",
"\t\t<VContainer fluid>",
"\t\t\t<router-view></router-view>",
"\t\t</VContainer>",
"\t</VContent>",
"\t<VFooter app></VFooter>",
"</VApp>"
],
"description": "Vuetify default layout"
},
"Baseline Pre-defined layout": {
"prefix": "vPreDefinedLayoutBaseline",
"body": [
"<template>",
"\t<VApp id=\"inspire\">",
"\t\t<VNavigationDrawer",
"\t\t\tfixed",
"\t\t\tv-model=\"drawer\"",
"\t\t\tapp",
"\t\t>",
"\t\t\t<VList dense>",
"\t\t\t\t<VListTile @click=\"\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon>home</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t<VListTileTitle>Home</VListTileTitle>",
"\t\t\t\t\t</VListTileContent>",
"\t\t\t\t</VListTile>",
"\t\t\t\t<VListTile @click=\"\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon>contact_mail</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t<VListTileTitle>Contact</VListTileTitle>",
"\t\t\t\t\t</VListTileContent>",
"\t\t\t\t</VListTile>",
"\t\t\t</VList>",
"\t\t</VNavigationDrawer>",
"\t\t<VToolbar color=\"indigo\" dark fixed app>",
"\t\t\t<VToolbarSideIcon @click.stop=\"drawer = !drawer\"></VToolbarSideIcon>",
"\t\t\t<VToolbarTitle>Application</VToolbarTitle>",
"\t\t</VToolbar>",
"\t\t<VContent>",
"\t\t\t<VContainer fluid fill-height>",
"\t\t\t\t<VLayout",
"\t\t\t\t\tjustify-center",
"\t\t\t\t\talign-center",
"\t\t\t\t>",
"\t\t\t\t\t<VFlex text-xs-center>",
"\t\t\t\t\t\t<VTooltip left>",
"\t\t\t\t\t\t\t<VBtn icon large :href=\"source\" target=\"_blank\" slot=\"activator\">",
"\t\t\t\t\t\t\t\t<VIcon large>code</VIcon>",
"\t\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t\t<span>Source</span>",
"\t\t\t\t\t\t</VTooltip>",
"\t\t\t\t\t\t<VTooltip right>",
"\t\t\t\t\t\t\t<VBtn icon large href=\"https://codepen.io/johnjleider/pen/rJdVMq\" target=\"_blank\" slot=\"activator\">",
"\t\t\t\t\t\t\t\t<VIcon large>mdi-codepen</VIcon>",
"\t\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t\t<span>Codepen</span>",
"\t\t\t\t\t\t</VTooltip>",
"\t\t\t\t\t</VFlex>",
"\t\t\t\t</VLayout>",
"\t\t\t</VContainer>",
"\t\t</VContent>",
"\t\t<VFooter color=\"indigo\" app>",
"\t\t\t<span class=\"white--text\">© 2017</span>",
"\t\t</VFooter>",
"\t</VApp>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tdata: () => ({",
"\t\t\tdrawer: null",
"\t\t}),",
"\t\tprops: {",
"\t\t\tsource: String",
"\t\t}",
"\t}",
"</script>"
],
"description": "Baseline Pre-defined layout - Vuetify"
},
"Baseline Flipped Pre-defined layout": {
"prefix": "vPreDefinedLayoutBaselineFlipped",
"body": [
"<template>",
"\t<VApp id=\"inspire\">",
"\t\t<VNavigationDrawer",
"\t\t\tfixed",
"\t\t\tv-model=\"drawer\"",
"\t\t\tright",
"\t\t\tapp",
"\t\t>",
"\t\t\t<VList dense>",
"\t\t\t\t<VListTile @click=\"\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon>home</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t<VListTileTitle>Home</VListTileTitle>",
"\t\t\t\t\t</VListTileContent>",
"\t\t\t\t</VListTile>",
"\t\t\t\t<VListTile @click=\"\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon>contact_mail</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t<VListTileTitle>Contact</VListTileTitle>",
"\t\t\t\t\t</VListTileContent>",
"\t\t\t\t</VListTile>",
"\t\t\t</VList>",
"\t\t</VNavigationDrawer>",
"\t\t<VToolbar color=\"cyan\" dark fixed app>",
"\t\t\t<VSpacer></VSpacer>",
"\t\t\t<VToolbarTitle>Application</VToolbarTitle>",
"\t\t\t<VToolbarSideIcon @click.stop=\"drawer = !drawer\"></VToolbarSideIcon>",
"\t\t</VToolbar>",
"\t\t<VContent>",
"\t\t\t<VContainer fluid fill-height>",
"\t\t\t\t<VLayout justify-center align-center>",
"\t\t\t\t\t<VFlex text-xs-center>",
"\t\t\t\t\t\t<VTooltip right>",
"\t\t\t\t\t\t\t<VBtn",
"\t\t\t\t\t\t\t\ticon",
"\t\t\t\t\t\t\t\tlarge",
"\t\t\t\t\t\t\t\t:href=\"source\"",
"\t\t\t\t\t\t\t\ttarget=\"_blank\"",
"\t\t\t\t\t\t\t\tslot=\"activator\"",
"\t\t\t\t\t\t\t>",
"\t\t\t\t\t\t\t\t<VIcon large>code</VIcon>",
"\t\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t\t<span>Source</span>",
"\t\t\t\t\t\t</VTooltip>",
"\t\t\t\t\t</VFlex>",
"\t\t\t\t</VLayout>",
"\t\t\t</VContainer>",
"\t\t</VContent>",
"\t\t<VFooter color=\"cyan\" app>",
"\t\t\t<VSpacer></VSpacer>",
"\t\t\t<span class=\"white--text\">© 2017</span>",
"\t\t</VFooter>",
"\t</VApp>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tdata: () => ({",
"\t\t\tdrawer: null",
"\t\t}),",
"\t\tprops: {",
"\t\t\tsource: String",
"\t\t}",
"\t}",
"</script>"
],
"description": "Baseline Flipped Pre-defined layout - Vuetify"
},
"Centered Pre-defined layout": {
"prefix": "vPreDefinedLayoutCentered",
"body": [
"<template>",
"\t<VApp id=\"inspire\">",
"\t\t<VContent>",
"\t\t\t<VContainer fluid fill-height>",
"\t\t\t\t<VLayout align-center justify-center>",
"\t\t\t\t\t<VFlex xs12 sm8 md4>",
"\t\t\t\t\t\t<VCard class=\"elevation-12\">",
"\t\t\t\t\t\t\t<VToolbar dark color=\"primary\">",
"\t\t\t\t\t\t\t\t<VToolbarTitle>Login form</VToolbarTitle>",
"\t\t\t\t\t\t\t\t<VSpacer></VSpacer>",
"\t\t\t\t\t\t\t\t<VTooltip bottom>",
"\t\t\t\t\t\t\t\t\t<VBtn",
"\t\t\t\t\t\t\t\t\t\ticon",
"\t\t\t\t\t\t\t\t\t\tlarge",
"\t\t\t\t\t\t\t\t\t\t:href=\"source\"",
"\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"",
"\t\t\t\t\t\t\t\t\t\tslot=\"activator\"",
"\t\t\t\t\t\t\t\t\t>",
"\t\t\t\t\t\t\t\t\t\t<VIcon large>code</VIcon>",
"\t\t\t\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t\t\t\t<span>Source</span>",
"\t\t\t\t\t\t\t\t</VTooltip>",
"\t\t\t\t\t\t\t</VToolbar>",
"\t\t\t\t\t\t\t<VCardText>",
"\t\t\t\t\t\t\t\t<VForm>",
"\t\t\t\t\t\t\t\t\t<VTextField prepend-icon=\"person\" name=\"login\" label=\"Login\" type=\"text\"></VTextField>",
"\t\t\t\t\t\t\t\t\t<VTextField prepend-icon=\"lock\" name=\"password\" label=\"Password\" id=\"password\" type=\"password\"></VTextField>",
"\t\t\t\t\t\t\t\t</VForm>",
"\t\t\t\t\t\t\t</VCardText>",
"\t\t\t\t\t\t\t<VCardActions>",
"\t\t\t\t\t\t\t\t<VSpacer></VSpacer>",
"\t\t\t\t\t\t\t\t<VBtn color=\"primary\">Login</VBtn>",
"\t\t\t\t\t\t\t</VCardActions>",
"\t\t\t\t\t\t</VCard>",
"\t\t\t\t\t</VFlex>",
"\t\t\t\t</VLayout>",
"\t\t\t</VContainer>",
"\t\t</VContent>",
"\t</VApp>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tdata: () => ({",
"\t\t\tdrawer: null",
"\t\t}),",
"\t\tprops: {",
"\t\t\tsource: String",
"\t\t}",
"\t}",
"</script>"
],
"description": "Centered Pre-defined layout - Vuetify"
},
"Complex Pre-defined layout": {
"prefix": "vPreDefinedLayoutComplex",
"body": [
"<template>",
"\t<VApp id=\"inspire\">",
"\t\t<VNavigationDrawer",
"\t\t\tfixed",
"\t\t\tv-model=\"drawerRight\"",
"\t\t\tright",
"\t\t\tclipped",
"\t\t\tapp",
"\t\t>",
"\t\t\t<VList dense>",
"\t\t\t\t<VListTile @click.stop=\"right = !right\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon>exit_to_app</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t<VListTileTitle>Open Temporary Drawer</VListTileTitle>",
"\t\t\t\t\t</VListTileContent>",
"\t\t\t\t</VListTile>",
"\t\t\t</VList>",
"\t\t</VNavigationDrawer>",
"\t\t<VToolbar",
"\t\t\tcolor=\"blue-grey\"",
"\t\t\tdark",
"\t\t\tfixed",
"\t\t\tapp",
"\t\t\tclipped-right",
"\t\t>",
"\t\t\t<VToolbarSideIcon @click.stop=\"drawer = !drawer\"></VToolbarSideIcon>",
"\t\t\t<VToolbarTitle>Toolbar</VToolbarTitle>",
"\t\t\t<VSpacer></VSpacer>",
"\t\t\t<VToolbarSideIcon @click.stop=\"drawerRight = !drawerRight\"></VToolbarSideIcon>",
"\t\t</VToolbar>",
"\t\t<VNavigationDrawer",
"\t\t\tfixed",
"\t\t\tv-model=\"drawer\"",
"\t\t\tapp",
"\t\t>",
"\t\t\t<VList dense>",
"\t\t\t\t<VListTile @click.stop=\"left = !left\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon>exit_to_app</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t<VListTileTitle>Open Temporary Drawer</VListTileTitle>",
"\t\t\t\t\t</VListTileContent>",
"\t\t\t\t</VListTile>",
"\t\t\t</VList>",
"\t\t</VNavigationDrawer>",
"\t\t<VNavigationDrawer",
"\t\t\ttemporary",
"\t\t\tv-model=\"left\"",
"\t\t\tfixed",
"\t\t></VNavigationDrawer>",
"\t\t<VContent>",
"\t\t\t<VContainer fluid fill-height>",
"\t\t\t\t<VLayout justify-center align-center>",
"\t\t\t\t\t<VFlex shrink>",
"\t\t\t\t\t\t<VTooltip right>",
"\t\t\t\t\t\t\t<VBtn",
"\t\t\t\t\t\t\t\ticon",
"\t\t\t\t\t\t\t\tlarge",
"\t\t\t\t\t\t\t\t:href=\"source\"",
"\t\t\t\t\t\t\t\ttarget=\"_blank\"",
"\t\t\t\t\t\t\t\tslot=\"activator\"",
"\t\t\t\t\t\t\t>",
"\t\t\t\t\t\t\t\t<VIcon large>code</VIcon>",
"\t\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t\t<span>Source</span>",
"\t\t\t\t\t\t</VTooltip>",
"\t\t\t\t\t</VFlex>",
"\t\t\t\t</VLayout>",
"\t\t\t</VContainer>",
"\t\t</VContent>",
"\t\t<VNavigationDrawer",
"\t\t\tright",
"\t\t\ttemporary",
"\t\t\tv-model=\"right\"",
"\t\t\tfixed",
"\t\t></VNavigationDrawer>",
"\t\t<VFooter color=\"blue-grey\" class=\"white--text\" app>",
"\t\t\t<span>Vuetify</span>",
"\t\t\t<VSpacer></VSpacer>",
"\t\t\t<span>© 2017</span>",
"\t\t</VFooter>",
"\t</VApp>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tdata: () => ({",
"\t\t\tdrawer: true,",
"\t\t\tdrawerRight: true,",
"\t\t\tright: null,",
"\t\t\tleft: null",
"\t\t}),",
"\t\tprops: {",
"\t\t\tsource: String",
"\t\t}",
"\t}",
"</script>"
],
"description": "Complex Pre-defined layout - Vuetify"
},
"Dark Pre-defined layout": {
"prefix": "vPreDefinedLayoutDark",
"body": [
"<template>",
"\t<VApp id=\"inspire\" dark>",
"\t\t<VNavigationDrawer",
"\t\t\tclipped",
"\t\t\tfixed",
"\t\t\tv-model=\"drawer\"",
"\t\t\tapp",
"\t\t>",
"\t\t\t<VList dense>",
"\t\t\t\t<VListTile @click=\"\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon>dashboard</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t<VListTileTitle>Dashboard</VListTileTitle>",
"\t\t\t\t\t</VListTileContent>",
"\t\t\t\t</VListTile>",
"\t\t\t\t<VListTile @click=\"\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon>settings</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t<VListTileTitle>Settings</VListTileTitle>",
"\t\t\t\t\t</VListTileContent>",
"\t\t\t\t</VListTile>",
"\t\t\t</VList>",
"\t\t</VNavigationDrawer>",
"\t\t<VToolbar app fixed clipped-left>",
"\t\t\t<VToolbarSideIcon @click.stop=\"drawer = !drawer\"></VToolbarSideIcon>",
"\t\t\t<VToolbarTitle>Application</VToolbarTitle>",
"\t\t</VToolbar>",
"\t\t<VContent>",
"\t\t\t<VContainer fluid fill-height>",
"\t\t\t\t<VLayout justify-center align-center>",
"\t\t\t\t\t<VFlex shrink>",
"\t\t\t\t\t\t<VTooltip right>",
"\t\t\t\t\t\t\t<VBtn",
"\t\t\t\t\t\t\t\ticon",
"\t\t\t\t\t\t\t\tlarge",
"\t\t\t\t\t\t\t\t:href=\"source\"",
"\t\t\t\t\t\t\t\ttarget=\"_blank\"",
"\t\t\t\t\t\t\t\tslot=\"activator\"",
"\t\t\t\t\t\t\t>",
"\t\t\t\t\t\t\t\t<VIcon large>code</VIcon>",
"\t\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t\t<span>Source</span>",
"\t\t\t\t\t\t</VTooltip>",
"\t\t\t\t\t</VFlex>",
"\t\t\t\t</VLayout>",
"\t\t\t</VContainer>",
"\t\t</VContent>",
"\t\t<VFooter app fixed>",
"\t\t\t<span>© 2017</span>",
"\t\t</VFooter>",
"\t</VApp>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tdata: () => ({",
"\t\t\tdrawer: true",
"\t\t}),",
"\t\tprops: {",
"\t\t\tsource: String",
"\t\t}",
"\t}",
"</script>"
],
"description": "Dark Pre-defined layout - Vuetify"
},
"Google Contacts Pre-defined layout": {
"prefix": "vPreDefinedLayoutGoogleContacts",
"body": [
"<template>",
"\t<VApp id=\"inspire\">",
"\t\t<VNavigationDrawer",
"\t\t\tfixed",
"\t\t\t:clipped=\"$vuetify.breakpoint.mdAndUp\"",
"\t\t\tapp",
"\t\t\tv-model=\"drawer\"",
"\t\t>",
"\t\t\t<VList dense>",
"\t\t\t\t<template v-for=\"item in items\">",
"\t\t\t\t\t<VLayout",
"\t\t\t\t\t\trow",
"\t\t\t\t\t\tv-if=\"item.heading\"",
"\t\t\t\t\t\talign-center",
"\t\t\t\t\t\t:key=\"item.heading\"",
"\t\t\t\t\t>",
"\t\t\t\t\t\t<VFlex xs6>",
"\t\t\t\t\t\t\t<VSubheader v-if=\"item.heading\">",
"\t\t\t\t\t\t\t\t{{ item.heading }}",
"\t\t\t\t\t\t\t</VSubheader>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t<VFlex xs6 class=\"text-xs-center\">",
"\t\t\t\t\t\t\t<a href=\"#!\" class=\"body-2 black--text\">EDIT</a>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t</VLayout>",
"\t\t\t\t\t<VListGroup",
"\t\t\t\t\t\tv-else-if=\"item.children\"",
"\t\t\t\t\t\tv-model=\"item.model\"",
"\t\t\t\t\t\t:key=\"item.text\"",
"\t\t\t\t\t\t:prepend-icon=\"item.model ? item.icon : item['icon-alt']\"",
"\t\t\t\t\t\tappend-icon=\"\"",
"\t\t\t\t\t>",
"\t\t\t\t\t\t<VListTile slot=\"activator\">",
"\t\t\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t\t\t<VListTileTitle>",
"\t\t\t\t\t\t\t\t\t{{ item.text }}",
"\t\t\t\t\t\t\t\t</VListTileTitle>",
"\t\t\t\t\t\t\t</VListTileContent>",
"\t\t\t\t\t\t</VListTile>",
"\t\t\t\t\t\t<VListTile",
"\t\t\t\t\t\t\tv-for=\"(child, i) in item.children\"",
"\t\t\t\t\t\t\t:key=\"i\"",
"\t\t\t\t\t\t\t@click=\"\"",
"\t\t\t\t\t\t>",
"\t\t\t\t\t\t\t<VListTileAction v-if=\"child.icon\">",
"\t\t\t\t\t\t\t\t<VIcon>{{ child.icon }}</VIcon>",
"\t\t\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t\t\t<VListTileTitle>",
"\t\t\t\t\t\t\t\t\t{{ child.text }}",
"\t\t\t\t\t\t\t\t</VListTileTitle>",
"\t\t\t\t\t\t\t</VListTileContent>",
"\t\t\t\t\t\t</VListTile>",
"\t\t\t\t\t</VListGroup>",
"\t\t\t\t\t<VListTile v-else @click=\"\" :key=\"item.text\">",
"\t\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t\t<VIcon>{{ item.icon }}</VIcon>",
"\t\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t\t<VListTileTitle>",
"\t\t\t\t\t\t\t\t{{ item.text }}",
"\t\t\t\t\t\t\t</VListTileTitle>",
"\t\t\t\t\t\t</VListTileContent>",
"\t\t\t\t\t</VListTile>",
"\t\t\t\t</template>",
"\t\t\t</VList>",
"\t\t</VNavigationDrawer>",
"\t\t<VToolbar",
"\t\t\tcolor=\"blue darken-3\"",
"\t\t\tdark",
"\t\t\tapp",
"\t\t\t:clipped-left=\"$vuetify.breakpoint.mdAndUp\"",
"\t\t\tfixed",
"\t\t>",
"\t\t\t<VToolbarTitle style=\"width: 300px\" class=\"ml-0 pl-3\">",
"\t\t\t\t<VToolbarSideIcon @click.stop=\"drawer = !drawer\"></VToolbarSideIcon>",
"\t\t\t\t<span class=\"hidden-sm-and-down\">Google Contacts</span>",
"\t\t\t</VToolbarTitle>",
"\t\t\t<VTextField",
"\t\t\t\tflat",
"\t\t\t\tsolo-inverted",
"\t\t\t\tprepend-icon=\"search\"",
"\t\t\t\tlabel=\"Search\"",
"\t\t\t\tclass=\"hidden-sm-and-down\"",
"\t\t\t></VTextField>",
"\t\t\t<VSpacer></VSpacer>",
"\t\t\t<VBtn icon>",
"\t\t\t\t<VIcon>apps</VIcon>",
"\t\t\t</VBtn>",
"\t\t\t<VBtn icon>",
"\t\t\t\t<VIcon>notifications</VIcon>",
"\t\t\t</VBtn>",
"\t\t\t<VBtn icon large>",
"\t\t\t\t<VAvatar size=\"32px\" tile>",
"\t\t\t\t\t<img",
"\t\t\t\t\t\tsrc=\"https://vuetifyjs.com/static/doc-images/logo.svg\"",
"\t\t\t\t\t\talt=\"Vuetify\"",
"\t\t\t\t\t>",
"\t\t\t\t</VAvatar>",
"\t\t\t</VBtn>",
"\t\t</VToolbar>",
"\t\t<VContent>",
"\t\t\t<VContainer fluid fill-height>",
"\t\t\t\t<VLayout justify-center align-center>",
"\t\t\t\t\t<VTooltip right>",
"\t\t\t\t\t\t<VBtn",
"\t\t\t\t\t\t\ticon",
"\t\t\t\t\t\t\tlarge",
"\t\t\t\t\t\t\t:href=\"source\"",
"\t\t\t\t\t\t\ttarget=\"_blank\"",
"\t\t\t\t\t\t\tslot=\"activator\"",
"\t\t\t\t\t\t>",
"\t\t\t\t\t\t\t<VIcon large>code</VIcon>",
"\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t<span>Source</span>",
"\t\t\t\t\t</VTooltip>",
"\t\t\t\t</VLayout>",
"\t\t\t</VContainer>",
"\t\t</VContent>",
"\t\t<VBtn",
"\t\t\tfab",
"\t\t\tbottom",
"\t\t\tright",
"\t\t\tcolor=\"pink\"",
"\t\t\tdark",
"\t\t\tfixed",
"\t\t\t@click.stop=\"dialog = !dialog\"",
"\t\t>",
"\t\t\t<VIcon>add</VIcon>",
"\t\t</VBtn>",
"\t\t<VDialog v-model=\"dialog\" width=\"800px\">",
"\t\t\t<VCard>",
"\t\t\t\t<VCardTitle",
"\t\t\t\t\tclass=\"grey lighten-4 py-4 title\"",
"\t\t\t\t>",
"\t\t\t\t\tCreate contact",
"\t\t\t\t</VCardTitle>",
"\t\t\t\t<VContainer grid-list-sm class=\"pa-4\">",
"\t\t\t\t\t<VLayout row wrap>",
"\t\t\t\t\t\t<VFlex xs12 align-center justify-space-between>",
"\t\t\t\t\t\t\t<VLayout align-center>",
"\t\t\t\t\t\t\t\t<VAvatar size=\"40px\" class=\"mr-3\">",
"\t\t\t\t\t\t\t\t\t<img",
"\t\t\t\t\t\t\t\t\t\tsrc=\"//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png\"",
"\t\t\t\t\t\t\t\t\t\talt=\"\"",
"\t\t\t\t\t\t\t\t\t>",
"\t\t\t\t\t\t\t\t</VAvatar>",
"\t\t\t\t\t\t\t\t<VTextField",
"\t\t\t\t\t\t\t\t\tplaceholder=\"Name\"",
"\t\t\t\t\t\t\t\t></VTextField>",
"\t\t\t\t\t\t\t</VLayout>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t<VFlex xs6>",
"\t\t\t\t\t\t\t<VTextField",
"\t\t\t\t\t\t\t\tprepend-icon=\"business\"",
"\t\t\t\t\t\t\t\tplaceholder=\"Company\"",
"\t\t\t\t\t\t\t></VTextField>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t<VFlex xs6>",
"\t\t\t\t\t\t\t<VTextField",
"\t\t\t\t\t\t\t\tplaceholder=\"Job title\"",
"\t\t\t\t\t\t\t></VTextField>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t<VFlex xs12>",
"\t\t\t\t\t\t\t<VTextField",
"\t\t\t\t\t\t\t\tprepend-icon=\"mail\"",
"\t\t\t\t\t\t\t\tplaceholder=\"Email\"",
"\t\t\t\t\t\t\t></VTextField>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t<VFlex xs12>",
"\t\t\t\t\t\t\t<VTextField",
"\t\t\t\t\t\t\t\ttype=\"tel\"",
"\t\t\t\t\t\t\t\tprepend-icon=\"phone\"",
"\t\t\t\t\t\t\t\tplaceholder=\"(000) 000 - 0000\"",
"\t\t\t\t\t\t\t\tmask=\"phone\"",
"\t\t\t\t\t\t\t></VTextField>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t<VFlex xs12>",
"\t\t\t\t\t\t\t<VTextField",
"\t\t\t\t\t\t\t\tprepend-icon=\"notes\"",
"\t\t\t\t\t\t\t\tplaceholder=\"Notes\"",
"\t\t\t\t\t\t\t></VTextField>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t</VLayout>",
"\t\t\t\t</VContainer>",
"\t\t\t\t<VCardActions>",
"\t\t\t\t\t<VBtn flat color=\"primary\">More</VBtn>",
"\t\t\t\t\t<VSpacer></VSpacer>",
"\t\t\t\t\t<VBtn flat color=\"primary\" @click=\"dialog = false\">Cancel</VBtn>",
"\t\t\t\t\t<VBtn flat @click=\"dialog = false\">Save</VBtn>",
"\t\t\t\t</VCardActions>",
"\t\t\t</VCard>",
"\t\t</VDialog>",
"\t</VApp>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tdata: () => ({",
"\t\t\tdialog: false,",
"\t\t\tdrawer: null,",
"\t\t\titems: [",
"\t\t\t\t{ icon: 'contacts', text: 'Contacts' },",
"\t\t\t\t{ icon: 'history', text: 'Frequently contacted' },",
"\t\t\t\t{ icon: 'content_copy', text: 'Duplicates' },",
"\t\t\t\t{",
"\t\t\t\t\ticon: 'keyboard_arrow_up',",
"\t\t\t\t\t'icon-alt': 'keyboard_arrow_down',",
"\t\t\t\t\ttext: 'Labels',",
"\t\t\t\t\tmodel: true,",
"\t\t\t\t\tchildren: [",
"\t\t\t\t\t\t{ icon: 'add', text: 'Create label' }",
"\t\t\t\t\t]",
"\t\t\t\t},",
"\t\t\t\t{",
"\t\t\t\t\ticon: 'keyboard_arrow_up',",
"\t\t\t\t\t'icon-alt': 'keyboard_arrow_down',",
"\t\t\t\t\ttext: 'More',",
"\t\t\t\t\tmodel: false,",
"\t\t\t\t\tchildren: [",
"\t\t\t\t\t\t{ text: 'Import' },",
"\t\t\t\t\t\t{ text: 'Export' },",
"\t\t\t\t\t\t{ text: 'Print' },",
"\t\t\t\t\t\t{ text: 'Undo changes' },",
"\t\t\t\t\t\t{ text: 'Other contacts' }",
"\t\t\t\t\t]",
"\t\t\t\t},",
"\t\t\t\t{ icon: 'settings', text: 'Settings' },",
"\t\t\t\t{ icon: 'chat_bubble', text: 'Send feedback' },",
"\t\t\t\t{ icon: 'help', text: 'Help' },",
"\t\t\t\t{ icon: 'phonelink', text: 'App downloads' },",
"\t\t\t\t{ icon: 'keyboard', text: 'Go to the old version' }",
"\t\t\t]",
"\t\t}),",
"\t\tprops: {",
"\t\t\tsource: String",
"\t\t}",
"\t}",
"</script>"
],
"description": "Google Contacts\tPre-defined layout- Vuetify"
},
"Google Keep Pre-defined layout": {
"prefix": "vPreDefinedLayoutGoogleKeep",
"body": [
"<template>",
"\t<VApp id=\"inspire\">",
"\t\t<VNavigationDrawer",
"\t\t\tfixed",
"\t\t\tclipped",
"\t\t\tclass=\"grey lighten-4\"",
"\t\t\tapp",
"\t\t\tv-model=\"drawer\"",
"\t\t>",
"\t\t\t<VList",
"\t\t\t\tdense",
"\t\t\t\tclass=\"grey lighten-4\"",
"\t\t\t>",
"\t\t\t\t<template v-for=\"(item, i) in items\">",
"\t\t\t\t\t<VLayout",
"\t\t\t\t\t\trow",
"\t\t\t\t\t\tv-if=\"item.heading\"",
"\t\t\t\t\t\talign-center",
"\t\t\t\t\t\t:key=\"i\"",
"\t\t\t\t\t>",
"\t\t\t\t\t\t<VFlex xs6>",
"\t\t\t\t\t\t\t<VSubheader v-if=\"item.heading\">",
"\t\t\t\t\t\t\t\t{{ item.heading }}",
"\t\t\t\t\t\t\t</VSubheader>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t<VFlex xs6 class=\"text-xs-right\">",
"\t\t\t\t\t\t\t<VBtn small flat>edit</VBtn>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t</VLayout>",
"\t\t\t\t\t<VDivider",
"\t\t\t\t\t\tdark",
"\t\t\t\t\t\tv-else-if=\"item.divider\"",
"\t\t\t\t\t\tclass=\"my-3\"",
"\t\t\t\t\t\t:key=\"i\"",
"\t\t\t\t\t></VDivider>",
"\t\t\t\t\t<VListTile",
"\t\t\t\t\t\t:key=\"i\"",
"\t\t\t\t\t\tv-else",
"\t\t\t\t\t\t@click=\"\"",
"\t\t\t\t\t>",
"\t\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t\t<VIcon>{{ item.icon }}</VIcon>",
"\t\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t\t<VListTileTitle class=\"grey--text\">",
"\t\t\t\t\t\t\t\t{{ item.text }}",
"\t\t\t\t\t\t\t</VListTileTitle>",
"\t\t\t\t\t\t</VListTileContent>",
"\t\t\t\t\t</VListTile>",
"\t\t\t\t</template>",
"\t\t\t</VList>",
"\t\t</VNavigationDrawer>",
"\t\t<VToolbar color=\"amber\" app absolute clipped-left>",
"\t\t\t<VToolbarSideIcon @click.native=\"drawer = !drawer\"></VToolbarSideIcon>",
"\t\t\t<span class=\"title ml-3 mr-5\">Google <span class=\"text\">Keep</span></span>",
"\t\t\t<VTextField",
"\t\t\t\tsolo-inverted",
"\t\t\t\tflat",
"\t\t\t\tlabel=\"Search\"",
"\t\t\t\tprepend-icon=\"search\"",
"\t\t\t></VTextField>",
"\t\t\t<VSpacer></VSpacer>",
"\t\t</VToolbar>",
"\t\t<VContent>",
"\t\t\t<VContainer fluid fill-height class=\"grey lighten-4\">",
"\t\t\t\t<VLayout justify-center align-center>",
"\t\t\t\t\t<VFlex shrink>",
"\t\t\t\t\t\t<VTooltip right>",
"\t\t\t\t\t\t\t<VBtn",
"\t\t\t\t\t\t\t\ticon",
"\t\t\t\t\t\t\t\tlarge",
"\t\t\t\t\t\t\t\t:href=\"source\"",
"\t\t\t\t\t\t\t\ttarget=\"_blank\"",
"\t\t\t\t\t\t\t\tslot=\"activator\"",
"\t\t\t\t\t\t\t>",
"\t\t\t\t\t\t\t\t<VIcon large>code</VIcon>",
"\t\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t\t<span>Source</span>",
"\t\t\t\t\t\t</VTooltip>",
"\t\t\t\t\t</VFlex>",
"\t\t\t\t</VLayout>",
"\t\t\t</VContainer>",
"\t\t</VContent>",
"\t</VApp>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tdata: () => ({",
"\t\t\tdrawer: null,",
"\t\t\titems: [",
"\t\t\t\t{ icon: 'lightbulb_outline', text: 'Notes' },",
"\t\t\t\t{ icon: 'touch_app', text: 'Reminders' },",
"\t\t\t\t{ divider: true },",
"\t\t\t\t{ heading: 'Labels' },",
"\t\t\t\t{ icon: 'add', text: 'Create new label' },",
"\t\t\t\t{ divider: true },",
"\t\t\t\t{ icon: 'archive', text: 'Archive' },",
"\t\t\t\t{ icon: 'delete', text: 'Trash' },",
"\t\t\t\t{ divider: true },",
"\t\t\t\t{ icon: 'settings', text: 'Settings' },",
"\t\t\t\t{ icon: 'chat_bubble', text: 'Trash' },",
"\t\t\t\t{ icon: 'help', text: 'Help' },",
"\t\t\t\t{ icon: 'phonelink', text: 'App downloads' },",
"\t\t\t\t{ icon: 'keyboard', text: 'Keyboard shortcuts' }",
"\t\t\t]",
"\t\t}),",
"\t\tprops: {",
"\t\t\tsource: String",
"\t\t}",
"\t}",
"</script>",
"",
"<style>",
"\t#keep main .container {",
"\t\theight: 660px;",
"\t}",
"\t.navigation-drawer__border {",
"\t\tdisplay: none;",
"\t}",
"\t.text {",
"\t\tfont-weight: 400;",
"\t}",
"</style>"
],
"description": "Google Keep Pre-defined layout - Vuetify"
},
"Google Youtube Pre-defined layout": {
"prefix": "vPreDefinedLayoutGoogleYoutube",
"body": [
"<template>",
"\t<VApp",
"\t\tdark",
"\t\tid=\"inspire\"",
"\t>",
"\t\t<VNavigationDrawer",
"\t\t\tfixed",
"\t\t\tclipped",
"\t\t\tv-model=\"drawer\"",
"\t\t\tapp",
"\t\t>",
"\t\t\t<VList dense>",
"\t\t\t\t<VListTile v-for=\"item in items\" :key=\"item.text\" @click=\"\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon>{{ item.icon }}</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t<VListTileTitle>",
"\t\t\t\t\t\t\t{{ item.text }}",
"\t\t\t\t\t\t</VListTileTitle>",
"\t\t\t\t\t</VListTileContent>",
"\t\t\t\t</VListTile>",
"\t\t\t\t<VSubheader class=\"mt-3 grey--text text--darken-1\">SUBSCRIPTIONS</VSubheader>",
"\t\t\t\t<VList>",
"\t\t\t\t\t<VListTile v-for=\"item in items2\" :key=\"item.text\" avatar @click=\"\">",
"\t\t\t\t\t\t<VListTileAvatar>",
"\t\t\t\t\t\t\t<img :src=\"`https://randomuser.me/api/portraits/men/${item.picture}.jpg`\" alt=\"\">",
"\t\t\t\t\t\t</VListTileAvatar>",
"\t\t\t\t\t\t<VListTileTitle v-text=\"item.text\"></VListTileTitle>",
"\t\t\t\t\t</VListTile>",
"\t\t\t\t</VList>",
"\t\t\t\t<VListTile class=\"mt-3\" @click=\"\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon color=\"grey darken-1\">add_circle_outline</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileTitle class=\"grey--text text--darken-1\">Browse Channels</VListTileTitle>",
"\t\t\t\t</VListTile>",
"\t\t\t\t<VListTile @click=\"\">",
"\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t<VIcon color=\"grey darken-1\">settings</VIcon>",
"\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t<VListTileTitle class=\"grey--text text--darken-1\">Manage Subscriptions</VListTileTitle>",
"\t\t\t\t</VListTile>",
"\t\t\t</VList>",
"\t\t</VNavigationDrawer>",
"\t\t<VToolbar",
"\t\t\tcolor=\"red\"",
"\t\t\tdense",
"\t\t\tfixed",
"\t\t\tclipped-left",
"\t\t\tapp",
"\t\t>",
"\t\t\t<VToolbarSideIcon @click.stop=\"drawer = !drawer\"></VToolbarSideIcon>",
"\t\t\t<VIcon class=\"mx-3\">fa-youtube</VIcon>",
"\t\t\t<VToolbarTitle class=\"mr-5 align-center\">",
"\t\t\t\t<span class=\"title\">Youtube</span>",
"\t\t\t</VToolbarTitle>",
"\t\t\t<VSpacer></VSpacer>",
"\t\t\t<VLayout row align-center style=\"max-width: 650px\">",
"\t\t\t\t<VTextField",
"\t\t\t\t\tplaceholder=\"Search...\"",
"\t\t\t\t\tsingle-line",
"\t\t\t\t\tappend-icon=\"search\"",
"\t\t\t\t\t:append-icon-cb=\"() => {}\"",
"\t\t\t\t\tcolor=\"white\"",
"\t\t\t\t\thideDetails",
"\t\t\t\t></VTextField>",
"\t\t\t</VLayout>",
"\t\t</VToolbar>",
"\t\t<VContent>",
"\t\t\t<VContainer fill-height>",
"\t\t\t\t<VLayout justify-center align-center>",
"\t\t\t\t\t<VFlex shrink>",
"\t\t\t\t\t\t<VTooltip right>",
"\t\t\t\t\t\t\t<VBtn",
"\t\t\t\t\t\t\t\ticon",
"\t\t\t\t\t\t\t\tlarge",
"\t\t\t\t\t\t\t\t:href=\"source\"",
"\t\t\t\t\t\t\t\ttarget=\"_blank\"",
"\t\t\t\t\t\t\t\tslot=\"activator\"",
"\t\t\t\t\t\t\t>",
"\t\t\t\t\t\t\t\t<VIcon large>code</VIcon>",
"\t\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t\t<span>Source</span>",
"\t\t\t\t\t\t</VTooltip>",
"\t\t\t\t\t</VFlex>",
"\t\t\t\t</VLayout>",
"\t\t\t</VContainer>",
"\t\t</VContent>",
"\t</VApp>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tdata: () => ({",
"\t\t\tdrawer: true,",
"\t\t\titems: [",
"\t\t\t\t{ icon: 'trending_up', text: 'Most Popular' },",
"\t\t\t\t{ icon: 'subscriptions', text: 'Subscriptions' },",
"\t\t\t\t{ icon: 'history', text: 'History' },",
"\t\t\t\t{ icon: 'featured_play_list', text: 'Playlists' },",
"\t\t\t\t{ icon: 'watch_later', text: 'Watch Later' }",
"\t\t\t],",
"\t\t\titems2: [",
"\t\t\t\t{ picture: 28, text: 'Joseph' },",
"\t\t\t\t{ picture: 38, text: 'Apple' },",
"\t\t\t\t{ picture: 48, text: 'Xbox Ahoy' },",
"\t\t\t\t{ picture: 58, text: 'Nokia' },",
"\t\t\t\t{ picture: 78, text: 'MKBHD' }",
"\t\t\t]",
"\t\t}),",
"\t\tprops: {",
"\t\t\tsource: String",
"\t\t}",
"\t}",
"</script>",
"",
"<style>",
"\t.input-group__details:after {",
"\t\tbackground-color: rgba(255, 255, 255, 0.32) !important;",
"\t}",
"</style>"
],
"description": "Google Youtube Pre-defined layout - Vuetify"
},
"Sandbox Pre-defined layout": {
"prefix": "vPreDefinedLayoutSandbox",
"body": [
"<template>",
"\t<VApp id=\"sandbox\" :dark=\"dark\">",
"\t\t<VNavigationDrawer",
"\t\t\tv-model=\"primaryDrawer.model\"",
"\t\t\t:permanent=\"primaryDrawer.type === 'permanent'\"",
"\t\t\t:temporary=\"primaryDrawer.type === 'temporary'\"",
"\t\t\t:clipped=\"primaryDrawer.clipped\"",
"\t\t\t:floating=\"primaryDrawer.floating\"",
"\t\t\t:mini-variant=\"primaryDrawer.mini\"",
"\t\t\tabsolute",
"\t\t\toverflow",
"\t\t\tapp",
"\t\t></VNavigationDrawer>",
"\t\t<VToolbar app absolute :clipped-left=\"primaryDrawer.clipped\">",
"\t\t\t<VToolbarSideIcon",
"\t\t\t\t@click.stop=\"primaryDrawer.model = !primaryDrawer.model\"",
"\t\t\t\tv-if=\"primaryDrawer.type !== 'permanent'\"",
"\t\t\t></VToolbarSideIcon>",
"\t\t\t<VToolbarTitle>Vuetify</VToolbarTitle>",
"\t\t</VToolbar>",
"\t\t<VContent>",
"\t\t\t<VContainer fluid>",
"\t\t\t\t<VLayout align-center justify-center>",
"\t\t\t\t\t<VFlex xs10>",
"\t\t\t\t\t\t<VCard>",
"\t\t\t\t\t\t\t<VCardText>",
"\t\t\t\t\t\t\t\t<VLayout row wrap>",
"\t\t\t\t\t\t\t\t\t<VFlex xs12 md6>",
"\t\t\t\t\t\t\t\t\t\t<span>Scheme</span>",
"\t\t\t\t\t\t\t\t\t\t<VSwitch primary label=\"Dark\" v-model=\"dark\"></VSwitch>",
"\t\t\t\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t\t\t\t<VFlex xs12 md6>",
"\t\t\t\t\t\t\t\t\t\t<span>Drawer</span>",
"\t\t\t\t\t\t\t\t\t\t<VRadioGroup v-model=\"primaryDrawer.type\" column>",
"\t\t\t\t\t\t\t\t\t\t\t<VRadio",
"\t\t\t\t\t\t\t\t\t\t\t\tv-for=\"drawer in drawers\"",
"\t\t\t\t\t\t\t\t\t\t\t\t:key=\"drawer\"",
"\t\t\t\t\t\t\t\t\t\t\t\tprimary",
"\t\t\t\t\t\t\t\t\t\t\t\t:label=\"drawer\"",
"\t\t\t\t\t\t\t\t\t\t\t\t:value=\"drawer.toLowerCase()\"",
"\t\t\t\t\t\t\t\t\t\t\t></VRadio>",
"\t\t\t\t\t\t\t\t\t\t</VRadioGroup>",
"\t\t\t\t\t\t\t\t\t\t<VSwitch label=\"Clipped\" v-model=\"primaryDrawer.clipped\" primary></VSwitch>",
"\t\t\t\t\t\t\t\t\t\t<VSwitch label=\"Floating\" v-model=\"primaryDrawer.floating\" primary></VSwitch>",
"\t\t\t\t\t\t\t\t\t\t<VSwitch label=\"Mini\" v-model=\"primaryDrawer.mini\" primary></VSwitch>",
"\t\t\t\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t\t\t\t<VFlex xs12 md6>",
"\t\t\t\t\t\t\t\t\t\t<span>Footer</span>",
"\t\t\t\t\t\t\t\t\t\t<VSwitch label=\"Inset\" v-model=\"footer.inset\" primary></VSwitch>",
"\t\t\t\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t\t\t</VLayout>",
"\t\t\t\t\t\t\t</VCardText>",
"\t\t\t\t\t\t\t<VCardActions>",
"\t\t\t\t\t\t\t\t<VSpacer></VSpacer>",
"\t\t\t\t\t\t\t\t<VBtn flat>Cancel</VBtn>",
"\t\t\t\t\t\t\t\t<VBtn flat color=\"primary\">Submit</VBtn>",
"\t\t\t\t\t\t\t</VCardActions>",
"\t\t\t\t\t\t</VCard>",
"\t\t\t\t\t</VFlex>",
"\t\t\t\t</VLayout>",
"\t\t\t</VContainer>",
"\t\t</VContent>",
"\t\t<VFooter :inset=\"footer.inset\" app>",
"\t\t\t<span class=\"px-3\">© {{ new Date().getFullYear() }}</span>",
"\t\t</VFooter>",
"\t</VApp>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tdata: () => ({",
"\t\t\tdark: true,",
"\t\t\tdrawers: ['Default (no property)', 'Permanent', 'Temporary'],",
"\t\t\tprimaryDrawer: {",
"\t\t\t\tmodel: null,",
"\t\t\t\ttype: 'default (no property)',",
"\t\t\t\tclipped: false,",
"\t\t\t\tfloating: false,",
"\t\t\t\tmini: false",
"\t\t\t},",
"\t\t\tfooter: {",
"\t\t\t\tinset: false",
"\t\t\t}",
"\t\t})",
"\t}",
"</script>"
],
"description": "Sandbox Pre-defined layout - Vuetify"
},
"Parallax Pre-defined themes": {
"prefix": "vPreDefinedThemeParallax",
"body": [
"<template>",
"\t<div id=\"app\">",
"\t\t<VApp light>",
"\t\t\t<VToolbar class=\"white\">",
"\t\t\t\t<VToolbarTitle v-text=\"title\"></VToolbarTitle>",
"\t\t\t</VToolbar>",
"\t\t\t<VContent>",
"\t\t\t\t<section>",
"\t\t\t\t\t<VParallax src=\"${1:src}\" height=\"600\">",
"\t\t\t\t\t\t<VLayout column align-center justify-center class=\"white--text\">",
"\t\t\t\t\t\t\t<img src=\"${2:src}\" alt=\"${3:alt}\" height=\"200\">",
"\t\t\t\t\t\t\t<h1 class=\"white--text mb-2 display-1 text-xs-center\">Parallax Template</h1>",
"\t\t\t\t\t\t\t<div class=\"subheading mb-3 text-xs-center\">Powered by Vuetify</div>",
"\t\t\t\t\t\t\t<VBtn class=\"blue lighten-2 mt-5\" dark large href=\"/pre-made-themes\">",
"\t\t\t\t\t\t\t\tGet Started",
"\t\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t</VLayout>",
"\t\t\t\t\t</VParallax>",
"\t\t\t\t</section>",
"\t\t\t\t<section>",
"\t\t\t\t\t<VLayout column wrap class=\"my-5\" align-center>",
"\t\t\t\t\t\t<VFlex xs12 sm4 class=\"my-3\">",
"\t\t\t\t\t\t\t<div class=\"text-xs-center\">",
"\t\t\t\t\t\t\t\t<h2 class=\"headline\">The best way to start developing</h2>",
"\t\t\t\t\t\t\t\t<span class=\"subheading\">",
"\t\t\t\t\t\t\t\t\tCras facilisis mi vitae nunc",
"\t\t\t\t\t\t\t\t</span>",
"\t\t\t\t\t\t\t</div>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t<VFlex xs12>",
"\t\t\t\t\t\t\t<VContainer grid-list-xl>",
"\t\t\t\t\t\t\t\t<VLayout row wrap align-center>",
"\t\t\t\t\t\t\t\t\t<VFlex xs12 md4>",
"\t\t\t\t\t\t\t\t\t\t<VCard class=\"elevation-0 transparent\">",
"\t\t\t\t\t\t\t\t\t\t\t<VCardText class=\"text-xs-center\">",
"\t\t\t\t\t\t\t\t\t\t\t\t<VIcon x-large class=\"blue--text text--lighten-2\">color_lens</VIcon>",
"\t\t\t\t\t\t\t\t\t\t\t</VCardText>",
"\t\t\t\t\t\t\t\t\t\t\t<VCardTitle primary-title class=\"layout justify-center\">",
"\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"headline text-xs-center\">Material Design</div>",
"\t\t\t\t\t\t\t\t\t\t\t</VCardTitle>",
"\t\t\t\t\t\t\t\t\t\t\t<VCardText>",
"\t\t\t\t\t\t\t\t\t\t\t\tCras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.",
"\t\t\t\t\t\t\t\t\t\t\t</VCardText>",
"\t\t\t\t\t\t\t\t\t\t</VCard>",
"\t\t\t\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t\t\t\t<VFlex xs12 md4>",
"\t\t\t\t\t\t\t\t\t\t<VCard class=\"elevation-0 transparent\">",
"\t\t\t\t\t\t\t\t\t\t\t<VCardText class=\"text-xs-center\">",
"\t\t\t\t\t\t\t\t\t\t\t\t<VIcon x-large class=\"blue--text text--lighten-2\">flash_on</VIcon>",
"\t\t\t\t\t\t\t\t\t\t\t</VCardText>",
"\t\t\t\t\t\t\t\t\t\t\t<VCardTitle primary-title class=\"layout justify-center\">",
"\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"headline\">Fast development</div>",
"\t\t\t\t\t\t\t\t\t\t\t</VCardTitle>",
"\t\t\t\t\t\t\t\t\t\t\t<VCardText>",
"\t\t\t\t\t\t\t\t\t\t\t\tCras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.",
"\t\t\t\t\t\t\t\t\t\t\t</VCardText>",
"\t\t\t\t\t\t\t\t\t\t</VCard>",
"\t\t\t\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t\t\t\t<VFlex xs12 md4>",
"\t\t\t\t\t\t\t\t\t\t<VCard class=\"elevation-0 transparent\">",
"\t\t\t\t\t\t\t\t\t\t\t<VCardText class=\"text-xs-center\">",
"\t\t\t\t\t\t\t\t\t\t\t\t<VIcon x-large class=\"blue--text text--lighten-2\">build</VIcon>",
"\t\t\t\t\t\t\t\t\t\t\t</VCardText>",
"\t\t\t\t\t\t\t\t\t\t\t<VCardTitle primary-title class=\"layout justify-center\">",
"\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"headline text-xs-center\">Completely Open Sourced</div>",
"\t\t\t\t\t\t\t\t\t\t\t</VCardTitle>",
"\t\t\t\t\t\t\t\t\t\t\t<VCardText>",
"\t\t\t\t\t\t\t\t\t\t\t\tCras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.",
"\t\t\t\t\t\t\t\t\t\t\t</VCardText>",
"\t\t\t\t\t\t\t\t\t\t</VCard>",
"\t\t\t\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t\t\t</VLayout>",
"\t\t\t\t\t\t\t</VContainer>",
"\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t</VLayout>",
"\t\t\t\t</section>",
"\t\t\t\t<section>",
"\t\t\t\t\t<VParallax src=\"${4:src}\" height=\"380\">",
"\t\t\t\t\t\t<VLayout column align-center justify-center>",
"\t\t\t\t\t\t\t<div class=\"headline white--text mb-3 text-xs-center\">Web development has never been easier</div>",
"\t\t\t\t\t\t\t<em>Kick-start your application today</em>",
"\t\t\t\t\t\t\t<VBtn class=\"blue lighten-2 mt-5\" dark large href=\"/pre-made-themes\">",
"\t\t\t\t\t\t\t\tGet Started",
"\t\t\t\t\t\t\t</VBtn>",
"\t\t\t\t\t\t</VLayout>",
"\t\t\t\t\t</VParallax>",
"\t\t\t\t</section>",
"\t\t\t\t<section>",
"\t\t\t\t\t<VContainer grid-list-xl>",
"\t\t\t\t\t\t<VLayout row wrap justify-center class=\"my-5\">",
"\t\t\t\t\t\t\t<VFlex xs12 sm4>",
"\t\t\t\t\t\t\t\t<VCard class=\"elevation-0 transparent\">",
"\t\t\t\t\t\t\t\t\t<VCardTitle primary-title class=\"layout justify-center\">",
"\t\t\t\t\t\t\t\t\t\t<div class=\"headline\">Company info</div>",
"\t\t\t\t\t\t\t\t\t</VCardTitle>",
"\t\t\t\t\t\t\t\t\t<VCardText>",
"\t\t\t\t\t\t\t\t\t\tCras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.",
"\t\t\t\t\t\t\t\t\t</VCardText>",
"\t\t\t\t\t\t\t\t</VCard>",
"\t\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t\t<VFlex xs12 sm4 offset-sm1>",
"\t\t\t\t\t\t\t\t<VCard class=\"elevation-0 transparent\">",
"\t\t\t\t\t\t\t\t\t<VCardTitle primary-title class=\"layout justify-center\">",
"\t\t\t\t\t\t\t\t\t\t<div class=\"headline\">Contact us</div>",
"\t\t\t\t\t\t\t\t\t</VCardTitle>",
"\t\t\t\t\t\t\t\t\t<VCardText>",
"\t\t\t\t\t\t\t\t\t\tCras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.",
"\t\t\t\t\t\t\t\t\t</VCardText>",
"\t\t\t\t\t\t\t\t\t<VList class=\"transparent\">",
"\t\t\t\t\t\t\t\t\t\t<VListTile>",
"\t\t\t\t\t\t\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t\t\t\t\t\t\t<VIcon class=\"blue--text text--lighten-2\">phone</VIcon>",
"\t\t\t\t\t\t\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t\t\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t\t\t\t\t\t\t<VListTileTitle>777-867-5309</VListTileTitle>",
"\t\t\t\t\t\t\t\t\t\t\t</VListTileContent>",
"\t\t\t\t\t\t\t\t\t\t</VListTile>",
"\t\t\t\t\t\t\t\t\t\t<VListTile>",
"\t\t\t\t\t\t\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t\t\t\t\t\t\t<VIcon class=\"blue--text text--lighten-2\">place</VIcon>",
"\t\t\t\t\t\t\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t\t\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t\t\t\t\t\t\t<VListTileTitle>Chicago, US</VListTileTitle>",
"\t\t\t\t\t\t\t\t\t\t\t</VListTileContent>",
"\t\t\t\t\t\t\t\t\t\t</VListTile>",
"\t\t\t\t\t\t\t\t\t\t<VListTile>",
"\t\t\t\t\t\t\t\t\t\t\t<VListTileAction>",
"\t\t\t\t\t\t\t\t\t\t\t\t<VIcon class=\"blue--text text--lighten-2\">email</VIcon>",
"\t\t\t\t\t\t\t\t\t\t\t</VListTileAction>",
"\t\t\t\t\t\t\t\t\t\t\t<VListTileContent>",
"\t\t\t\t\t\t\t\t\t\t\t\t<VListTileTitle>john@vuetifyjs.com</VListTileTitle>",
"\t\t\t\t\t\t\t\t\t\t\t</VListTileContent>",
"\t\t\t\t\t\t\t\t\t\t</VListTile>",
"\t\t\t\t\t\t\t\t\t</VList>",
"\t\t\t\t\t\t\t\t</VCard>",
"\t\t\t\t\t\t\t</VFlex>",
"\t\t\t\t\t\t</VLayout>",
"\t\t\t\t\t</VContainer>",
"\t\t\t\t</section>",
"\t\t\t\t<VFooter class=\"blue darken-2\">",
"\t\t\t\t\t<VLayout row wrap align-center>",
"\t\t\t\t\t\t<VFlex xs12>",
"\t\t\t\t\t\t\t<div class=\"white--text ml-3\">",
"\t\t\t\t\t\t\t\tMade with",
"\t\t\t\t\t\t\t\t<VIcon class=\"red--text\">favorite</VIcon>",
"\t\t\t\t\t\t\t\tby",
"\t\t\t\t\t\t\t\t<a class=\"white--text\" href=\"https://vuetifyjs.com\" target=\"_blank\">Vuetify</a>",
"