1
我目前正在尝试使用聚合物。聚合物布局属性在整个视口上拉伸自定义元素
我所拥有的是一个定制聚合物元素嵌套在主页上的core-animated-pages
元素中。
的来源是:
的index.html
<core-header-panel>
<core-toolbar>
[...]
</core-toolbar>
<core-animated-pages transitions="slide-from-right">
[...]
<section>
<contact-page></contact-page>
</section>
</core-animated-pages>
</core-header-panel>
接触page.html中
<polymer-element name="contact-page">
<template>
[...]
<div layout horizontal start-justified>
<div class="placeholder">
</div>
<div class="contact-box" layout horizontal center-justified flex three>
<div class="form-container" layout vertical>
<h2>Contact</h2>
<paper-input class="additional-dist" floatingLabel label="Name"></paper-input>
<paper-input id="mail" floatingLabel label="Mail"></paper-input>
<div layout horizontal>
<paper-input id="msg" multiline maxRows="4" rows="4" floatingLabel label="Message" flex></paper-input>
</div>
<paper-button label="Submit" on-tap="{{submit}}" self-end></paper-button>
</div>
</div>
</div>
[...]
</template>
[...]
</polymer-element>
HTML文件目前看起来like this in Chrome 37.
现在我想要的是黄色条(placeholder
)在整个视口上垂直延伸,like this。
不幸的是,我不知道我必须使用哪种聚合物来达到这个目标,以及我必须使用哪些标签。有人可以帮我吗?
IMO,而不是混合%和布局,你最好使用整个堆栈的布局属性。 Iow,'
嘿谢谢你的答案。只要自定义元素是'
'的直接子元素,这对我来说很好。但是当我把自定义元素放入一个'明白了。将'fit'布局属性添加到'core-header-panel'的内容(这在我的情况下是一个'core-animated-pages')和我的自定义元素对我来说是个诀窍。 – mackcmillion 2014-09-10 11:36:44