angular2中的造型聚合物元素

Question

我想将 Polymer Elements 添加到我的 angular2 应用程序中，因为 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

一起使用的主题

这些教程适用于 Polymer.dart with Angular2 for Dart 但将信息应用于 Polymer.js with Angular2 with TS 应该不难.

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

styling polymer element in angular2

css

shadow-dom

polymer-1.0

angular