2021-2-18-Vuetify

Install、Layouts、Theme、Elevation、Visiable、Spacing、Colors、Text、Buttons、List、Navigation drawer、Grid System、Cards

Install

Execute the ordervue ui,open the ui dashboard, and then click plugins, search vertify,and click install.After that ,run the project again.

Layouts

There are 2primary layout component.One is v-app,and another is v-main.v-app is the root of app,v-main is the container of main content.v-main doesn't adjust the size of the page,chaning that by adding a v-app-bar above the v-main element.

<v-app>
  <v-app-bar app dark></v-app-bar>
	<!--this is the bar at the top of the page-->
  <v-main>
    <v-container>
      Hello World
    </v-container>
  </v-main>
</v-app>

1v-app-bar

1）app

The attribute 'app' means the bar is fixed at the top of the page.

2）dark

The attribute 'dark' defines the theme of the bar.Also means the color of the text is white.

<v-app-bar app dark color="deep-purple accent-4">
    <v-app-bar-nav-icon ></v-app-bar-nav-icon><!--this is icon of the bar-->

    <v-toolbar-title>My files</v-toolbar-title><!--this is title of the bar-->

    <v-spacer></v-spacer><!--a big empty bar devide the app-bar ,it looks like make the element below float right-->

    <v-btn icon><!--looks like float right-->
        <v-icon>mdi-magnify</v-icon>
    </v-btn>
    <v-btn icon>
        <v-icon>mdi-filter</v-icon>
    </v-btn>
    <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>

</v-app-bar>

2v-container

All of the page content should be in this component.

---

Theme

Vuetify supports both light and dark theme.By default, the application use the light theme,but this can be overwritten by adding the dark option in the theme service.

// src/plugins/vuetify.js

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

Vue.use(Vuetify)

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

Mostly we use the class like 'success,warning' to change the backgroud color,and the color of 'success' or other classes can be override.

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

Vue.use(Vuetify);

export default new Vuetify({
   // theme:{dark:true}
   theme: {
      themes: {
        light: {//here override the default color
          primary: '#3f51b5',
          secondary: '#b0bec5',
          anchor: '#8c9eff',
          success:'#82c392'
        },
      },
    },
});

---

Elevation

This attribute helps control relative depth or distance between two surface along the z-axis.There is total of 25 levels from 0 to 24.

<v-card :elevation=10 height="100" width="100" class="secondary"> </v-card>

It can also be used when hover.

<v-hover>
    <template v-slot:default="{ hover }">
        <v-card :elevation="hover ? 24 : 6" class="mx-auto pa-6">
            Prop based elevation
        </v-card>
    </template>
</v-hover>

---

Visiable

1）Display inline or block

<template>
  <div>
    <div class="d-inline pa-2 deep-purple white--text">
      d-inline
    </div>
    <div class="d-inline pa-2 black white--text">
      d-inline
    </div>
  </div>
</template>

If want make display block ,add class 'd-block'

2）Display none

However, .d-md-none will apply to only md and up.

Screen size	Class
Hidden on all	.d-none
Hidden only on xs	.d-none .d-sm-flex
Hidden only on sm	.d-sm-none .d-md-flex
Hidden only on md	.d-md-none .d-lg-flex
Hidden only on lg	.d-lg-none .d-xl-flex
Hidden only on xl	.d-xl-none
Visible on all	.d-flex
Visible only on xs	.d-flex .d-sm-none
Visible only on sm	.d-none .d-sm-flex .d-md-none
Visible only on md	.d-none .d-md-flex .d-lg-none
Visible only on lg	.d-none .d-lg-flex .d-xl-none
Visible only on xl	.d-none .d-xl-flex

<v-btn class="d-none d-md-flex white--text" color='red'>
    adasd
</v-btn>

Hidden when screen size below sm

---

Spacing

The property applies the type of spacing:

• m - applies margin
• p - applies padding

The direction designates the side the property applies to:

• t - applies the spacing for margin-top and padding-top
• b - applies the spacing for margin-bottom and padding-bottom
• l - applies the spacing for margin-left and padding-left
• r - applies the spacing for margin-right and padding-right
• s - applies the spacing for margin-left/padding-left (in LTR mode) and margin-right/padding-right (in RTL mode)
• e - applies the spacing for margin-right/padding-right (in LTR mode) and margin-left/padding-left (in RTL mode)
• x - applies the spacing for both *-left and *-right
• y - applies the spacing for both *-top and *-bottom
• a - applies the spacing for the property in all directions

The size controls the increment of the property in 4px intervals:

• 0 - eliminates all margin or padding by setting it to 0
• 1 - sets margin or padding to 4px
• 2 - sets margin or padding to 8px
• 3 - sets margin or padding to 12px
• 4 - sets margin or padding to 16px
• 5 - sets margin or padding to 20px
• 6 - sets margin or padding to 24px
• 7 - sets margin or padding to 28px
• 8 - sets margin or padding to 32px
• 9 - sets margin or padding to 36px
• 10 - sets margin or padding to 40px
• 11 - sets margin or padding to 44px
• 12 - sets margin or padding to 48px
• 13 - sets margin or padding to 52px
• 14 - sets margin or padding to 56px
• 15 - sets margin or padding to 60px
• 16 - sets margin or padding to 64px
• n1 - sets margin to -4px
• n2 - sets margin to -8px
• n3 - sets margin to -12px
• n4 - sets margin to -16px
• n5 - sets margin to -20px
• n6 - sets margin to -24px
• n7 - sets margin to -28px
• n8 - sets margin to -32px
• n9 - sets margin to -36px
• n10 - sets margin to -40px
• n11 - sets margin to -44px
• n12 - sets margin to -48px
• n13 - sets margin to -52px
• n14 - sets margin to -56px
• n15 - sets margin to -60px
• n16 - sets margin to -64px
• auto - sets the spacing to auto

<v-card class="pa-md-4 mx-lg-auto" color="secondary" width="250px">
    <v-card-text>
        Adjust screen size to see spacing changes
    </v-card-text>
</v-card>

How to make the component center?

The component add class "mx-auto"

---

Colors

<template>
  <div class="purple darken-2 text-center">
    <span class="white--text">Lorem ipsum</span>
    <span class="blue--text text--lighten-5">are you ok</span>
  </div>
</template>

'purple' means the backgroud color is purple.'white--text' means the color of the text is white.'darken-2' means the deepth of the color.

---

Text

1Size

<p class='display-4'>massive-display</p>
<p class='display-1'>smaller-display</p>
<p class='headline'>headline</p>
<p class='subheadline'>subheadline</p>
<p class='caption'>caption</p>

The tag with the class of 'display-4' is larger than primary tag h1.The tags from top to buttom , the size of it decrease in turn.

2Weight

.font-weight-thin -Sets font-weight to 100

.font-weight-light -Sets font-weight to 300

.font-weight-regular -Sets font-weight to 400

.font-weight-medium -Sets font-weight to 500

.font-weight-bold -Sets font-weight to 700

.font-weight-black -Sets font-weight to 900

.font-font-italic -Sets italicized text

3Alignment

We can use the classes like 'text-left' 'text-right' 'text-center' to re-align the text.There are also alignments classes that support responsive displays like 'text-sm-left' 'text-md-right' and so on.

4Decoration

<template>
  <div>
    <a
      href="#"
      class="text-decoration-none"
    >Non-underlined link</a>

    <div class="text-decoration-line-through">
      Line-through text
    </div>

    <div class="text-decoration-overline">
      Overline text
    </div>

    <div class="text-decoration-underline">
      Underline text
    </div>
  </div>
</template>

5Opacity

<template>
  <div>
    <p class="text--primary">
      High-emphasis has an opacity of 87%.
    </p>
    <p class="text--secondary">
      Medium-emphasis text and hint text have opacities of 60%.
    </p>
    <p class="text--disabled">
      Disabled text has an opacity of 38%.
    </p>
  </div>
</template>

---

Buttons

<v-btn
  color="accent"
></v-btn>

1）Block

Make the button extend the full available width

2）Depressed

The button have no box shadow

3）Floadting

Make the rounded,and usually contain an icon

<v-btn class="mx-2" fab dark small color="primary">
    <v-icon dark>
        mdi-minus
    </v-icon>
</v-btn>

4）Icon

<v-btn icon color='red'>
    <v-icon>mdi-heart</v-icon>
</v-btn>

5）Loading

Using the loading prop to notify a user that there is processing taking place.When the processing complete,change the status of loading.

<v-btn :loading="loading5" :disabled="loading5" color="blue-grey" class="ma-2 white--text" fab
    @click="sub">
    <v-icon dark>
        mdi-cloud-upload
    </v-icon>
</v-btn>

6）Outlined

Inherit the border from the current color applied.

<v-btn color="pink" outlined>
    btn
</v-btn>

7）Plain

Plain buttons have a lower baseline opacity that reacts to hover and focus.

<v-btn color="green" plain>plain</v-btn>

8）Text

The buttons have no box shadow and no background.

<v-btn color="green" text>text</v-btn>

---

List

The v-list component is used to display information.

<template>
  <v-card
    class="mx-auto"
    max-width="300"
    tile
  >
    <v-list dense>
      <v-subheader>REPORTS</v-subheader>
      <v-list-item-group
        v-model="selectedItem"
        color="primary"
      >
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon"></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="item.text"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>
<script>
  export default {
    data: () => ({
      selectedItem: 1,
      items: [
        { text: 'Real-Time', icon: 'mdi-clock' },
        { text: 'Audience', icon: 'mdi-account' },
        { text: 'Conversions', icon: 'mdi-flag' },
      ],
    }),
  }
</script>

1）dense

Lowers max height of list tiles

2）active-class

The porps of v-list-group or v-list-item,Configure the active CSS class applied when the link is active.

3）to

define the route

4）mandatory

At least one item must be selected.

---

Navigation drawer

The navigation drawer is primarily used to house links to the pages in your application

<v-navigation-drawer v-model="drawer" absolute bottom temporary>
    <v-list nav dense>
        <v-list-item-group v-model="group" active-class="deep-purple--text text--accent-4">
            <v-list-item>
                <v-list-item-title>Foo</v-list-item-title>
            </v-list-item>

            <v-list-item>
                <v-list-item-title>Bar</v-list-item-title>
            </v-list-item>

            <v-list-item>
                <v-list-item-title>Fizz</v-list-item-title>
            </v-list-item>

            <v-list-item>
                <v-list-item-title>Buzz</v-list-item-title>
            </v-list-item>
        </v-list-item-group>
    </v-list>
</v-navigation-drawer>

1）permanent

The drawer remains visible regardless of screen size

2）bottom

Expands from the bottom of the screen on mobile devices

3）temporary

A temporary drawer sits above its application and uses a scrim (overlay) to darken the background

---

Grid System

Vuetify comes with a 12 point grid system built using flexbox. Columns will automatically take up an equal amount of space within their parent container.

1Sub-components
1）v-container
v-container provides the ability to center and horizontally pad your site’s contents. You can also use the fluid prop to fully extend the container across all viewport and device sizes. Maintains previous 1.x functionality in which props are passed through as classes on v-container allowing for the application of helper classes (such as ma-#/pa-#/fill-height) to easily be applied

2）v-col
v-col is a content holder that must be a direct child of v-row. This is the 2.x replacement for v-flex in 1.x.

3）v-row
v-row is a wrapper component for v-col. It utilizes flex properties to control the layout and flow of its inner columns. It uses a standard gutter of 24px. This can be reduced with the dense prop or removed completely with no-gutters. This is the 2.x replacement for v-layout in 1.x.

4）v-spacer
v-spacer is a basic yet versatile spacing component used to distribute remaining width in-between a parents child components. When placing a single v-spacer before or after the child components, the components will push to the right and left of its container. When more than one v-spacer's are used between multiple components, the remaining width is evenly distributed between each spacer.

<v-container>
    <v-row no-gutters>
        <v-col>
            <v-card>
                <v-card-text>are you ok</v-card-text>
            </v-card>
        </v-col>
        <v-col>
            <v-card>
                <v-card-text>are you ok</v-card-text>
            </v-card>
        </v-col>
        <v-col>
            <v-card>
                <v-card-text>are you ok</v-card-text>
            </v-card>
        </v-col>
    </v-row>
</v-container>

2Props

1）no-gutters

There is no space between v-col box.

2）offset

3）md-6 and other breakingpoin size

You can also utilize the sm, md, lg, and xl props to further define how the column will be sized in different viewport sizes.

---

Cards

The v-card component is a versatile component that can be used for anything from a panel to a static image.

1）Composition

v-card-actions
The container used for placing actions for a card, such as v-btn or v-menu. Also applies special margin to buttons so that they properly line up with other card content areas.

v-card-subtitle
Provides a default font-size and padding for card subtitles. Font-size can be overwritten with typography classes.

v-card-text
Primarily used for text content in a card. Applies padding for text, reduces its font-size to .875rem.

v-card-title
Provides a default font-size and padding for card titles. Font-size can be overwritten with typography classes.