如何實現聚合物1.0佈局

我index.html是這樣如何實現聚合物1.0佈局

<!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？）？

來源

2015-06-07 ptamzz

這是不是一個真正的答案，但我發現這個「說明」指南各種佈局類真的很有用：http://plnkr.co/edit/xIARqr?p=preview –

的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

來源

2015-08-10 05:58:58 ootwch

如何實現聚合物1.0佈局

回答

相關問題