[英]styling polymer element in angular2
我想将 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 更改为 ie 100px,它将被应用。 但它不会高于~250px;
您可以在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>
几篇文章解释了有关如何在 Angular2 中使用 Polymer 的一些主题
这些教程适用于 Polymer.dart 和 Angular2 for Dart,但将信息应用到 Polymer.js 和 Angular2 和 TS 应该不会太难。
在我的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.