angular2中的造型聚合物元素

我想将聚合物元素包含到我的angular2应用中，因为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>

编辑

在我的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的改变，它会被应用。但它不会高于〜250px;

来源

2016-05-12 Stubbi

有了这个在我的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>

来源

2016-05-14 15:47:13 Stubbi

可以在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

一些议题几个职位

这些教程是针对Polymer Dart和Angular2的Dart，但它不应该太很难将带有TS的Angular2应用于Polymer.js。

来源

2016-05-12 17:21:50

我想喜欢第solutuon，但我想只要添加<风格=“定制式”> ：根{ - 纸张下拉菜单：{ 宽度：380px; } } 进入我的index.html，但这不起作用。还有什么我必须关心的吗？ – Stubbi

它可以在Angular（纯聚合物）之外使用吗？ –

明天再试！ – Stubbi

angular2中的造型聚合物元素

回答

相关问题