Question

我尝试使用Polymer的材料设计元素创建自己的组件。但是，我无法弄清楚如何使用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>

以下是使用我的组件（bb-book）

的index.html

<!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>

它显示了我的组件。但是，字体不是我期望的材料设计字体。见下图。我错过了什么吗？

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

Answer 1

您没有告诉该文档使用Roboto（材料设计）字体。在<head>的{{1}}添加以下内容：

index.html

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

1 个答案: