2016-10-06 2 views
0

Я старался следовать учебнику Polymer here, но часть значков не работает для меня.Полимерный гибкий пролет не работает

Соответствующий код

<body class="fullbleed vertical layout"> 
    <paper-header-panel class="flex"> 
    <paper-toolbar> 
     <div>Header</div> 
     <span class="flex"></span> 
     <paper-icon-button icon="search"></paper-icon-button> 
    </paper-toolbar> 
    <div>Content</div> 
    </paper-header-panel> 
</body> 

Гибкий интервал в середине предполагается нажать на значок поиска весь путь направо, но это не работает для меня. Значок появляется сразу после того, как текст, как этот

enter image description here

Я использую Chrome 52 на Ubuntu. Самый близкий вопрос, который я мог найти в моей проблеме, - this, но они сообщают, что для них работает span (на Firefox 35).

Обратите внимание, что это мой импорт. У меня есть куча дополнительных импортов для других бумажных компонентов, но это не имеет значения.

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/paper-card/paper-card.html"> 
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html"> 
<link rel="import" href="../../bower_components/paper-item/paper-item.html"> 
<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.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-icon-button/paper-icon-button.html"> 
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> 
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html"> 

ответ

1

Имейте в виду, что полимер в последнее время изменилось, как вы имеете дело с классами (а не использовать @apply в вашем CSS.)

Вы не показываете свой полный шаблон, но тег стиль должен иметь включают бит железа, который вы хотите. Вместо того, чтобы повторять все это здесь, это в начале этого документа.

https://elements.polymer-project.org/guides/flex-layout

Но вы должны импортировать классы, а не макет

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> и использовать соответствующий включают в таблице стилей <style include="iron-flex iron-flex-alignment">

+0

Спасибо, импортирующие железа-Flex-макет-классы и добавление стиля включает внутри моего шаблона исправленное все. – Antimony

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