72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue'
|
|
import EssentialLink from 'components/EssentialLink.vue'
|
|
|
|
const linksList = [
|
|
{
|
|
title: 'Flow customized',
|
|
caption: 'Vue Flow using quasar components',
|
|
icon: 'code',
|
|
link: '/',
|
|
},
|
|
{
|
|
title: 'Flow in a popup',
|
|
caption: 'Vue Flow in a popup',
|
|
icon: 'code',
|
|
link: '/popup',
|
|
},
|
|
{
|
|
title: 'Flow in a card',
|
|
caption: 'Vue Flow in a card',
|
|
icon: 'code',
|
|
link: '/card',
|
|
},
|
|
]
|
|
|
|
export default defineComponent({
|
|
name: 'MainLayout',
|
|
|
|
components: {
|
|
EssentialLink,
|
|
},
|
|
|
|
setup() {
|
|
const leftDrawerOpen = ref(false)
|
|
|
|
return {
|
|
essentialLinks: linksList,
|
|
leftDrawerOpen,
|
|
toggleLeftDrawer() {
|
|
leftDrawerOpen.value = !leftDrawerOpen.value
|
|
},
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout view="lHh Lpr lFf">
|
|
<q-header elevated>
|
|
<q-toolbar>
|
|
<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
|
|
|
|
<q-toolbar-title> Quasar App </q-toolbar-title>
|
|
|
|
<div>Quasar v{{ $q.version }}</div>
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
|
|
<q-list>
|
|
<q-item-label header> Examples </q-item-label>
|
|
|
|
<EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
|
|
</q-list>
|
|
</q-drawer>
|
|
|
|
<q-page-container>
|
|
<router-view />
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|