Question

将工具栏中的两个按钮与视口的右边缘（右对齐）和
将文本垂直对齐到按钮的中间

请提供一个有效的JSBin示例。

代码

http://jsbin.com/nimoyomali/1/edit?html,output

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <base href="http://polygit.org/polymer:+v1.1.0/components/">
  <title>JS Bin</title>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-header-panel/paper-header-panel.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
  <link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
  <link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
</head>

<body class="fullbleed vertical layout">
  <paper-drawer-panel class="flex">
    <paper-header-panel drawer>
      <paper-toolbar>
        <div>Logo</div>
      </paper-toolbar>
      <div>Drawer content...</div>
    </paper-header-panel>
    <paper-header-panel main class="flex seamed">
      <paper-toolbar class="seamed">
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <div>App Name</div>
                <span class="flex"></span>
                <paper-button style="background:white;
                                    color:black;
                                    height:100%;
                                    border-radius:0px;
                                    margin:0;
                                    border-left:solid 1px black;"
                >Button 1</paper-button>
                <paper-button style="background:white;
                                    color: black;
                                    height: 100%;
                                    border-radius: 0px;
                                    margin: 0;
                                    border-left: 1px solid black;
                                    vertical-align: middle;"
                >Button 2</paper-button>
          </paper-toolbar>
      <div>Main content...</div>
    </paper-header-panel>
  </paper-drawer-panel>
</body>

</html>

Answer 1

要将文字置于paper-button中心，您可以尝试 -

paper-button {
  --paper-button: {
    @apply(--layout-vertical);
    @apply(--layout-center-center);
  };
}

paper-toolbar默认左右填充16px。摆脱它的最简单方法是在右侧按钮上应用-16px右边距。

有关正常工作的演示，请参阅此jsbin。

Answer 2

And here is the JSbin with the margin applied

代码

http://jsbin.com/vikazaqedu/3/edit?html,output

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <base href="http://polygit.org/polymer:+v1.1.0/components/">
  <title>JS Bin</title>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-header-panel/paper-header-panel.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
  <link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
  <link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
  <link rel="import" href="paper-button/paper-button.html">

  <style is="custom-style">
    paper-button {
      --paper-button: {
        @apply(--layout-vertical);
        @apply(--layout-center-center);
      };

      background:white;
      color:black;
      height:100%;
      border-radius:0;      
      border-left:solid 1px black;
      margin:0;
    }

    paper-button.last {
      margin: 0 -16px 0 0;
    }
  </style>
</head>

<body class="fullbleed vertical layout">
  <paper-drawer-panel class="flex">
    <paper-header-panel drawer>
      <paper-toolbar>
        <div>Logo</div>
      </paper-toolbar>
      <div>Drawer content...</div>
    </paper-header-panel>
    <paper-header-panel main class="flex seamed">
      <paper-toolbar class="seamed">
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <div>App Name</div>
        <span class="flex"></span>

        <paper-button>Button 1</paper-button>     
        <paper-button class="last">Button 2</paper-button>

      </paper-toolbar>
      <div>Main content...</div>
    </paper-header-panel>
  </paper-drawer-panel>
</body>

</html>

Polymer 1.x：如何对齐<paper-toolbar>中的按钮和按钮文本？

代码

2 个答案:

代码