mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 16:43:55 +00:00
83 lines
2.3 KiB
Vue
83 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<v-app id="inspire" dark>
|
||
|
|
<v-navigation-drawer
|
||
|
|
clipped
|
||
|
|
fixed
|
||
|
|
v-model="drawer"
|
||
|
|
app
|
||
|
|
>
|
||
|
|
<v-list dense>
|
||
|
|
<v-list-group v-for="item in items" :value="item.active" v-bind:key="item.title">
|
||
|
|
<v-list-tile slot="item" @click="">
|
||
|
|
<v-list-tile-action>
|
||
|
|
<v-icon>{{ item.action }}</v-icon>
|
||
|
|
</v-list-tile-action>
|
||
|
|
<v-list-tile-content>
|
||
|
|
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
|
||
|
|
</v-list-tile-content>
|
||
|
|
<v-list-tile-action>
|
||
|
|
<v-icon v-if="item.items">keyboard_arrow_down</v-icon>
|
||
|
|
</v-list-tile-action>
|
||
|
|
</v-list-tile>
|
||
|
|
<v-list-tile v-for="subItem in item.items" v-bind:key="subItem.title" @click="">
|
||
|
|
<v-list-tile-content>
|
||
|
|
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
|
||
|
|
</v-list-tile-content>
|
||
|
|
<v-list-tile-action>
|
||
|
|
<v-icon>{{ subItem.action }}</v-icon>
|
||
|
|
</v-list-tile-action>
|
||
|
|
</v-list-tile>
|
||
|
|
</v-list-group>
|
||
|
|
</v-list>
|
||
|
|
|
||
|
|
</v-navigation-drawer>
|
||
|
|
<v-toolbar app fixed clipped-left>
|
||
|
|
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
|
||
|
|
<v-toolbar-title>Application</v-toolbar-title>
|
||
|
|
</v-toolbar>
|
||
|
|
<v-content>
|
||
|
|
<v-container grid-list-md text-xs-center>
|
||
|
|
<v-layout row wrap>
|
||
|
|
<v-flex xs12>
|
||
|
|
<v-card dark color="primary">
|
||
|
|
<v-card-text class="px-0"><slot/></v-card-text>
|
||
|
|
</v-card>
|
||
|
|
</v-flex>
|
||
|
|
</v-layout></v-container>
|
||
|
|
|
||
|
|
<v-container fluid fill-height>
|
||
|
|
<v-layout justify-center align-center>
|
||
|
|
<v-tooltip right>
|
||
|
|
<v-btn icon large :href="source" target="_blank" slot="activator">
|
||
|
|
<v-icon large>code</v-icon>
|
||
|
|
</v-btn>
|
||
|
|
<span>Source</span>
|
||
|
|
</v-tooltip>
|
||
|
|
</v-layout>
|
||
|
|
|
||
|
|
</v-container>
|
||
|
|
</v-content>
|
||
|
|
<v-footer app fixed>
|
||
|
|
<span>© 2017</span>
|
||
|
|
</v-footer>
|
||
|
|
</v-app>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "layout",
|
||
|
|
|
||
|
|
data: () => ({
|
||
|
|
drawer: null
|
||
|
|
}),
|
||
|
|
props: {
|
||
|
|
items: Array,
|
||
|
|
source: String
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons");
|
||
|
|
</style>
|