如何在Dart 2中使用带有角度的飞镖组件的排版？

Question

我想借助材质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 {

}

Answer 1

您可以在这里使用大量的mixin：https://github.com/dart-lang/angular_components/blob/master/lib/css/material/const/_typography.scss

例如：

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

.headline {
  @include mat-font-headline;
}

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

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