Блог

В моем приложении Vue / Vuetify есть панель навигации со следующими элементами

1. Меню для гамбургеров
2. Логотип SVG, связанный с домашней страницей
3. Некоторые ссылки для навигации

Я хочу выровнять меню по левому краю, расположить логотип по центру и осветить ссылки навигации по правому краю. Вот разметка, которую я использую:

   <v-app-bar app>
    <!-- hamburger menu --->
    <v-menu>
      <template #activator="{ on, attrs }">
        <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
      </template>
      <v-list>
        <v-list-item v-for="(menuItem, index) in menuItems"
                     :to="menuItem.route"
                     :key="index">
          {{ menuItem.text }}
        </v-list-item>
      </v-list>
    </v-menu>

    <!-- logo --->
    <router-link :to="{name: 'home'}">
      <v-img src="../assets/logo.svg" width="110px" />
    </router-link>

    <!-- navigation links --->
    <v-spacer />

    <router-link v-for="(menuItem, index) in menuItems"
                 :key="index"
                 :to="menuItem.route">
      {{ menuItem.text }}
    </router-link>
  </v-app-bar>
 

Я предпринял множество безуспешных попыток центрировать логотип, но, похоже, не могу понять это.

Это зависит от того, чего вы пытаетесь достичь.

Если вам нужно центрировать логотип, независимо от того, сколько места занимают другие компоненты, выполните следующие действия (но это будет сложно, так как это будет зависеть от длины ссылок маршрутизатора справа и сколько места они занимают)

 <template>
    <v-app>
        <v-app-bar app>
            <!-- hamburger menu --->
            <template #activator="{ on, attrs }">
                <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
            </template>
            <v-list>
                <v-list-item
                    v-for="(menuItem, index) in menuItems"
                    :to="menuItem.route"
                    :key="index"
                >{{ menuItem.text }}</v-list-item>
            </v-list>

            <!-- logo --->
            <div class="center-me">
                <router-link :to="{name: 'home'}">
                    <v-img src="@/assets/logo.svg" width="110px" />
                </router-link>
            </div>

            <!-- navigation links --->
            <v-spacer />
            <div class="d-flex flex-row">
                <router-link
                    v-for="(menuItem, index) in menuItems"
                    :key="index"
                    :to="menuItem.route"
                >{{ menuItem.text }}</router-link>
            </div>
        </v-app-bar>
    </v-app>
</template>

<style scoped>
    .center-me {
        position: absolute;
        margin-left: 50%;
        transform: translate(-50%, 0);
    }
</style>
 

Тем не менее, вы можете использовать классы Flexbox, предоставляемые Vuetify, чтобы равномерно распределить пространство между тремя частями, как показано ниже (кроме того, использование v-образной проставки вокруг логотипа поможет)

 <v-app-bar app>
  <div class="d-flex flex-row justify-space-between align-center" style="width:100%">
    <!-- hamburger menu --->
    <v-menu>
      <template #activator="{ on, attrs }">
        <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
      </template>
      <v-list>
        <v-list-item
          v-for="(menuItem, index) in menuItems"
          :to="menuItem.route"
          :key="index"
        >{{ menuItem.text }}</v-list-item>
      </v-list>
    </v-menu>

    <!-- logo --->
    <router-link :to="{name: 'home'}">
      <v-img src="../assets/logo.svg" width="110px" />
    </router-link>

    <!-- navigation links --->
    <div class="d-flex flex-row">
      <router-link
        v-for="(menuItem, index) in menuItems"
        :key="index"
        :to="menuItem.route"
      >{{ menuItem.text }}</router-link>
    </div>
  </div>
</v-app-bar>
 

Желаю удачи.

вы можете использовать v-spacer так:

 <v-app-bar>
  <v-menu>
     // some code 
  </v-menu>

  <v-spacer></v-spacer>

  <!-- logo --->
  <router-link :to="{name: 'home'}">
     <v-img src="../assets/logo.svg" width="110px" />
  </router-link>

  <v-spacer></v-spacer>

  <router-link>
    // some code
  </router-link>
</v-app-bar>