Angular Material 2.0.0-beta.1组件无法正确呈现

时间:2016-12-24 18:48:34

标签: angular angular-material2

我只是检查角度材料2,并且我的应用程序中没有任何组件正常工作。角度材质2的版本为2.0.0-beta.1

我只是关注了角度素材2 github存储库中提供的getting started guide

这是我的html模板,

<md-card>
  <button md-button>FLAT</button>
  <button md-raised-button md-tooltip="This is a tooltip!">RAISED</button>
  <button md-raised-button color="primary">PRIMARY RAISED</button>
  <button md-raised-button color="accent">ACCENT RAISED</button>
</md-card>

<md-card>
  <md-checkbox>Unchecked</md-checkbox>
  <md-checkbox [checked]="true">Checked</md-checkbox>
  <md-checkbox [indeterminate]="true">Indeterminate</md-checkbox>
  <md-checkbox [disabled]="true">Disabled</md-checkbox>
</md-card>

<md-card>
  <md-radio-button name="symbol">Alpha</md-radio-button>
  <md-radio-button name="symbol">Beta</md-radio-button>
  <md-radio-button name="symbol" disabled>Gamma</md-radio-button>
</md-card>

在浏览器中以这样的方式呈现。

output screen shot

我在这里一无所知。我需要帮助才能找出问题所在。

1 个答案:

答案 0 :(得分:4)

您应始终将主题应用于素材:

您可以从@angular/material/core/theming/prebuilt

直接将主题文件包含到您的应用程序中

您只需在样式中添加导入css/scss

例如:

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

您还可以定义自定义主题。有关更多信息,请阅读主题自述文件:

custom material theming