Как создать адаптивный макет в vuetify?

Question

В Google Material Framework у меня есть этот код

        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_date_from.type" :label="page.text_input_date_from.label" box autofocus :append-icon="page.text_input_date_from.icon" v-model="page.text_input_date_from.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_date_to.type" :label="page.text_input_date_to.label" box autofocus :append-icon="page.text_input_date_to.icon" v-model="page.text_input_date_to.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_person_name.type" :label="page.text_input_person_name.label" box autofocus :append-icon="page.text_input_person_name.icon" v-model="page.text_input_person_name.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_company_name.type" :label="page.text_input_company_name.label" box autofocus :append-icon="page.text_input_company_name.icon" v-model="page.text_input_company_name.value"></v-text-field>
        </div>

В основном есть такие классы

mdc-layout-grid__cell--span-3
mdc-layout-grid__cell--span-3-desktop
mdc-layout-grid__cell--span-3-tablet
mdc-layout-grid__cell--span-3-phone

Как мне повторить то же самое, используя vuetify?

https://vuetifyjs.com/en/layout/grid

Я не вижу примеров отзывчивости.

Спасибо

Answer 1

Из Сетка Vuetify Страница документации:

Он содержит 5 типов медиа-точек останова, которые используются для нацеливания на определенные размеры экрана или ориентации. Реквизиты для компонентов сетки на самом деле являются классами, которые являются производными от их определенных свойств.

Это означает, что реквизиты, которые передаются компоненту v-flex, определяют адаптивные классы для элемента сетки.

Если вы перейдете в раздел #API на той же странице и выберете v-flex из выбора компонента, первое доступное свойство: (size)(1-12) перечисляет возможные значения, чтобы указать макет для каждой точки останова:

хз: очень маленький,
см: маленький,
мкд: средний,
LG: большой,
XL: очень большой

И они используются со значениями 1 through 12.

Пример использования:

<v-flex xs12 sm5 md3>
  <v-card dark color="primary">
    ...
  </v-card>
</v-flex>

Убедитесь, что v-flex документация для требуемой структуры макета для работы сетки.