Vuetify многострочных v-панели инструментов на меньших точках останова - PullRequest
Новая
       30

Vuetify многострочных v-панели инструментов на меньших точках останова

0 голосов
/ 13 ноября 2018

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

Я пробовал разные флаги для комбинаций v-layout / v-flex, но не получаю нужных мне результатов.

Я проверял это на коде: https://codepen.io/rpreilley/pen/JebLGz

При изменении размера окна кнопки в элементах панели инструментов не перемещаются в новую строку с флагами переноса строк на макете.

Вот код шаблона. Я строго имею дело с шаблоном HTML, а не с CSS или данными: 

<div id="app">
  <v-app>
    <v-content>
      <v-layout>
        <v-toolbar dense flat>
          <v-toolbar-side-icon></v-toolbar-side-icon>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-text-field
            hide-details
            prepend-icon="search"
            single-line
          ></v-text-field>
          <v-spacer></v-spacer>
          <v-layout justify-end row wrap>
            <v-toolbar-items>
              <v-btn flat>Link One</v-btn>
              <v-btn flat>Link Two</v-btn>
              <v-btn flat>Link Three</v-btn>
              <v-btn flat>Link Four</v-btn>
              <v-btn flat>Link Five</v-btn>
              <v-btn flat>Link Six</v-btn>
            </v-toolbar-items>
          </v-layout>
        </v-toolbar>
      </v-layout>
    </v-content>
  </v-app>
</div>

Я новичок в vuetify, так что это может быть что-то, что я пропускаю в документах. Любая помощь будет принята с благодарностью.

...