Question

我的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>

我在这里缺少什么东西吗？
在<style>部分的文档https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes中，/*layout properties for the host element */（主机元素是什么？）和/* layout properties for a local DOM element */是什么意思？在这个上下文中的本地DOM？本地DOM === shadow DOM？）？

Answer 1

CSS mixins仅在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-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>

完整的工作源位于：http://jsbin.com/qanesapupo/1/edit?html,output

如何实现Polymer 1.0布局

1 个答案: