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

custom-element polymer polymer-1.0
person Let Me Tink About It    schedule 04.10.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Чтобы центрировать текст внутри paper-button, вы можете попробовать -

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

paper-toolbar имеет по умолчанию левое и правое заполнение 16px. Самый простой способ избавиться от него — применить -16px правое поле к правой кнопке.

См. этот jsbin для рабочей демонстрации.

person Justin XL    schedule 04.10.2015

arrow_upward
0
arrow_downward

А вот 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>
person Let Me Tink About It    schedule 05.10.2015
comment
К сожалению, я думаю, что случайно изменил jsbin, когда экспериментировал. Просто перевернул его, чтобы снова применить поле ... Просто чтобы вы знали, что paper-toolbar css должен быть удален. - person Justin XL; 05.10.2015
comment
@JustinXL: Понятно. Спасибо за продолжение. Я удалил CSS и обновил ссылку. - person Let Me Tink About It; 05.10.2015