Выровнять по правому краюв панели инструментов Vuetify - PullRequest
Новая
       68

Выровнять по правому краюв панели инструментов Vuetify

0 голосов
/ 19 сентября 2019

Я пытаюсь выровнять последние две кнопки на панели инструментов Vuetify по правому краю, но мне не везет.Я попытался назначить класс text-right, а также свой собственный класс, где я float: right и так далее.Есть ли простое решение, которое я пропускаю?

    <v-toolbar 
      :dense="true"
      :flat="true"
      :color="'blue darken-4'"
      :dark="true"
    >
     <v-toolbar-items>
        <v-btn text><img class='icon' src="../images/house.png">Dashboard</v-btn>
        <v-btn text><img class='icon' src="../images/theloop.svg">The Loop</v-btn>
        <v-btn text><img class='icon' src="../images/sales.png">Sales</v-btn>
        <v-btn text><img class='icon' src="../images/wrench.png">Service</v-btn>
        <v-btn text><img class='icon' src="../images/dollar.png">Accounting</v-btn>
        <v-btn text><img class='icon' src="../images/box.png">Inventory</v-btn>
        <v-btn text><img class='icon' src="../images/legend.png">Leadership</v-btn>
        <v-btn text><img class='icon' src="../images/seiu.png">Learning</v-btn>
        <v-btn text><img class='icon' src="../images/search.png">Search</v-btn>
        <v-btn text class="text-right">Username</v-btn>
        <v-btn text class="text-right">Logout</v-btn>
      </v-toolbar-items>
    </v-toolbar>

Прямо сейчас это выглядит так:

Toolbar picture

Я хотел бы текст "username" и "logout"быть полностью направо.

Ответы [ 2 ]

1 голос
/ 19 сентября 2019

Вы могли бы выполнить требования, используя следующие изменения

Согласно документациям по панелям инструментов в первом примере вы можете видеть, что они используют <div class="flex-grow-1"></div> для выравнивания значков вправо. 

<v-toolbar :dense="true" :flat="true" :color="'blue darken-4'" :dark="true">
  <v-toolbar-items>
    <v-btn text><img class='icon' src="../images/house.png">Dashboard</v-btn>
    <v-btn text><img class='icon' src="../images/theloop.svg">The Loop</v-btn>
    <v-btn text><img class='icon' src="../images/sales.png">Sales</v-btn>
    <v-btn text><img class='icon' src="../images/wrench.png">Service</v-btn>
    <v-btn text><img class='icon' src="../images/dollar.png">Accounting</v-btn>
  </v-toolbar-items>

  <div class="flex-grow-1"></div>

  <v-toolbar-items>
    <v-btn text>Username</v-btn>
    <v-btn text>Logout</v-btn>
  </v-toolbar-items>
</v-toolbar>

И вы также можете добиться этого, используя ниже css в своем коде выхода 

.text-right {
  float: right;
}

.custom_cls {
  display: block;
  width: 100%;
}

<v-toolbar :dense="true" :flat="true" :color="'yellow darken-4'" :dark="true">
  <v-toolbar-items class="custom_cls">
    <v-btn text><img class='icon' src="../images/house.png">Dashboard</v-btn>
    <v-btn text><img class='icon' src="../images/theloop.svg">The Loop</v-btn>
    <v-btn text><img class='icon' src="../images/sales.png">Sales</v-btn>
    <v-btn text><img class='icon' src="../images/wrench.png">Service</v-btn>
    <v-btn text><img class='icon' src="../images/dollar.png">Accounting</v-btn>
    <v-btn text class="text-right">Username</v-btn>
    <v-btn text class="text-right">Logout</v-btn>
  </v-toolbar-items>
</v-toolbar>

Вы можете проверить здесь, работая демо .

0 голосов
/ 21 сентября 2019

Вставьте тег "<v-spacer />" перед последним 2 "<v-btn>"
Документ: https://vuetifyjs.com/en/components/grids

...