CODEWITHSUNDEEP
polymer
Lokin.S
Lokin.S

Reputation: 53

I would like to put paper icon button on the right of toolbar, what should i do?

I have already use the horizontal-align:"right", but it doesn't work...

<paper-toolbar>
  <paper-icon-button src="AC.png" paper-drawer-toggle></paper-icon-button>
  <paper-menu-button id="sortbt" >
    <paper-icon-button icon="hardware:keyboard-arrow-down" class="dropdown-trigger"></paper-icon-button>
    <paper-menu class="dropdown-content">
      <paper-item>Not pay yet</paper-item>
      <paper-item>paid</paper-item>
      <paper-item>by boss num</paper-item>
    </paper-menu>
  </paper-menu-button>
  <paper-icon-button icon="icons:home" id="homebt" horizontal-align="right"></paper-icon-button>
</paper-toolbar>

what should i do in polymer 1.x

Upvotes: 1

Views: 2277

Answers (2)

rofrol
rofrol

Reputation: 15226

No need for span element. style="margin-left: auto" is sufficient.

<!doctype html>
<head>
  <meta name="description" content="Polymer Example">
  <meta charset="utf-8">
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="paper-menu-button/paper-menu-button.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
  <paper-toolbar>
    <paper-icon-button icon="icons:menu" paper-drawer-toggle></paper-icon-button>
    <paper-menu-button id="sortbt" >
      <paper-icon-button icon="hardware:keyboard-arrow-down" class="dropdown-trigger"></paper-icon-button>
      <paper-menu class="dropdown-content">
        <paper-item>Not pay yet</paper-item>
        <paper-item>paid</paper-item>
        <paper-item>by boss num</paper-item>
      </paper-menu>
    </paper-menu-button>
    <paper-icon-button icon="icons:home" id="homebt" style="margin-left: auto"></paper-icon-button>
  </paper-toolbar>
</body>

Here is another example of complete layout with flexbox. Look at the sticky footer.

Upvotes: 0

Scott Miles
Scott Miles

Reputation: 11027

The easiest way IMO is to put a flexed span to take up the middle space.

<!doctype html>
<head>
  <meta name="description" content="Polymer Example">
  <meta charset="utf-8">
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="paper-menu-button/paper-menu-button.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
  <paper-toolbar>
    <paper-icon-button icon="icons:menu" paper-drawer-toggle></paper-icon-button>
    <paper-menu-button id="sortbt" >
      <paper-icon-button icon="hardware:keyboard-arrow-down" class="dropdown-trigger"></paper-icon-button>
      <paper-menu class="dropdown-content">
        <paper-item>Not pay yet</paper-item>
        <paper-item>paid</paper-item>
        <paper-item>by boss num</paper-item>
      </paper-menu>
    </paper-menu-button>
    <span style="flex: 1;"></span>
    <paper-icon-button icon="icons:home" id="homebt"></paper-icon-button>
  </paper-toolbar>
</body>

Upvotes: 7

Related Questions