聚合物的纸张样式不起作用

Question

我尝试使用 Polymer 的 material 设计元素创建自己的组件。但是，我不知道如何使用 paper-styles.

这是我的组件代码(bb-book.html)

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">

<dom-module id="bb-book">
  <style>
  .book {
    float: left;
    width: 160px;
    height: 240px;
    margin: 12px;
    @apply(--shadow-elevation-2dp);
  }
  </style>
  <template>
    <paper-header-panel class="book">
      <paper-toolbar><div>Hello World!</div></paper-toolbar>
      <p>Hello World</p>
    </paper-header-panel>
  </template>

  <script>
    Polymer({
      is: 'bb-book',
      properties: {
        book_id: Number
      }
    });
  </script>
</dom-module>

这是使用我的组件的 index.html(bb-book)

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Load webcomponents-lite.min.js for polyfill support. -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
    </script>

    <!-- 2. Use an HTML Import to bring in some elements. -->
    <link rel="import" href="bb-book.html">
  </head>
  <body>
    <!-- 3. Declare the element. Configure using its attributes. -->
    <bb-book></bb-book>
    <bb-book></bb-book>
    <bb-book></bb-book>
    <bb-book></bb-book>
  </body>
</html>

它显示了我的组件。但是，该字体不是我预期的 material 设计字体。请参见下图。我错过了什么吗？

http://s24.postimg.org/q94s9bl7p/Screen_Shot_2015_07_01_at_00_07_31.png

Answer 1

您没有告诉文档使用 Roboto（material 设计）字体。在 index.html 的 <head> 添加以下内容：

<style>
    body {
        font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
</style>

聚合物的纸张样式不起作用

Polymer's paper-styles doesn't work

polymer

material-design