Fatal编程技术网
  • polymer/
  • Polymer 1.x：如何对齐按钮和内部按钮文本<；纸张工具栏>；？

Polymer 1.x：如何对齐按钮和内部按钮文本<；纸张工具栏>；？

polymer

Polymer 1.x：如何对齐按钮和内部按钮文本<；纸张工具栏>；？,polymer,polymer-1.0,custom-element,Polymer,Polymer 1.0,Custom Element,我需要： 将工具栏中的两个按钮与视口的右边缘对齐（右对齐）并对齐 将文本垂直对齐到按钮的中间 请提供一个工作JSBin示例，说明如何做到这一点。 代码 http://jsbin.com/nimoyomali/1/edit?html，输出 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="http://polygit.org/polymer:+v1.1

我需要：

  • 将工具栏中的两个按钮与视口的右边缘对齐（右对齐）并对齐
  • 将文本垂直对齐到按钮的中间
请提供一个工作JSBin示例，说明如何做到这一点。

代码 http://jsbin.com/nimoyomali/1/edit?html，输出 
<!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>

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


JS-Bin
标志
抽屉内容。。。
应用程序名称
按钮1
按钮2
主要内容。。。
要将文本置于
纸张按钮的中心位置，您可以尝试-


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



纸张工具栏
有一个默认的左右空白
16px
。最简单的方法是在右边的按钮上加一个
-16px
右边距

请参阅此演示文件以获取有效演示。

代码
http://jsbin.com/vikazaqedu/3/edit?html，输出

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



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




JS-Bin
纸扣{
--纸张按钮：{
@应用（--垂直布局）；
@应用（--布局中心）；
};
背景：白色；
颜色：黑色；
身高：100%；
边界半径：0；
左边框：实心1px黑色；
保证金：0；
}
最后一个按钮{
利润率：0-16px0；
}
标志
抽屉内容。。。
应用程序名称
按钮1
按钮2
主要内容。。。

Oops我想我在做实验时不小心改变了jsbin。只需将其反转，以便再次应用边距。。。正如您所知，
纸张工具栏
css应该被删除。@JustinXL:明白了。谢谢你的跟进。我删除了CSS并更新了链接。