Material Design风格神框架vuetify 学习笔记(二) 断点 可见性 主题颜色 内外边距

一. 断点 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来规定控件的主题样式, 但如果我们做一个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边距规范一致. 这些类可以通过 {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>