Как поставить v-btn в один ряд с v-extension-panel? - PullRequest
Новая
       4

Как поставить v-btn в один ряд с v-extension-panel?

0 голосов
/ 14 апреля 2020

У меня проблемы с выравниванием макета. Идея состоит в том, чтобы иметь один набор v-expansion-panels в одном ряду с v-btn, и оба они визуально центрировались внутри карты. Я почти достиг этого в этом коде: https://codepen.io/anzuj/pen/PoPPbdw с такой структурой: 

      row
      / \
    col  col
 (panel) (btn)

Задача : минимальная ширина v-col создает пробел вокруг кнопка, визуально центрирующая содержимое карты. Был бы признателен за помощь в том, чтобы:

  1. Сделать v-col вокруг v-btn такой же ширины, как v-btn
  2. Решить макет без системы сетки

Большое спасибо всем, кто задумался!

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

Исправлено: вычислили, сколько ширины нужно v-col с кнопкой, и применили встроенное моделирование в v-for l oop: <v-col cols="1" style="max-width:40px">. Отредактированное перо: https://codepen.io/anzuj/pen/KKddyzy

0 голосов
/ 14 апреля 2020

Все, что вы сделали, правильно, вам просто нужно деформировать <v-container> внутри <v-card-text>, чтобы он получил правильное выравнивание. Кроме того, кнопка справа не должна иметь ширину col-2, ей нужна только ширина col-1. Поскольку вы не указали ширину столбца для обертки кнопки, она занимает все пространство и, следовательно, контейнер. Другой вариант - установить ширину контейнера с помощью css, например: <v-container style="width:600px;">

<v-card color="grey lighten-3">
  <v-card-text>
    Problem: v-col with the <v-icon color="green">mdi-check</v-icon>button has min col width that off-centers the general look. How can the margins on left and right be visually equal? 

   <v-container> //Either give a width here style="width:600px;"
      <v-row v-for="(item,i) in 5"
        :key="i" class="mb-1" no-gutters justify="center">
        <v-col cols="10">
          <v-expansion-panels>
            <v-expansion-panel>
              <v-expansion-panel-header>Item</v-expansion-panel-header>
              <v-expansion-panel-content>
                  Lorem ipsum dolor sit amet
               </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-col>
        <v-col> //or set cols="1" here
         <v-btn class="closeBtn mb-1 ml-1" width="36px">
           <v-icon color="green">mdi-check</v-icon>
         </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-card-text>
 </v-card>
...