Polymer 1.0：造型 <paper-toolbar>

Question

请提供一个 工作 JSBin 使这个 <paper-toolbar> "look pretty" 如下：

将 <paper-input> 和 <paper-dropdown-menu> 元素垂直居中 到 <paper-toolbar>.
垂直对齐 <paper-input> 和 <paper-dropdown-menu> 水平输入字段线。
水平 space <paper-input> 和 <paper-dropdown-menu> 元素之间至少 20px.

http://jsbin.com/hiwoqapawu/edit?html,输出

<html>

<head>
  <title>My Element</title>

  <script data-require="polymer@*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
  <script data-require="polymer@*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
  <base href="http://element-party.xyz/" />
  <link rel="import" href="all-elements.html" />
</head>

<body>
  <dom-module id="my-element">
    <style>
      paper-toolbar {
        background: var(--paper-blue-100);
      }
    </style>
    <template>
      <paper-toolbar>
        <paper-input id="search" label="Search">
          <iron-icon icon="search" prefix></iron-icon>
          <paper-icon-button suffix icon="clear"></paper-icon-button>
        </paper-input>
        <paper-dropdown-menu label="Sort by">
          <paper-menu class="dropdown-content">
            <paper-item>Foo</paper-item>
            <paper-item>Bar</paper-item>
            <paper-item>Qux</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
      </paper-toolbar>
    </template>
    <script>
      Polymer({
        is: "my-element"
      });
    </script>
  </dom-module>

  <my-element></my-element>
</body>

</html>

Answer 1

Link to JSBin

http://jsbin.com/bumisimali/edit?html,输出

<html>

<head>
  <title>My Element</title>

  <script data-require="polymer@*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
  <script data-require="polymer@*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
  <base href="http://element-party.xyz/" />
  <link rel="import" href="all-elements.html" />
</head>

<body>
  <dom-module id="my-element">
    <style>
      paper-toolbar {
        background: var(--paper-blue-100);
        @apply(--layout-around-justified);
      }
      paper-dropdown-menu, paper-input {
        @apply(--layout-self-end);
      }
    </style>
    <template>
      <paper-toolbar>
        <div class="flex"></div>
        <paper-input id="search" label="Search">
          <iron-icon icon="search" prefix></iron-icon>
          <paper-icon-button suffix icon="clear"></paper-icon-button>
        </paper-input>
        <div class="flex"></div>
        <paper-dropdown-menu label="Sort by">
          <paper-menu class="dropdown-content">
            <paper-item>Foo</paper-item>
            <paper-item>Bar</paper-item>
            <paper-item>Qux</paper-item>
          </paper-menu>
        </paper-dropdown-menu>
        <div class="flex"></div>
      </paper-toolbar>
    </template>
    <script>
      Polymer({
        is: "my-element"
      });
    </script>
  </dom-module>

  <my-element></my-element>
</body>

</html>

Polymer 1.0：造型 <paper-toolbar>

Polymer 1.0: Styling <paper-toolbar>

polymer

polymer-1.0

paper-elements