聚合物1.x：如何在内部对齐按钮和按钮文本<paper-toolbar>？

在这个JSBin中我需要:

将工具栏中的两个按钮对齐到视窗的右边缘(右对齐)和
将文本垂直对齐到按钮的中间

请提供一个工作的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>

要使paper-button内的文本居中，您可以尝试-

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

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

这是应用了外边距的JSbin

代码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>

相关内容

最新更新

热门标签：