一. 斷點 breakpoint

同bootstrap類似, 我們設計斷點, 會讓我們在不同長寬不同分辨率的設備上有更好的體驗, 是一種快速可行的自適應方法.

斷點常常作為參數出現在其他屬性中

    <v-row>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
      <v-col class="col-lg-3 col-md-4 col-sm-6 col-12">
        <v-btn block color="success">text</v-btn>
      </v-col>
    </v-row>

二. 可見性(顯示輔助)

https://vuetifyjs.com/zh-Hans/styles/display/

1. display控制隱藏

我們可以使用d-breakpoint-value的屬性控制控件的顯示與否

• breakpoint : sm, md, lg 和 xl (xs是默認的不用寫)
• value : none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex

    <v-btn class="d-none">不可見按鈕</v-btn>
    <v-btn>可見按鈕1</v-btn>
    <v-btn
      class="d-none d-sm-inline-block d-md-none d-lg-inline-block d-xl-none"
      color="success">可見按鈕2</v-btn>
    <v-btn
      class="d-inline-block d-sm-none d-md-inline-block d-lg-none d-xl--inline-block"
      color="error">可見按鈕3</v-btn>

2. hidden控制隱藏

我們還可以使用hidden-breakpoint-condition來控制隱藏

    <v-btn class="hidden-md-only">僅在md下隱藏按鈕</v-btn>
    <v-btn class="hidden-md-and-down">在md及以下隱藏按鈕</v-btn>
    <v-btn class="hidden-md-and-up">在md及以上隱藏按鈕</v-btn>

注意: only and-down and-up是hidden才有的關鍵字

3. display和hidden還支持特定的關鍵字

    <v-btn class="hidden-screen-only">僅在屏幕下隱藏</v-btn>
    <v-btn class="hidden-print-only">僅在打印機下隱藏</v-btn>

三. 如何修改主題顏色

1. 自定義深色/淺色主題

• 我們的控件默認是采用light樣式的
• 雖然我們可以在每個控件中寫light或dark來規(guī)定控件的主題樣式, 但如果我們做一個dark樣式的app, 總不能每個都改吧.

其實我們可以定義默認主題, 方法如下:

在src\plugins\vuetify.js中, 添加或修改theme屬性

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
  theme: { dark: true },
});

2. 自定義主題顏色

默認情況下，Vuetify 具有適用于所有組件的標準主題。一般也是夠用了褐澎。但如果我們想自定義主題举庶，可以：在src\plugins\vuetify.js中, 添加或修改theme屬性

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#1976D2',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
      },
      dark: {
        primary: '#1976D2',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
      },
    },
  },
});

四. 內外邊距

margin 或 padding 范圍是從 0 到 16. 每個尺寸增量都與Material Design邊距規(guī)范一致. 這些類可以通過 {property}{direction}-{size} 格式使用琳水。

{property}{direction}-{size}

• property取值: m - 應用 margin , p - 應用 padding
• direction取值:

• size的取值: 以4px增量控制間距屬性:

間距設為auto會居中

實例:

  <v-card max-width="600" class="mx-auto mt-10 pa-4 text-center" color="orange">
    <v-btn class="mx-4" color="info">text1</v-btn>
    <v-btn class="mx-4" color="info">text2</v-btn>
    <v-btn class="mx-4" color="info">text3</v-btn>
    <v-btn class="mx-4" color="info">text4</v-btn>
  </v-card>