1 +
<template>
2 +
<page-container centered :title="$t('pages.configuration.title')">
3 +
<div class="page-container-section">
4 +
<h2 class="md-headline">Global configuration</h2>
5 + 6 +
<p>Vue Material is providing some global options for customization. These options are reactive, you can change it anytime, anywhere:</p>
7 +
<code-example :title="$t('pages.configuration.viaVueGlobalObject')">
8 +
import Vue from 'vue'
9 + 10 +
// change single option
11 +
Vue.material.locale.dateFormat = 'DD/MM/YYYY'
12 + 13 +
// change multiple options
14 +
Vue.material = {
15 +
...Vue.material,
16 +
locale: {
17 +
...Vue.material.locale,
18 +
dateFormat: 'DD/MM/YYYY',
19 +
firstDayOfAWeek: 1
20 +
}
21 +
}
22 +
</code-example>
23 +
<p>or you can change it via <code>this.$material</code> in a vue component:</p>
24 +
<code-example :title="$t('pages.configuration.inVueComponents')">
25 +
export default {
26 +
name: 'ChangeDateFormat',
27 +
computed: {
28 +
dateFormat: {
29 +
get () {
30 +
return this.$material.locale.dateFormat
31 +
},
32 +
set (val) {
33 +
this.$material.locale.dateFormat = val
34 +
}
35 +
}
36 +
}
37 +
}
38 +
</code-example>
39 + 40 +
<p>Here are options Vue Material provide for customization:</p>
41 + 42 +
<code-example :title="$t('pages.configuration.options')">
43 +
{
44 +
// activeness of ripple effect
45 +
ripple: true,
46 + 47 +
theming: {},
48 +
locale: {
49 +
// range for datepicker
50 +
startYear: 1900,
51 +
endYear: 2099,
52 + 53 +
// date format for date picker
54 +
dateFormat: 'YYYY-MM-DD',
55 + 56 +
// i18n strings
57 +
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
58 +
shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
59 +
shorterDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
60 +
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
61 +
shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
62 +
shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D'],
63 + 64 +
// `0` stand for Sunday, `1` stand for Monday
65 +
firstDayOfAWeek: 0
66 +
}
67 +
}
68 +
</code-example>
69 +
</div>
70 + 71 +
</page-container>
72 +
</template>
73 + 74 +
<script>
75 +
export default {
76 +
name: 'Configuration'
77 +
}
78 +
</script>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4