Polymer 1.0：垂直堆叠 <paper-button> 组，没有白色 space（iron-flex-layout）

Question

问题

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

它是一组<paper-button>个元素。
垂直堆叠。
每个按钮填满容器的整个宽度（没有边距、填充或水平白色 space）。
按钮之间没有边距、填充或垂直白色 space。

示例：

我寻求的效果类似于 <body fullbleed> 仅作用于按钮的父容器。
类似于 Bootstrap "Vertical variation" shown here.
如果您有 Google Drive，请将鼠标悬停在页面左边距的菜单项上。（在标有 "New." 的红色按钮下）
进行 Google 搜索。搜索字段中出现的下拉菜单预测性地建议您可能想要的问题也是我所追求的 look/feel 的另一个例子。

尝试次数：

请参阅下面的代码了解我之前的尝试：

使用 <p> 标签和
使用 <paper-menu>.

研究：

演示： JS Bin

代码：

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

Answer 1

当我写这个答案时，我把垂直和水平混淆了:)) 所以下面是水平堆叠。但是想想除了一些变化外，它几乎是一样的。

所以创建了一个

 .vertical-section {
          min-width: 130px;
        }

并制作按钮 inline 或 flex;

例如

paper-button {
      display: inline-block;  //or inline-flex
      margin-bottom: 24px;
    }

要摆脱 padding/margin 等，请参见下文，因为它们应该相同

我尝试了 Css 的纸质按钮演示，因此上述更改会起作用

水平堆叠

在此处查看演示 paper-buttons 并右键单击以查看框架源代码如下所示

<style is="custom-style">
    .horizontal-section {
      min-width: 130px;
    }

     paper-button {
      display: block;
      margin-bottom: 24px;
    }
</style>



    <div>
      <h4>Raised</h4>
      <div class="horizontal-section">
        <paper-button tabindex="0" raised>button</paper-button>
        <paper-button tabindex="0" raised class="colorful">colorful</paper-button>
        <paper-button tabindex="0" raised disabled>disabled</paper-button>
        <paper-button tabindex="0" raised noink>noink</paper-button>
        <paper-button tabindex="0" raised class="colorful custom"><iron-icon icon="check"></iron-icon>ok</paper-button>
        <paper-button tabindex="0" raised class="custom"><iron-icon icon="clear"></iron-icon>cancel</paper-button>
      </div>
    </div>
</div>

这给了你这样的东西

现在，由于您不想要任何 margin/padding 等并填充整个宽度，您需要稍微修改 css 并检查按钮元素。

从.horizontal-section中取出padding:24px; 例如padding:0;

并从纸扣中取出 paper-button:not margin-bottom:24px; 和 margin:0 0.25em; css

你最终得到这个

由于您正在使用模板，我相信样式可能需要在此之前完成。

抱歉，我不能给你演示，我设法为 0.5 的人做了一个演示，但还没有为 V.1 做演示，但上面的方法很容易理解。

Answer 2

我现在超级累，明天会测试一个例子，但我认为理论上你所要做的就是：

<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;
}

在 iron-flex-layout.html 的帮助下使用类定义布局属性的新方法概述： http://embed.plnkr.co/1UKMQz/preview

Answer 3

演示： JS Bin

代码：

<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>

  <base href="http://element-party.xyz">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="all-elements.html">

</head>

<body>
  <x-element></x-element>


  <dom-module id="x-element">
    <style>
      paper-material {
        xheight: 400px;
        width: 400px;
        background-color: #ff1101;
        margin: 0 auto;
      }

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

      paper-button:hover {
        background-color: black;
        color: white;
      }
    </style>
    <template>
      <paper-material id="material" elevation="3">

        <div class="layout vertical">
          <paper-button>One</paper-button>
          <paper-button>Two</paper-button>
          <paper-button>Three</paper-button>
        </div>

      </paper-material>
    </template>
    <script>
      Polymer({
        is: 'x-element',
        behaviors: [
          Polymer.NeonAnimationRunnerBehavior,
        ],

        properties: {
          animationConfig: {
            value: function() {
              return {
                'entry': {
                  name: 'slide-down-animation',
                  node: this.$.material
                },
                'exit': {
                  name: 'slide-up-animation',
                  node: this.$.material
                }
              }
            }
          }
        },
        ready: function() {
          this.playAnimation('entry');
        }
      });
    </script>
  </dom-module>


</body>

</html>

Polymer 1.0：垂直堆叠 <paper-button> 组，没有白色 space（iron-flex-layout）

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

templates

jsbin

polymer

paper-elements

polymer-1.0

问题