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="/bgpolymer/polymer.html">
  <link rel="import" href="/bgpaper-header-panel/paper-header-panel.html">
  <link rel="import" href="/bgpaper-toolbar/paper-toolbar.html">
  <link rel="import" href="/bgpaper-icon-button/paper-icon-button.html">
  <link rel="import" href="/bgiron-flex-layout/classes/iron-flex-layout.html">
  <link rel="import" href="/bgpaper-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="/bgpolymer/polymer.html">
  <link rel="import" href="/bgpaper-header-panel/paper-header-panel.html">
  <link rel="import" href="/bgpaper-toolbar/paper-toolbar.html">
  <link rel="import" href="/bgpaper-icon-button/paper-icon-button.html">
  <link rel="import" href="/bgiron-flex-layout/classes/iron-flex-layout.html">
  <link rel="import" href="/bgpaper-drawer-panel/paper-drawer-panel.html">
  <link rel="import" href="/bgpaper-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