如何在 Dart 2 中使用材质角镖组件的排版？

Posted 2023-03-13

【中文标题】如何在 Dart 2 中使用材质角镖组件的排版？

【英文标题】：How to use typography of material angular dart components with Dart 2?

【发布时间】：2019-02-01 14:56:13

【问题描述】：

我想借助材质 angular_dart 组件在组件中使用材质排版。我怎样才能做到这一点？ app_component.html

<section class="layout">
    <h1 class="headline">The headline goes here!</h1>
    <h2 class="sub-headline">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</h2>
    <div class="body-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</section>

app_component.scss

@import 'package:angular_components/css/material/material';

:host 



.headline 



.sub-headline 


.body-text 

【参考方案1】：

你可以使用一堆 mixin here:

你的例子：

@import 'package:angular_components/css/material/material';

.headline 
  @include mat-font-headline;


.sub-headline 
  @include mat-font-subhead;


.body-text 
  @include mat-font-body;

【讨论】：

我需要导入哪些 mixin 才能使代码正常工作。

导入与您在上述问题中的导入相同。它收集公共变量和mixin。具体的 mixin 显示在带有 include 的代码中。

添加了它的外观截图。它对我有用。你有加载 Roboto 字体吗？你需要一个这样的链接标签：