Использование vuetify для определения разных макетов для разных размеров экрана

Question

У меня есть приложение vue. js, и я использую vuetify. У меня есть таблица, которая выглядит следующим образом:

Когда я уменьшаю ширину области просмотра, она выглядит примерно так:

Мне не нравится этот вид. Я бы предпочел, чтобы выпадающий список помещался под описанием строки, и чтобы флажки оставались на одном уровне с другими строками, например:

Проблема в том, что порядок элементов в каждой строке выглядит следующим образом: описание, раскрывающийся список (если применимо к строке), флажок 1, checbox 2, флажок 3. Единственный способ увидеть раскрывающийся список ниже описания, это если это помещено в конец ряда. Но можно ли это сделать с CSS ниже определенной ширины экрана?

Вот мой код:

<v-card class="mb-3 px-3">
      <v-card-title class="px-0">
          <div class="headline">Items</div> 
      </v-card-title>
      <v-container fluid pa-0>
      <v-layout row wrap py-3>
          <v-flex xs9 sm6 md9>
              <v-label>Item</v-label>
          </v-flex>
          <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 1</v-label></v-flex>
          <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 2</v-label></v-flex>
          <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 3</v-label></v-flex>
      </v-layout>
      <v-divider></v-divider>
      </v-container>
      <v-form>
        <v-card v-for="(item, index) in items" :key="index" :id="'index-' + index" flat>
            <v-container fluid pa-0>
                <v-layout row wrap align-center style="min-height: 80px;">
                    <v-flex xs12 sm6 :class="item.hasDropdown ? 'md5' : 'md9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-flex>
                    <v-flex md4 v-if="item.hasDropdown">
                      <v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
                    </v-flex>
                    <v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-flex>
                    <v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-flex>
                    <v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-flex>
                </v-layout>
            </v-container>
            <v-divider v-if="index < items.length - 1"></v-divider>
        </v-card>
      </v-form>
    </v-card>

Вы заметите, что я использую классы flex vuetify, такие как sm2, md1, sm2, et c. Они отлично подходят для настройки количества столбцов на экранах разных размеров, но есть ли что-то похожее в vuetify для определения разных макетов на основе разных размеров экрана?

Answer 1

Для этой цели вы можете использовать классы заказов . Просто добавьте order-lg / order-md et c в соответствии с вашими потребностями. Здесь в вашем примере я использую order-md. Настройте в соответствии с вашими потребностями. Вот как я это сделал:

1. Вместо v-flex, вы должны использовать v-col
2. для использования в сетке md=9 стиль вместо md9
3. ваша страница должна иметь v-app на уровне root, в противном случае это не будет работать.

................... ......

<v-card class="mb-3 px-3">
  <v-card-title class="px-0">
      <div class="headline">Items</div> 
  </v-card-title>
  <v-container fluid pa-0>
    <v-layout row wrap py-3>
      <v-flex xs9 sm6 md9>
          <v-label>Item</v-label>
      </v-flex>
      <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 1</v-label></v-flex>
      <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 2</v-label></v-flex>
      <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 3</v-label></v-flex>
  </v-layout>
  <v-divider></v-divider>
  </v-container>
  <v-form>
    <v-card v-for="(item, index) in items" :key="index" :id="'index-' + index" flat>
        <v-container fluid pa-0>
            <v-layout row wrap align-center style="min-height: 80px;">
                <v-col xs=12 sm=6 :md="item.hasDropdown ? '5' : '9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-col>
                <v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-col>
                <v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-col>
                <v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-col>
                <v-col md=4 v-if="item.hasDropdown" order-md="1">
                  <v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
                </v-col>
            </v-layout>
        </v-container>
        <v-divider v-if="index < items.length - 1"></v-divider>
    </v-card>
  </v-form>
</v-card>

РЕШЕНИЕ 2 Решение 1 больше похоже на vuetifyi sh способ сделать заказ. Для простого css способа:

<v-card class="mb-3 px-3">
  <v-card-title class="px-0">
      <div class="headline">Items</div> 
  </v-card-title>
  <v-container fluid pa-0>
  <v-layout row wrap py-3>
      <v-flex xs9 sm6 md9>
          <v-label>Item</v-label>
      </v-flex>
      <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 1</v-label></v-flex>
      <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 2</v-label></v-flex>
      <v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 3</v-label></v-flex>
  </v-layout>
  <v-divider></v-divider>
  </v-container>
  <v-form>
    <v-card v-for="(item, index) in items" :key="index" :id="'index-' + index" flat>
        <v-container fluid pa-0>
            <v-layout row wrap align-center style="min-height: 80px;">
                <v-flex xs12 sm6 :class="item.hasDropdown ? 'md5' : 'md9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-flex>
                <v-flex md4 v-if="item.hasDropdown" class="v-select">
                  <v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
                </v-flex>
                <v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-flex>
                <v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-flex>
                <v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-flex>
            </v-layout>
        </v-container>
        <v-divider v-if="index < items.length - 1"></v-divider>
    </v-card>
  </v-form>
</v-card>

А вот и CSS:

.v-chkbox {
  order: 1;
}
.v-select {
  order: 2;
}

* Не забудьте медиазапрос, который я не добавил.

** Чтобы узнать больше о css заказе, проверьте ссылку MDN и CSS Tricks .

Приветствия:)