角度材料排版的不透明度

发布时间：2020-12-17 06:59:50 所属栏目：安全来源：网络整理

导读：我可以通过以下方式使用Angular Material的排版样式： .title { @include mat-typography-level-to-styles($typography-config,'caption');}.title-with-opacity { @include mat-typography-level-to-styles($typography-config,'caption'); opacity: 0.54;}

我可以通过以下方式使用Angular Material的排版样式：

.title {
  @include mat-typography-level-to-styles($typography-config,'caption');
}

.title-with-opacity {
  @include mat-typography-level-to-styles($typography-config,'caption');
  opacity: 0.54;
}

应用时,它看起来像这样：

enter image description here

但是,对比度不会自动应用于所使用的排版级别.

问：如何在没有单独指定的情况下获得Material Design Specs指定的排版级别的不透明度(对比度)？

解决方法

我所知道的,

@include mat-typography-level-to-styles($typography-config,'caption');

它将包括默认配置的级别标题的排版样式,其中包含：

“Font Family(deafult family)”,“Font size (default size)”,“Font Weight (default weight)”,“Line
height (default height)”,“Letter Spacing (null by default)” but not the opacity/contrast.

因此,您无法获得对比度,但您可以使用以下自定义配置：

$custom-typography: mat-typography-config(
      $font-family: 'Roboto,monospace',// other default overrides
      $color: mat-color($primary,lighter-contrast)
    );

//include custom config like this
@include mat-typography-level-to-styles($custom-typography);

其他方式：

.title-with-opacity {
  @include mat-typography-level-to-styles($typography-config,'caption');
  color: mat-color($primary,lighter-contrast);
}

Note: Required files must be included.

官方文档不是很好,如果上述方法都不奏效,那么您自己为opacity属性赋值的方式要好得多.让我知道它是否有效,因为这是未经测试的方法,但上述解决方案基于文档.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!