我的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？)？
最佳答案
CSS mixin 只能在 dom-module 内工作，类(class)也在外面进行 - 我不知道为什么，我也必须尝试一下......
这会起作用:
<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-module实例的属性。
换句话说，您可以保留 <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>
关于polymer - 如何实现Polymer 1.0布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30691781/