如何使用quasar-framework创建顶级菜单栏

Question

我正在尝试Quasar框架，在演示中或在当前的在线网站(在：https://github.com/quasarframework/quasar-awesome中)中都没有展示如何在框架中使用顶部菜单栏，我认为这在大多数web框架中是标准的。请帮帮忙。

Answer 1

由于quasar是用于构建应用程序的PWA框架，这就是为什么它不支持。不过，你可以稍微调整一下，把按钮放在顶部。

<q-toolbar-title>
<q-btn></q-btn>
</q-toolbar-title>

你也可以在按钮内部添加弹出按钮来制作一个下拉按钮。

Answer 2

我在我的一个项目中做了类似的事情。它将在大屏幕上以内联方式显示菜单项，在小屏幕上以弹出方式显示。您可以根据需要修改布局。

<template> 
   <q-layout>
     <q-layout-header >
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen" >
          <q-icon name="menu" />
        </q-btn>
        <img
          class="ml-2"
          height="30"
          alt="Company logo"
          src="~assets/logo.png"
        >
        <q-btn
          :color="showActions?'secondary':''"
          :icon="showActions?'keyboard_arrow_up':'keyboard_arrow_down'"
          flat
          class="lt-sm ml-auto"
          @click.native="showActions = !showActions"
        />


        <div class="action-buttons ml-auto gt-xs" >
          <q-btn
            v-for="item in toolbarButtons"
            :key="item.label"
            :icon="item.icon"
            :label="item.label"
            flat
            @click="item.action()"
          />
        </div>
      </q-toolbar>
      <div class="row justify-end">
        <div class="col-7" >
          <q-popover
            :anchor-click="true"
            v-model="showActions"
            fit
            anchor="bottom left"
            class="lt-sm"
          >
            <q-list
              separator
              link>
              <q-item
                v-close-overlay
                v-for="item in toolbarButtons"
                :key="item.label"
                @click.native="item.action()"
              >
                <q-item-side >
                  <q-icon :name="item.icon"/>
                </q-item-side>
                {{ item.label }}
              </q-item>
            </q-list>
          </q-popover>
        </div>
      </div>
     </q-layout-header>
   </q-layout>
  </template>


<script>
export default {
  name: 'LayoutName',
  data() {
    return {
      leftDrawerOpen: false,
      showActions: false,
      toolbarButtons: [
        {
          label: 'Share',
          icon: 'fa fa-share',
          action: () => {
            this.$router.push('/import');
          },
        },
        {
          label: 'Save',
          icon: 'fa fa-save',
          action: () => {
          },
        },
        ...
      ],
    };
  },
};
</script>