Vuetify拥有一个12点的栅格系统,它使用flex-box构建,栅格用于布局应用程序的内容。它包含5种类型的媒体断点,用于定位特定的屏幕大小或方向。栅格组件的属性实际上是从它们定义的属性派生的类,这允许您轻松地将这些辅助类指定为属性,同时仍然提供在任何地方使用的类;其实vuetify的栅格与bootstrap的栅格系统是类似的

   其中v-layout就是对应栅格中的一行,而v-flex对应的就是一列;

【v-layout应用】

 <v-layout row wrap>
....................
 </v-layout>

 

【v-fiex】

     <v-flex xs12 sm10>      
        <v-tree url="/item/category/list"
                :isEdit="isEdit"
                @handleAdd="handleAdd"
                @handleEdit="handleEdit"
                @handleDelete="handleDelete"
                @handleClick="handleClick"
        />
      </v-flex>

【综合应用例子】

  <v-layout class="px-4 pb-3" >
        <v-flex xs2>
          <v-btn  class="info">新增品牌</v-btn>
        </v-flex>
        <v-spacer />
        <v-flex xs6>
          <v-text-field   label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
        </v-flex>
      </v-layout>

意思代码中的px-4表示x轴边距为4,pb-3表示底部边距为3;以及 <v-spacer />表示自动填充,这个很常用。

Logo

前往低代码交流专区

更多推荐