Lesson-02-Vuetify
During this section, we start to learn vuetify components.
v-btn
see more: https://vuetifyjs.com/en/components/button-groups/ buttons: https://vuetifyjs.com/en/components/buttons/
add icon for buttons
1<v-btn depressed class="pink white--text"> 2 <v-icon>mdi-email</v-icon> 3</v-btn>see more on this: https://vuetifyjs.com/en/components/icons/#semantic-svg-icons
- To choice more icons see: https://materialdesignicons.com/
just search on it, to use it in vuetify, simply add mdi- in the icon’s name, such as mdi-account
breakpoints
To make sure our website can be run in different devices.
see here: https://vuetifyjs.com/en/features/breakpoints/#breakpoint-service
If we want show some layout only in speciffic screen size, we can use Visibility attributes.
see here: https://vuetifyjs.com/en/styles/display/#visibility
the format to control responsive:
hidden-{breakpoint}-{condition}
breakpoint: xs, sm, md, lg, xl
condition: only, and-down, and up
1<v-btn class="hidden-sm-and-down">click me</v-btn>
See the origin file, (click this link to download a copy of this file)
1<template>
2 <div class="home">
3 <h1>Home</h1>
4 <v-btn class="pink white--text">button</v-btn>
5 <v-btn depressed color="pink">click me</v-btn>
6 <v-btn flat color="pink">click me</v-btn>
7
8 <v-btn depressed class="pink white--text">
9 <v-icon left>mdi-email</v-icon>
10 <span>email me</span>
11 </v-btn>
12
13 <v-btn depressed small class="pink white--text">
14 <v-icon left small>mdi-email</v-icon>
15 <span>email me</span>
16 </v-btn>
17
18 <v-btn depressed large class="pink white--text">
19 <v-icon left large>mdi-email</v-icon>
20 <span>email me</span>
21 </v-btn>
22
23 <v-btn depressed small fab dark color="purple">
24 <v-icon small>mdi-heart</v-icon>
25 </v-btn>
26
27 <!-- ***************** Visibility ***************** -->
28 <div style="height: 50px">Visibility</div>
29 <v-btn class="hidden-sm-and-down" color="my_color">click me down</v-btn>
30
31 <v-btn class="hidden-sm-and-up">click me up</v-btn>
32 <v-btn class="hidden-sm-only">click me only</v-btn>
33 </div>
34</template>
35
36<script>
37// @ is an alias to /src
38
39export default {};
40</script>
Theme
We can change the default theme in plugins vuetify.js
See the origin file, (click this link to download a copy of this file)
1import Vue from "vue";
2import Vuetify from "vuetify/lib/framework";
3
4Vue.use(Vuetify, {
5 iconfont: "md",
6});
7
8export default new Vuetify({
9 theme: {
10 themes: {
11 light: {
12 primary: "#9652ff", // #E53935
13 success: "#3cd1c2", // #FFCDD2
14 info: "#ffaa2c", // #3F51B5
15 error: "#f83e70",
16 my_color: "#B39DDB",
17 },
18 },
19 },
20});
Padding & Margin
Search spacing in the vuetify
See: https://vuetifyjs.com/en/styles/spacing/
the format {property}{direction}-{size}
Grid system
See more: https://vuetifyjs.com/en/components/grids/
Issue with xs not working in vuetify
Notice: xs is replaced by cols, it is no longer supported by vuetify.
If we want to center an item, we can use <v-col class=”mt-5 text-center”>
1<template>
2 <div class="dashboard">
3 <h1 class="subheading grey--text">Dashboard</h1>
4
5 <v-container class="my-5">
6 <v-row>
7 <v-col cols="12" md="6" sm="12">
8 <v-btn outlined block color="primary">1</v-btn>
9 </v-col>
10 <v-col md="2" sm="4">
11 <v-btn outlined block color="primary">2</v-btn>
12 </v-col>
13 <v-col md="2" sm="4">
14 <v-btn outlined block color="primary">2</v-btn>
15 </v-col>
16 <v-col md="2" sm="4">
17 <v-btn outlined block color="primary">2</v-btn>
18 </v-col>
19 </v-row>
20
21 <v-row justify="space-around">
22 <v-col md="3" sm="4">
23 <v-btn outlined block color="info">1</v-btn>
24 </v-col>
25 <v-col md="3" sm="4">
26 <v-btn outlined block color="red">2</v-btn>
27 </v-col>
28 </v-row>
29 </v-container>
30 </div>
31</template>
32
33<script>
34// @ is an alias to /src
35export default {};
36</script>
Chip
see: https://vuetifyjs.com/en/components/chips/
To address chips background color, we need add !important in the css. Also, if we want to make a tag move to right, we can use class=”text-right”
1<div class="text-right">
2 <v-chip small :class="`${project.status} my-2`">
3 {{ project.status }}
4 </v-chip>
5</div>
6
7<style scoped lang="scss">
8
9 .v-chip.completed {
10 background-color: #3cd1c2 !important;
11 }
12 .v-chip.ongoing {
13 background: orange !important;
14 }
15 .v-chip.overdue {
16 background: tomato !important;
17 }
18</style>
Tooltips
The v-tooltip component is useful for conveying information when a user hovers over an element. You can also programmatically control the display of tooltips through a v-model. When activated, tooltips display a text label identifying an element, such as a description of its function.
Avatars
The v-avatar component is typically used to display circular user profile pictures. This component will allow you to dynamically size and add a border radius of responsive images, icons, and text. A tile variation is available for displaying an avatar without border radius.
Is a circle.
Expansion panel
See the origin file, (click this link to download a copy of this file)
1<template>
2 <div class="projects">
3 <h1 class="subheading grey--text">Projects</h1>
4
5 <v-container class="my-5">
6 <v-expansion-panels>
7 <v-expansion-panel v-for="project in myProjects" :key="project.title">
8 <v-expansion-panel-header>
9 {{ project.title }}
10 </v-expansion-panel-header>
11 <v-expansion-panel-content>
12 <v-card>
13 <v-card-text class="px-4 grey--text">
14 <div class="font-weight-bold">{{ project.due }}</div>
15 {{ project.content }}
16 </v-card-text>
17 </v-card>
18 </v-expansion-panel-content>
19 </v-expansion-panel>
20 </v-expansion-panels>
21 </v-container>
22 </div>
23</template>
24
25<script>
26// @ is an alias to /src
27
28export default {
29 data() {
30 return {
31 projects: [
32 {
33 title: "Design a new website",
34 person: "The Net Ninja",
35 due: "1st Jan 2022",
36 status: "ongoing",
37 content:
38 "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam natus neque ut delectus facere. Repudiandae aliquid ratione asperiores aut ad facilis dolorum, sapiente, doloremque nisi qui eveniet numquam, illum excepturi.",
39 },
40 {
41 title: "Code up the homepage",
42 person: "Skycoco",
43 due: "10th Jan 2022",
44 status: "completed",
45 content:
46 "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fuga ex odio minus libero praesentium vero quas. Accusamus recusandae voluptates doloremque! Eum non, nam commodi possimus facilis exercitationem distinctio sapiente?",
47 },
48 {
49 title: "Design video thumbnails",
50 person: "Jant",
51 due: "2nd Feb 2022",
52 status: "completed",
53 content:
54 "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic totam qui labore doloribus, error necessitatibus veritatis aut exercitationem fugit deserunt. Quidem, voluptatem nemo. Nulla excepturi doloremque omnis minus in optio.",
55 },
56 {
57 title: "Create a community forum",
58 person: "Bob",
59 due: "20th Jan 2022",
60 status: "overdue",
61 content:
62 "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta officiis nulla ratione tempora, eius blanditiis repellat voluptates est aspernatur impedit quo minima enim ullam adipisci vel ducimus. Eaque, officiis obcaecati.",
63 },
64 ],
65 };
66 },
67 computed: {
68 myProjects() {
69 return this.projects.filter((project) => {
70 return project.person === "The Net Ninja";
71 });
72 },
73 },
74};
75</script>
Form
We can use prepend-icon attribute to add icons in front of each field.
1<v-form class="px-3">
2 <v-text-field
3 label="Title"
4 v-model="title"
5 prepend-icon="mdi-folder"
6 ></v-text-field>
7 <v-textarea
8 label="Info"
9 v-model="content"
10 prepend-icon="mdi-pencil"
11 ></v-textarea>
12 <v-btn color="success" class="mr-4" @click="submit">
13 Add project
14 </v-btn>
15</v-form>
date-picker
To convert date format we need to install a new package.
1npm install date-fns
The date-fns format documentation: https://date-fns.org/v2.28.0/docs/format
We must to convert the string date to new Date(), the use format:
1format(new Date(2016, 0, 1), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx")
See the origin file, (click this link to download a copy of this file)
1<template>
2 <v-dialog max-width="600px">
3 <template v-slot:activator="{ on, attrs }">
4 <v-btn color="info" v-bind="attrs" v-on="on"> Add new project </v-btn>
5 </template>
6 <v-card>
7 <v-card-title>
8 <h2>Add a New Project</h2>
9 </v-card-title>
10 <v-card-text>
11 <v-form class="px-3" ref="form">
12 <v-text-field
13 label="Title"
14 v-model="title"
15 prepend-icon="mdi-folder"
16 :rules="inputRules"
17 ></v-text-field>
18 <v-textarea
19 label="Info"
20 v-model="content"
21 prepend-icon="mdi-pencil"
22 :rules="inputRules"
23 ></v-textarea>
24
25 <v-menu max-width="290" offset-x>
26 <template v-slot:activator="{ on, attrs }">
27 <v-text-field
28 :value="formattedDate"
29 v-bind="attrs"
30 v-on="on"
31 label="Due date"
32 prepend-icon="mdi-calendar-month-outline"
33 :rules="inputRules"
34 ></v-text-field>
35 </template>
36 <v-date-picker v-model="due"></v-date-picker>
37 </v-menu>
38 <v-spacer></v-spacer>
39 <v-btn color="success" class="mr-4" @click="submit">
40 Add project
41 </v-btn>
42 </v-form>
43 </v-card-text>
44 </v-card>
45 </v-dialog>
46</template>
47
48<script>
49import format from "date-fns/format";
50export default {
51 data() {
52 return {
53 title: "",
54 content: "",
55 due: null,
56 inputRules: [(v) => v.length >= 3 || "Minimum length is 3 characters"],
57 };
58 },
59 methods: {
60 submit() {
61 if (this.$refs.form.validate()) {
62 console.log(this.title, this.content);
63 }
64 },
65 },
66 computed: {
67 formattedDate() {
68 return this.due ? format(new Date(this.due), "do MMM yyyy") : "";
69 },
70 },
71};
72</script>
Snackbar
see here: https://vuetifyjs.com/en/components/snackbars/#usage