Footers.vue
5.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<template>
<div id="page-footers">
<v-container grid-list-xl fluid>
<v-layout row wrap>
<v-flex lg12>
<v-widget title="Default">
<div slot="widget-content">
<v-footer class="pa-3">
<v-spacer></v-spacer>
<div>© {{ new Date().getFullYear() }}</div>
</v-footer>
</div>
</v-widget>
</v-flex>
<v-flex lg12>
<v-widget title="With icon">
<div slot="widget-content">
<v-footer height="auto">
<v-card
flat
tile
class="indigo lighten-1 white--text text-xs-center"
>
<v-card-text>
<v-btn
v-for="icon in icons"
:key="icon"
icon
class="mx-3 white--text"
>
<v-icon size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-text>
<v-card-text class="white--text pt-0">
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum. Praesent ut risus eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor vel ut orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</v-card-text>
<v-card-text class="white--text">
©2018 — <strong>Vuetify</strong>
</v-card-text>
</v-card>
</v-footer>
</div>
</v-widget>
</v-flex>
<v-flex lg12>
<v-widget title="Complex layout">
<div slot="widget-content">
<v-footer height="auto">
<v-card flat tile>
<v-card-title class="teal white--text">
<strong class="subheading">Get connected with us on social networks!</strong>
<v-spacer></v-spacer>
<v-btn
v-for="icon in icons"
:key="icon"
icon
dark
class="mx-3"
>
<v-icon size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-title>
<v-card-text class="grey lighten-3">
<v-layout>
<v-flex
v-for="(col, i) in rows"
:key="i"
xs3
>
<span class="body-2" v-text="col.title.toUpperCase()"/>
<div
v-for="(child, i) in col.children"
:key="i"
v-text="child"
/>
</v-flex>
<v-flex xs3 layout column>
<span class="body-2">CONTACT</span>
<div>
<v-icon size="18px" class="mr-3">fa-home</v-icon>
New York, NY 10012, US
</div>
<div>
<v-icon size="18px" class="mr-3">fa-envelope</v-icon>
info@example.com
</div>
<div>
<v-icon size="18px" class="mr-3">fa-phone</v-icon>
+ 01 234 567 88
</div>
<div>
<v-icon size="18px" class="mr-3">fa-print</v-icon>
+ 01 234 567 89
</div>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions class="grey lighten-2 justify-center">
©2018 — <strong>Vuetify</strong>
</v-card-actions>
</v-card>
</v-footer>
</div>
</v-widget>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import VWidget from '@/components/VWidget';
export default {
components: {
VWidget
},
data () {
return {
icons: ['fa-facebook', 'fa-twitter', 'fa-google-plus', 'fa-linkedin', 'fa-instagram'],
rows: [
{
title: 'Company Name',
children: ['Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit']
},
{
title: 'Products',
children: ['MDBootstrap', 'MDWordPress', 'BrandFlow', 'Bootstrap Angular']
},
{
title: 'Useful Links',
children: ['Your account', 'Become an Affiliate', 'Shipping Rates', 'Helper']
}
]
};
},
computed: {
},
methods: {
}
};
</script>