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中的造型聚合物元素

回答

相關問題