Question

在Material Design spec中，论文项目的深度从z=0 (dp)变为z=24 (dp)，但Polymer Elements仅使用5个不同的深度（以像素为单位）。

有没有办法使用Material Design规范中的官方深度值，并从聚合物元素定义中进行某种转换？

一种方法是再次为阴影做所有CSS，但我希望有一个更清洁的解决方案。

Answer 1

z属性（https://github.com/Polymer/paper-shadow/blob/master/paper-shadow.css）只选择了5种预定义样式这是z=5

的示例

html /deep/ .paper-shadow-top-z-5 {
  box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15);
}

html /deep/ .paper-shadow-bottom-z-5 {
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3);
}

为您的页面添加一个类似的样式，并使用自定义后缀而不是1-5，然后使用此后缀作为深度。（虽然没有测试过自己）

聚合物元素深度 - 材料设计

1 个答案: