问题
How do I create a
<paper-button>group UI element with the following characteristics?
- 这是一组
<paper-button>元素。 - 它是垂直堆叠的。
- 每个按钮都会填充容器的整个宽度(没有边距、填充或水平空白)。
- 按钮之间没有边距、内边距或垂直空白。
示例:
- 我寻求的效果类似于
<body fullbleed>仅作用于按钮的父容器。 - 类似于Bootstrap“垂直变化”shown here .
- 如果您有Google Drive ，将鼠标悬停在页面左边距的菜单项上。 (在标有“新建”的红色按钮下。)
- 进行 Google 搜索。搜索字段中出现的下拉菜单可预测性地建议您可能想要的问题，这也是我所追求的外观/感觉的另一个示例。
尝试:
请参阅下面的代码了解我之前的尝试:
- 使用
<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>
最佳答案
我现在非常累，明天将测试一个示例，但我认为理论上您所要做的就是:
<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
关于templates - polymer 1.0 : Vertically stacked <paper-button> group with no white space (iron-flex-layout)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31527848/