如何使用Quasar Vue Framework 14.3在组件中制作侧面板

Question

I have a working left side panel using Quasar version 14.3. Now I want to make it a component. When I use this:

<template>
  <q-layout ref="layout"
            :left-breakpoint=0>

    <q-scroll-area slot="left" style="width: 80%; height: 100%>
      <div>
        <left-panel></left-panel>
      </div>
    </q-scroll-area>
  </q-layout>
</template>

It kind of works, however:

• the width gives css issues
• do I really have to keep the q-scroll-area out of the component? When I include it the side panel does not hide but is in the page and then the actual page is below it when you scroll down.

Any suggestion to how to make a solid side panel in a component with Quasar?

Answer 1

You can use q-layout-drawer for creating the left panel in q-layout

<template>
  <q-layout ref="layout"
            :left-breakpoint=0>
    <q-layout-drawer v-model="flag" side="left">
    <q-scroll-area slot="left" style="width: 80%; height: 100%>
      <div>
        <left-panel></left-panel>
      </div>
    </q-scroll-area>
    </q-layout-drawer>
  </q-layout>
</template>

Set flag true in data of Vue component.You can also open/close drawer on button click by setting flag true false