Question

我想在我的angular2应用程序中包含Polymer Elements，因为Angular2 Material仍然没有提供足够的元素。另外，我想要设置元素的样式，即设置它的宽度。我有

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

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

Answer 1

您可以在index.html

中使用此类样式元素

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

或者您可以将Polymer元素包装在自定义Polymer元素中，包括包装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>

然后在Angular组件

中使用它

<some-name></some-name>

一些帖子解释了有关如何将Polymer与Angular2一起使用的一些主题

这些教程适用于带有Angular2 for Dart的Polymer.dart，但使用Angular2和TS将信息应用于Polymer.js应该不会太难。

Answer 2

在我的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>

在angular2中定型聚合物元素

2 个答案: