返回介绍

颜色

发布于 2020-02-15 17:34:04 字数 1368 浏览 873 评论 0 收藏 0

用法

这是一个基于 material design 基础颜色的调色板。每一种颜色的定义有一个基本的颜色类和一个可选的减轻或变暗的类。

背景颜色

应用一个背景颜色只需要增加颜色的名称和颜色深浅度到元素的 class 属性中。这是一个卡片面板带一个 teal、lighten-2 类。

<div class="card-panel teal lighten-2">这是一个卡片面板带一个 teal lighten-2 类。</div>

文本颜色

设置文本颜色只要在颜色名称后面追加 -text,例如:这是一个卡片面板深蓝色文本。

<div class="card-panel">
<span class="blue-text text-darken-2">这是一个卡片面板深蓝色文本。</span>
</div>

Sass

对于背景颜色,你可以简单的应用这些颜色通过继承颜色类,如下:

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

对于文本颜色,你可以简单的应用这些颜色通过继承文本颜色类,如下:

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

调色板

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文