颜色



用法

本套框架提供的所有颜色完全遵循Material的设计原则,且每种颜色均由一个基本色及暗化和亮化的扩展组成。

背景色

使用已经定义好的颜色类名,即可应用,想要明或暗则添加上相应的类名即可。

This is a card panel with a teal lighten-2 class

  <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
            

文本颜色

在定义好的颜色类名加上-text后缀即可,例如:

This is a card panel with dark blue text

  <div class="card-panel">
    <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
  </div>
            

Sass

借助Sass可以非常简单的对颜色进行扩展,对于背景色,可以这样做


  .ilike-blue-container {
    @extend .blue, .lighten-4;
  }
        

对于文本色,这样做


  .ilike-blue-container {
    @extend .blue-text, .text-lighten-4;
  }
        

调色板