如何实现聚合物1.0布局
如何实现聚合物1.0布局
提问于 2015-06-07 09:03:56
我的index.html是这样的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Keyboard</title>
<!-- 1. Load webcomponent support before any code that touches the DOM -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/each-key.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style>
#keyboard-layout {
@apply(--layout-horizontal);
}
</style>
</head>
<body>
<div id="keyboard-layout">
<each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
<each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
<each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
</div>
</body>
</html>我预计each-key将被并排排列(比如float:left)；但是它不是( each-key的行为仍然像display:block)。我有我的each-key.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-ripple/paper-ripple.html">
<dom-module id="each-key">
<style>
.key{
min-height: 50px;
max-height: 80px;
border: 1px solid rgba(0,0,0,.6);
position: relative;
}
paper-ripple {
color: #4285f4;
}
.key>div { position: absolute; }
.top-left { left: 4px; top: 4px; }
.top-right { right: 4px; top: 0; }
.bottom-left { left: 4px; bottom: 4px; }
.bottom-right { right: 4px; bottom: 0; }
</style>
<template>
<div class="key" >
<div class="top-left"></div>
<div class="top-right">{{shiftdown}}</div>
<div class="bottom-left">{{english}}</div>
<div class="bottom-right">{{shiftup}}</div>
<paper-ripple fit></paper-ripple>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'each-key',
properties: {
'english' : String,
'shiftup': String,
'shiftdown': String
}
});
</script>- 这里有什么东西我遗漏了吗？
- 在文档https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes中，在
<style>部分中，/*layout properties for the host element */意味着什么(主机元素是什么？)和/* layout properties for a local DOM element */(在这个上下文中什么是本地DOM？本地DOM ===阴影DOM?)？
回答 1
Stack Overflow用户
发布于 2015-08-10 05:58:58
CSS混音只在dom-module内部工作，类也在外部工作--我不知道为什么，我也必须尝试一下.
这样做是可行的：
<body class="layout horizontal">但是，更多的聚合方式可能是将完整的东西封装在dom-模块中：
<dom-module id="all-keys">
<style>
#keyboard-layout {
@apply(--layout);
@apply(--layout-horizontal);
}
</style>
<template>
<div id="keyboard-layout" >
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
</div>
</template>
<script>
Polymer({is: 'all-keys'});
</script>
</dom-module>如果您还将一个min-width添加到您的each-key中，那么这是可以的：
<dom-module id="each-key">
<style>
:host {
min-width: 50px;
}或者另一种选择：
<dom-module id="each-key">
<style>
:host {
@apply(--layout-flex);
}这也回答了您的第二个问题：:host是确定dom-模块实例的属性。
换句话说，您可以不使用<div id="keyboard-layout" >：
<dom-module id="all-keys">
<style>
:host {
@apply(--layout);
@apply(--layout-horizontal);
}
</style>
<template>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
</template>
<script>
Polymer({is: 'all-keys'});
</script>
</dom-module>完整的工作源位于：http://jsbin.com/qanesapupo/1/edit?html,output
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30691781
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号