在angular2中样式化聚合物元素 [英] styling polymer element in angular2

问题描述

我想将Polymer Elements包含到我的angular2应用程序中，因为Angular2 Material仍然不能提供足够的元素.另外，我想设置元素的样式，即设置元素的宽度.我有

I want to include Polymer Elements into my angular2 App since Angular2 Material still doesn't provide enough elements. Additionally, I want to style the element, i.e. setting the width of it. I have

<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中，我有

in my index.html I have

<!-- 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">

有趣的是，我可以将with更改为100px，它将被应用.但这不会超过〜250px;

Interestingly, I can change the with to i.e. 100px and it will be applied. But it won't get higher than ~250px;

推荐答案

在我的index.html中解决了这个问题:

Having this in my index.html solved my problem:

<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>

这篇关于在angular2中样式化聚合物元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！