2

问题

如何创建<paper-button>具有以下特征的组 UI 元素？

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

例子：

  1. 我正在寻求的效果类似于<body fullbleed>仅限于按钮的父容器。
  2. 类似于此处显示的引导程序“垂直变化” 。
  3. 如果您有Google Drive，请将鼠标悬停在页面左边距的菜单项上。（在标有“新建”的红色按钮下。）
  4. 做一个谷歌搜索。搜索字段中出现的下拉菜单预测性地建议您想要的可能问题也是我所追求的外观/感觉的另一个示例。

尝试：

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

  1. <p>使用标签堆叠垂直按钮和
  2. 使用<paper-menu>.

研究：

  1. 弹性盒文档
  2. 纸质按钮文档
  3. 纸质菜单文档

演示： 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>
4

3 回答 3

1

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

于是创建了一个

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

并制作按钮inline或flex；

例如

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

要摆脱填充/边距等，请参见下文，因为它应该是相同的

我在纸按钮演示中使用了 Css，因此上述更改将起作用

在此处输入图像描述

用于水平堆叠

在此处查看演示纸按钮并右键单击以查看框架源代码如下所示

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

这给了你这样的东西

在此处输入图像描述

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

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

在此处输入图像描述

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

在此处输入图像描述

你最终得到了这个

在此处输入图像描述

当您使用模板时，我相信样式可能需要在此之前进行。

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

于 2015-07-21T12:19:55.720 回答
1

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

<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

于 2015-07-21T18:27:02.820 回答
0

演示： 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>
于 2015-10-25T18:33:44.623 回答