Question

我是聚合物的新手，我正在试验它。如何将组件设置为全高？这就是我所拥有的，并且出于某种原因我无法让它发挥作用。它只有他的内容的高度：

<link rel="import" href="/bower_components/polymer/polymer.html">

<dom-module id="reactive-navbar">
    <style>
    div {
        display: block;
        width: 20%;
        height: 100%;
        background-color: #2c3e50;
    }
    </style>
    <template>
        <div>
            <content></content>
        </div>
    </template>
</dom-module>

<script>
Polymer({
    is: "reactive-navbar",
});
</script>

Answer 1

如果您希望您的Polymer元素受到样式而不是div的影响，您可以将样式标记中的div更改为：host以使您的样式影响主机https://www.polymer-project.org/1.0/docs/devguide/styling.html

更新的代码：

<link rel="import" href="/bower_components/polymer/polymer.html">

<dom-module id="reactive-navbar">
    <style>
    :host {
        display: block;
        width: 20%;
        height: 100%;
        background-color: #2c3e50;
    }
    </style>
    <template>
        <content></content>
    </template>
</dom-module>

<script>
Polymer({
    is: "reactive-navbar",
});
</script>

Answer 2

在index.html文件中，为html标记设置样式：

//assuming ES6 modules, export dependency as module
import dependency from 'path';
class Foo{
    constructor(config){
        this.prop1 = config.prop;
        this.prop2 = dependency.get();
    }
}

如何将聚合物组分的高度设置为100％

2 个答案: