1. Color色彩
1.1. Element为了避免视觉传达差异, 使用一套特定的调色板来规定颜色, 为你所搭建的产品提供一致的外观视觉感受。
2. 主色
2.1. Element主要品牌颜色是鲜艳、友好的蓝色。
3. 辅助色
3.1. 除了主色外的场景色, 需要在不同的场景中使用(例如危险色表示危险的操作)。
4. 中性色
4.1. 中性色用于文本、背景和边框颜色。通过运用不同的中性色, 来表现层次结构。
5. Color色彩例子
5.1. 使用脚手架新建一个名为element-ui-color的前端项目, 同时安装Element插件。
5.2. 编写App.vue
<template>
<div id="app">
<h1>主色</h1>
<span class="elementColor brand">Brand Color<br />#409EFF</span>
<h1>辅助色</h1>
<span class="elementColor success">Success<br />#67C23A</span>
<span class="elementColor warning">Warning<br />#E6A23C</span>
<span class="elementColor danger">Danger<br />#F56C6C</span>
<span class="elementColor info">Info<br />#909399</span>
<h1>中性色</h1>
<span class="elementColor importText">主要文字<br />#303133</span>
<span class="elementColor oneBorder">一级边框<br />#DCDFE6</span>
<span class="elementColor baseBlack">基础黑色<br />#000000</span><br />
<span class="elementColor normalText">常规文字<br />#606266</span>
<span class="elementColor twoBorder">二级边框<br />#E4E7ED</span>
<span class="elementColor baseWhite">基础白色<br />#FFFFFF</span><br />
<span class="elementColor secondaryText">次要文字<br />#909399</span>
<span class="elementColor thirdBorder">三级边框<br />#EBEEF5</span>
<span class="elementColor transparent">透明<br />Transparent</span><br />
<span class="elementColor seatText">占位文字<br />#C0C4CC</span>
<span class="elementColor fourBorder">四级边框<br />#F2F6FC</span>
</div>
</template>
<style>
.elementColor {
display: inline-block;
width: 200px;
height: 60px;
color: #fff;
padding: 20px;
}
.brand {
background-color: #409EFF;
}
.success {
background-color: #67C23A;
}
.warning {
background-color: #E6A23C;
margin-left: 10px;
}
.danger {
background-color: #F56C6C;
margin-left: 10px;
}
.info {
background-color: #909399;
margin-left: 10px;
}
.importText {
background-color: #303133;
}
.oneBorder {
background-color: #DCDFE6;
color: black;
margin-left: 10px;
}
.baseBlack {
background-color: #000000;
margin-left: 10px;
}
.normalText {
background-color: #606266;
}
.twoBorder {
background-color: #E4E7ED;
color: black;
margin: 10px;
}
.baseWhite {
background-color: #FFFFFF;
border: 1px solid black;
color: black;
}
.secondaryText {
background-color: #909399;
}
.thirdBorder {
background-color: #EBEEF5;
color: black;
margin: 10px;
}
.transparent {
background-color: Transparent;
border: 1px solid black;
color: black;
}
.seatText {
background-color: #C0C4CC;
}
.fourBorder {
background-color: #F2F6FC;
color: black;
margin-left: 10px;
}
</style>
5.3. 运行项目