如何改变Quasar App的Layout，把左边的Drawer放到右边？

Question

我对 Quasar 的布局感到困惑并且不理解它，尽管我已经阅读了它的文档。

脚手架给了我下面的代码。但这使得抽屉在左侧。我怎样才能把它放在右边？

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <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
      content-class="bg-grey-1"
    >
      <q-list>
        <q-item-label
          header
          class="text-grey-8"
        >
          Essential Links
        </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>

我觉得跟

里面的字母有关系

不过。和他们一起玩不会改变任何东西。

我也尝试将 q-drawer 标签放在 q-page-container 下方，但也没成功。

如何让抽屉在右侧可见？

Answer 1

您可以将行为设置为 side="right"

https://quasar.dev/layout/drawer#QDrawer-API

<q-drawer
  v-model="leftDrawerOpen"
  side="right"
  show-if-above
  bordered
  content-class="bg-grey-1"
>
  <q-list>
    <q-item-label header class="text-grey-8">
      Essential Links
    </q-item-label>
    <EssentialLink
      v-for="link in essentialLinks"
      :key="link.title"
      v-bind="link"
    />
  </q-list>
</q-drawer>

如何改变Quasar App的Layout，把左边的Drawer放到右边？

How to change Layout of Quasar App and put the left Drawer to the right?

vue.js

quasar-framework

quasar