Vuetify V2: v-col как раздел для делителя с градиентом, который выходит за пределы его границ? - PullRequest
Новая
       59

Vuetify V2: v-col как раздел для делителя с градиентом, который выходит за пределы его границ?

2 голосов
/ 02 марта 2020

Таким образом, волнистые участки градиента + траектории клипа были в моде, например, enter image description here или enter image description here

Мне было любопытно, как эмулировать это в приложении nuxt + vuetify (v2). В Vuetify v2 документация по сетке :

  • v-container: предоставляет возможность центрировать и горизонтально дополнять содержимое вашего сайта
  • v-row: ( заменяет v-layout) управление макетом и потоком его внутренних столбцов
  • v-col: (заменяет v-flex) является владельцем содержимого, который должен быть прямым потомком v-row

и настройка по умолчанию для приложения nuxt с vuetify: 

<v-app>
  <v-content>
    <v-container>
      <nuxt />
    </v-container>
  </v-content>
</v-app>

, и я использую <v-row> в качестве разделов следующим образом (например, index.vue) 

<v-row> <!-- <nuxt/> -->
  <v-col cols="12> <!-- section 1 -->
    ...
  </v-col>
  <v-col cols="12> <!-- section 1 -->
    ..
  </v-col>
</v-row>

Мой вопрос заключается в том, как я могу иметь те v-col s ("секции"), которые вложены в v-container/nuxt/v-row, с градиентом и кривой пути обрезки, которая расширяет ширину приложения, а не ширину колонны с отступами, полями и т. д. c

...