228 lines
7.3 KiB
Markdown
228 lines
7.3 KiB
Markdown
|
<script>
|
||
|
|
import bus from '../../bus';
|
||
|
|
import { tintColor } from '../../color.js';
|
||
|
|
import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
|
||
|
|
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() {
|
||
|
|
bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
|
||
|
|
},
|
||
|
|
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>
|
||
|
|
|
||
|
|
## 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">
|
||
|
|
<el-col :span="10" :xs="{span: 12}">
|
||
|
|
<div class="demo-color-box" :style="{ background: primary }">Couleur principale
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
### Couleurs secondaires
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
<el-row :gutter="12">
|
||
|
|
<el-col :span="6" :xs="{span: 12}">
|
||
|
|
<div class="demo-color-box" :style="{ background: success }">Succès
|
||
|
|
<div class="value">#67C23A</div>
|
||
|
|
<div class="bg-color-sub">
|
||
|
|
<div
|
||
|
|
class="bg-success-sub-item"
|
||
|
|
v-for="(item, key) in Array(2)"
|
||
|
|
:key="key"
|
||
|
|
:style="{ background: tintColor(success, (key + 8) / 10) }"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6" :xs="{span: 12}">
|
||
|
|
<div class="demo-color-box" :style="{ background: warning }">Avertissement
|
||
|
|
<div class="value">#E6A23C</div>
|
||
|
|
<div class="bg-color-sub">
|
||
|
|
<div
|
||
|
|
class="bg-success-sub-item"
|
||
|
|
v-for="(item, key) in Array(2)"
|
||
|
|
:key="key"
|
||
|
|
:style="{ background: tintColor(warning, (key + 8) / 10) }"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6" :xs="{span: 12}">
|
||
|
|
<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"
|
||
|
|
v-for="(item, key) in Array(2)"
|
||
|
|
:key="key"
|
||
|
|
:style="{ background: tintColor(danger, (key + 8) / 10) }"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6" :xs="{span: 12}">
|
||
|
|
<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"
|
||
|
|
v-for="(item, key) in Array(2)"
|
||
|
|
:key="key"
|
||
|
|
:style="{ background: tintColor(info, (key + 8) / 10) }"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</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">
|
||
|
|
<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>
|
||
|
|
</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"
|
||
|
|
:style="{ background: black }"
|
||
|
|
>Noir<div class="value">{{black}}</div></div>
|
||
|
|
<div
|
||
|
|
class="demo-color-box demo-color-box-other"
|
||
|
|
:style="{ background: white, color: '#303133', border: '1px solid #eee' }"
|
||
|
|
>Blanc<div class="value">{{white}}</div></div>
|
||
|
|
<div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|