在色彩方面,Element提供了一套特定的调色板来指定颜色,带来了不一样的外观视觉感受。Element的色彩分为主色、辅助色和中性色。主色主要是指鲜艳、友好的蓝色(#409EFF)。辅助色是指用在其他场景的颜色,主要有表示成功的绿色(#67C23A)、表示警告的橙色(#E6A23C)、表示危险的红色(#F56C6C)、表示信息的灰色(#909399)。中性色是指文字颜色、背景颜色、边框颜色等。其中在文字颜色方面,主要分为主要文字(#303133)、常规文字(#606266)、次要文字(#909399)和占位文字(#C0C4CC);在边框颜色方面,主要分为一级边框(#DCDFE6)、二级边框(#E4E7ED)、三级边框(#EBEEF5)、四级边框(#F2F6FC);在背景颜色方面,主要分为基础黑色(#000000)、基础白色(#FFFFFF)、透明(Transparent)。在接下来介绍的大部分Element标签中,只要涉及背景颜色,都可以通过给标签中的type属性赋予primary、success、info、warning、danger值来实现不同的背景颜色。
本节将Element的色彩与容器布局结合起来,制作一个简单的页面。Element的色彩效果如图2-10所示。
图2-10 Element的色彩效果
图2-10所示页面的实现代码如下: