Quasar レーアウトデザイナー

<template>
<div class="q-pa-md">
<q-layout view="hHh Lpr lff" container style="height: 300px" class="shadow-2 rounded-borders">
<q-header elevated :class="$q.dark.isActive ? 'bg-secondary' : 'bg-black'">
<q-toolbar>
<q-btn flat @click="drawerLeft = !drawerLeft" round dense icon="menu" />
<q-toolbar-title>Header</q-toolbar-title>
<q-btn flat @click="drawerRight = !drawerRight" round dense icon="menu" />
</q-toolbar>
</q-header>
<q-drawer
v-model="drawerLeft"
show-if-above
:width="200"
:breakpoint="700"
elevated
class="bg-primary text-white"
>
<q-scroll-area class="fit">
<div class="q-pa-sm">
<div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
</div>
</q-scroll-area>
</q-drawer>
<q-drawer
side="right"
v-model="drawerRight"
show-if-above
bordered
:width="200"
:breakpoint="500"
:class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'"
>
<q-scroll-area class="fit">
<div class="q-pa-sm">
<div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
</div>
</q-scroll-area>
</q-drawer>
<q-page-container>
<q-page padding>
<p v-for="n in 15" :key="n">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?
</p>
</q-page>
</q-page-container>
</q-layout>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
return {
drawerLeft: ref(false),
drawerRight: ref(false)
}
}
}
</script>