стильный полимерный элемент в угловом2

Question

Я хочу включить Полимерные элементы в мое приложение angular2 с Angular2 Материал по-прежнему не обеспечивает достаточного количества элементов. Кроме того, я хочу стилизовать элемент, т. Е. Установить его ширину. У меня есть

<paper-dropdown-menu class="dropdown" label="Wiederholung" vertical-align="bottom" horizontal-align="right"> 
    <paper-listbox class="dropdown-content"> 
     <paper-item>einmalig</paper-item> 
     <paper-item>wöchentlich</paper-item> 
     <paper-item>monatlich</paper-item> 
    </paper-listbox> 
</paper-dropdown-menu> 

EDIT

в моей index.html у меня есть

<!-- polymer components --> 
<script src="/node_modules/bower_components/webcomponentsjs/webcomponents.js"></script> 
<script> 
    window.Polymer = window.Polymer || {}; 
    window.Polymer.dom = 'shadow'; 
</script> 

<link rel="import" href="/node_modules/bower_components/polymer/polymer.html"> 

<!-- custom style for polymer components --> 
<style is="custom-style"> 
    :root { 
     --paper-dropdown-menu : { 
      width: 280px; 
     } 
    } 
</style> 

<link rel="import" href="/node_modules/bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 
<link rel="import" href="/node_modules/bower_components/paper-listbox/paper-listbox.html"> 
<link rel="import" href="/node_modules/bower_components/paper-item/paper-item.html"> 
<link rel="import" href="/node_modules/bower_components/paper-input/paper-input.html"> 

Интересно, что я могу изменить с к т.е. 100px, и она будет применяться. Но он не будет превышать ~ 250 пикселей;

Answer 1

Имея это в моем index.html решить мою проблему:

<script src="https://polygit.org/polymer+:master/components/webcomponentsjs/webcomponents-lite.min.js"></script> 
<script> 
/* this script must run before Polymer is imported */ 
window.Polymer = { 
    dom: 'shadow', 
    lazyRegister: true 
}; 
</script> 
<link href="https://polygit.org/polymer+:master/components/polymer/polymer.html" rel="import"> 
<link href="https://polygit.org/polymer+:master/components/paper-button/paper-button.html" rel="import"> 
<link href="https://polygit.org/polymer+:master/components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import"> 
<link href="https://polygit.org/polymer+:master/components/paper-item/paper-item.html" rel="import"> 
<link href="https://polygit.org/polymer+:master/components/paper-listbox/paper-listbox.html" rel="import"> 
<link href="https://polygit.org/polymer+:master/components/paper-menu/paper-menu.html" rel="import"> 

<style is="custom-style"> 
    :root { 
     --paper-dropdown-menu : { 
     width: 280px; 
     } 
    } 
</style> 

Answer 2

Вы можете использовать такой элемент стиля в index.html

<style is="custom-style"> 
    :root { 
    --paper-dropdown-menu: { 
     /* add styles here */ 
    } 
    } 
</style> 

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

<style> 
    :root { 
    --paper-dropdown-menu: { 
     /* add styles here */ 
    } 
    } 
</style> 

<paper-dropdown-menu class="dropdown" label="Wiederholung" vertical-align="bottom" horizontal-align="right"> 
    <paper-listbox class="dropdown-content"> 
     <paper-item>einmalig</paper-item> 
     <paper-item>wöchentlich</paper-item> 
     <paper-item>monatlich</paper-item> 
    </paper-listbox> 
</paper-dropdown-menu> 

, а затем использовать его как это в вас угловой составляющей

<some-name></some-name> 

несколько сообщений, которые объясняют некоторые темы о том, как использовать полимер с Angular2

• https://dart.academy/dart-angular-2-and-polymer-together/
• https://dart.academy/polymer-controls-in-an-angular-2-form-with-dart/-https://dart.academy/two-way-binding-for-polymer-elements-in-angular-2-for-dart/

эти учебники предназначены для Polymer.dart с Angular2 для Dart, но это не должно быть слишком трудно применить информацию к Polymer.js с Angular2 с TS.