Styling Polymer Element in eckigen2
Ich möchte Polymer-Elemente in meine angle2-App aufnehmen, da Angular2-Material immer noch nicht genügend Elemente enthält. Außerdem möchte ich das Element stylen, d. H. Die Breite festlegen. Ich hab
<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>
BEARBEITE
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">
Interessanterweise kann ich das mit auf d. H. 100px ändern und es wird angewendet. Aber es wird nicht höher als ~ 250px werden;