Полимерные бумажные стили не работают

Я попытался создать свой собственный компонент с использованием элементов дизайна материала Polymer. Но я не могу понять, как использовать paper-styles.Полимерные бумажные стили не работают

Вот мой код компонента (бб-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>

Это показывает мой компонент. Но шрифт - это не материальный дизайн, который я ожидал. См. Изображение ниже. Я что-то упускаю?

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

источник

2015-07-01 Barbayar Dashzeveg

Вы не говорите документ использовать Roboto (материал дизайн) шрифт. В <head> из ваших index.html добавить следующее:

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

источник

2015-07-01 08:50:20

спасибо Бен. Это сработало. Мое понимание было, эта часть включена в 'paper-styles.html'. –

Полимерные бумажные стили не работают

ответ

Смежные вопросы