2019-02-28 08:00:59 +00:00
< script >
import bus from '../../bus';
import { tintColor } from '../../color.js';
2019-04-24 11:52:52 +00:00
import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
2019-02-28 08:00:59 +00:00
const varMap = {
'primary': '$--color-primary',
'success': '$--color-success',
'warning': '$--color-warning',
'danger': '$--color-danger',
'info': '$--color-info',
'white': '$--color-white',
'black': '$--color-black',
'textPrimary': '$--color-text-primary',
'textRegular': '$--color-text-regular',
'textSecondary': '$--color-text-secondary',
'textPlaceholder': '$--color-text-placeholder',
'borderBase': '$--border-color-base',
'borderLight': '$--border-color-light',
'borderLighter': '$--border-color-lighter',
'borderExtraLight': '$--border-color-extra-light'
};
const original = {
primary: '#409EFF',
success: '#67C23A',
warning: '#E6A23C',
danger: '#F56C6C',
info: '#909399',
white: '#FFFFFF',
black: '#000000',
textPrimary: '#303133',
textRegular: '#606266',
textSecondary: '#909399',
textPlaceholder: '#C0C4CC',
borderBase: '#DCDFE6',
borderLight: '#E4E7ED',
borderLighter: '#EBEEF5',
borderExtraLight: '#F2F6FC'
}
export default {
created() {
2019-04-24 11:52:52 +00:00
bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
2019-02-28 08:00:59 +00:00
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
primary: '',
success: '',
warning: '',
danger: '',
info: '',
white: '',
black: '',
textPrimary: '',
textRegular: '',
textSecondary: '',
textPlaceholder: '',
borderBase: '',
borderLight: '',
borderLighter: '',
borderExtraLight: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(original).forEach((o) => {
if (value[varMap[o]]) {
this[o] = value[varMap[o]]
} else {
this[o] = original[o]
}
});
}
}
},
}
< / script >
2019-02-12 01:08:19 +00:00
## Couleur
Element utilise un ensemble de palettes spécifiques afin de fournir un style consistant pour vos produits.
### Couleur principale
La couleur principale d'Element est un bleu clair et agréable.
< el-row :gutter = "12" >
2019-02-28 08:00:59 +00:00
< el-col :span = "10" :xs = "{span: 12}" >
2019-03-09 01:59:28 +00:00
< div class = "demo-color-box" :style = "{ background: primary }" > Couleur principale
2019-03-01 10:35:08 +00:00
< div class = "value" > #409EFF< / div >
< div class = "bg-color-sub" :style = "{ background: tintColor(primary, 0.9) }" >
< div
class="bg-blue-sub-item"
v-for="(item, key) in Array(8)"
:key="key"
:style="{ background: tintColor(primary, (key + 1) / 10) }"
>< / div >
< / div >
2019-02-28 08:00:59 +00:00
< / div >
2019-02-12 01:08:19 +00:00
< / el-col >
< / el-row >
### Couleurs secondaires
2019-03-09 01:59:28 +00:00
En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.
2019-02-12 01:08:19 +00:00
< el-row :gutter = "12" >
< el-col :span = "6" :xs = "{span: 12}" >
2019-03-09 01:59:28 +00:00
< div class = "demo-color-box" :style = "{ background: success }" > Succès
2019-03-01 10:35:08 +00:00
< div class = "value" > #67C23A< / div >
< div class = "bg-color-sub" >
< div
class="bg-success-sub-item"
2019-02-28 08:00:59 +00:00
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(success, (key + 8) / 10) }"
2019-03-01 10:35:08 +00:00
>< / div >
2019-02-28 08:00:59 +00:00
< / div >
< / div >
2019-02-12 01:08:19 +00:00
< / el-col >
< el-col :span = "6" :xs = "{span: 12}" >
2019-03-09 01:59:28 +00:00
< div class = "demo-color-box" :style = "{ background: warning }" > Avertissement
2019-03-01 10:35:08 +00:00
< div class = "value" > #E6A23C< / div >
< div class = "bg-color-sub" >
< div
class="bg-success-sub-item"
2019-02-28 08:00:59 +00:00
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(warning, (key + 8) / 10) }"
2019-03-01 10:35:08 +00:00
>< / div >
2019-02-28 08:00:59 +00:00
< / div >
< / div >
2019-02-12 01:08:19 +00:00
< / el-col >
< el-col :span = "6" :xs = "{span: 12}" >
2019-03-01 10:35:08 +00:00
< div class = "demo-color-box" :style = "{ background: danger }" > Danger
< div class = "value" > #F56C6C< / div >
< div class = "bg-color-sub" >
< div
class="bg-success-sub-item"
2019-02-28 08:00:59 +00:00
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(danger, (key + 8) / 10) }"
2019-03-01 10:35:08 +00:00
>< / div >
2019-02-28 08:00:59 +00:00
< / div >
< / div >
2019-02-12 01:08:19 +00:00
< / el-col >
< el-col :span = "6" :xs = "{span: 12}" >
2019-03-01 10:35:08 +00:00
< div class = "demo-color-box" :style = "{ background: info }" > Info
< div class = "value" > #909399< / div >
< div class = "bg-color-sub" >
< div
class="bg-success-sub-item"
2019-02-28 08:00:59 +00:00
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(info, (key + 8) / 10) }"
2019-03-01 10:35:08 +00:00
>< / div >
2019-02-28 08:00:59 +00:00
< / div >
< / div >
2019-02-12 01:08:19 +00:00
< / el-col >
< / el-row >
### Couleurs neutres
Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous pouvez utiliser différentes couleurs neutres pour représenter une structure hiérarchique.
< el-row :gutter = "12" >
< el-col :span = "6" :xs = "{span: 12}" >
< div class = "demo-color-box-group" >
2019-02-28 08:00:59 +00:00
< div class = "demo-color-box demo-color-box-other"
:style="{ background: textPrimary }"
>Texte principal< div class = "value" > {{textPrimary}}< / div > < / div >
< div class = "demo-color-box demo-color-box-other"
:style="{ background: textRegular }"
>
Texte normal< div class = "value" > {{textRegular}}< / div > < / div >
< div class = "demo-color-box demo-color-box-other"
:style="{ background: textSecondary }"
>Texte secondaire< div class = "value" > {{textSecondary}}< / div > < / div >
< div class = "demo-color-box demo-color-box-other"
:style="{ background: textPlaceholder }"
>Texte de placeholder< div class = "value" > {{textPlaceholder}}< / div > < / div >
< / div >
< / el-col >
< el-col :span = "6" :xs = "{span: 12}" >
< div class = "demo-color-box-group" >
< div class = "demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderBase }"
>Bordure de base< div class = "value" > {{borderBase}}< / div > < / div >
< div class = "demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLight }"
>Bordure claire< div class = "value" > {{borderLight}}< / div > < / div >
< div class = "demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLighter }"
>Bordure très claire< div class = "value" > {{borderLighter}}< / div > < / div >
< div class = "demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderExtraLight }"
>Bordure extra claire< div class = "value" > {{borderExtraLight}}< / div > < / div >
2019-02-12 01:08:19 +00:00
< / div >
< / el-col >
< el-col :span = "6" :xs = "{span: 12}" >
< div class = "demo-color-box-group" >
2019-03-09 01:59:28 +00:00
< div
2019-02-28 08:00:59 +00:00
class="demo-color-box demo-color-box-other"
:style="{ background: black }"
2019-03-09 01:59:28 +00:00
>Noir< div class = "value" > {{black}}< / div > < / div >
2019-02-28 08:00:59 +00:00
< div
class="demo-color-box demo-color-box-other"
:style="{ background: white, color: '#303133', border: '1px solid #eee ' }"
2019-03-09 01:59:28 +00:00
>Blanc< div class = "value" > {{white}}< / div > < / div >
2019-02-28 08:00:59 +00:00
< div class = "demo-color-box demo-color-box-other bg-transparent" > Transparent< div class = "value" > Transparent< / div >
2019-03-01 10:35:08 +00:00
< / div >
2019-02-12 01:08:19 +00:00
< / div >
< / el-col >
< / el-row >
