Search code examples
templatespolymerpolymer-1.0paper-elementsjsbin

Polymer 1.0: Vertically stacked <paper-button> group with no white space (iron-flex-layout)

Question

How do I create a <paper-button> group UI element with the following characteristics?

  1. It is a group of <paper-button> elements.
  2. It is stacked vertically.
  3. Each button fills the entire width of the container (without margin, padding or horizontal white space).
  4. There is no margin, padding or vertical white space between the buttons.

Examples:

  1. The effect I am seeking is analogous to <body fullbleed> only scoped to the button's parent container.
  2. Similar to the Bootstrap "Vertical variation" shown here.
  3. If you have Google Drive, hover your mouse over the menu items in the left margin of the page. (Under the red button labeled "New.")
  4. Do a Google search. The dropdown menu that appears from the search field predictively suggesting possible questions you want is also another example of the look/feel I am after.

Attempts:

See below code for my previous attempts to:

  1. stack vertical buttons using <p> tags and
  2. use a <paper-menu>.

Research:

  1. Flexbox documentation
  2. Paper button documentation
  3. Paper menu documentation

Demo: JS Bin

Code:

<!doctype html>
<html>
<head>
  <title>polymer</title>
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
  <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
  <link rel="import" href="https://rawgit.com/PolymerElements/paper-button/master/paper-button.html">
</head>
<body>

<dom-module id="x-test" noscript>
  <template>

    <!-- Attempt #1: Stacking Buttons -->
    <div id="container">
      <p><paper-button>One</paper-button></p>
      <p><paper-button>Two</paper-button></p>
      <p><paper-button>Three</paper-button></p>
    </div>

    <!-- Attempt #2: <paper-menu> -->
    <paper-menu>
      <paper-item>One</paper-item>
      <paper-item>Two</paper-item>
      <paper-item>Three</paper-item>
    </paper-menu>

  </template>
</dom-module>

<x-test></x-test>

</body>
</html>
Solution

  • I'm super tired right now, will test an example tomorrow but I think theoretically all you'd have to do is:

    <link href="bower/iron-flex-layout/iron-flex-layout.html" rel="import" >

<div class="layout vertical">
    <paper-button>foo</paper-button>
    <paper-button>foo</paper-button>
</div>

paper-button {
    width: 100%;
    margin:0;
}

    Overview of new way of defining layout attributes with classes with the help of iron-flex-layout.html: http://embed.plnkr.co/1UKMQz/preview