Quasar-Framework를 사용하여 상단 메뉴 모음을 작성하는 방법

Quasar-Framework를 사용하여 상단 메뉴 모음을 작성하는 방법

Quasar 프레임워크를 시험하고 있지만 데모나 현재 라이브 웹사이트에는 아무것도 없습니다(https://github.com/quasarframework/quasar-awesome)에서는 톱 메뉴 바가 프레임워크에서 어떻게 사용되는지 보여 줍니다.이것은 대부분의 웹 프레임워크에서 표준이라고 생각합니다.제발 도와주세요.

Quasar는 앱을 구축하기 위한 PWA 프레임워크이기 때문에 지원하지 않습니다.그래도 조금 조정해서 맨 위에 있는 버튼을 눌러도 돼요.

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

버튼 내부에 팝오버를 추가하여 드롭다운 버튼을 만들 수도 있습니다.

프로젝트 중 하나에서 비슷한 일을 했어요.큰 화면에는 메뉴 항목을 인라인으로, 작은 화면에는 팝업으로 표시합니다.필요에 따라 레이아웃을 수정할 수 있습니다.

<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>

언급URL : https://stackoverflow.com/questions/49856989/how-to-create-a-top-menu-bar-using-quasar-framework