聚合物1.0：垂直堆叠<纸按钮>没有白色空间群（铁 - 柔性布局）

问题

如何创建具有以下特性的组<paper-button> UI元素？聚合物1.0：垂直堆叠<纸按钮>没有白色空间群（铁 - 柔性布局）

它是一组<paper-button>元件。
它垂直叠放。
每个按钮都会填充容器的整个宽度（无边距，填充或水平空白区域）。
按钮之间没有边距，填充或垂直空白区域。

例子：

我寻求的效果类似于<body fullbleed>只作用域按钮的父容器。
类似于自举“垂直变化”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>

来源

2015-07-20 Mowzer

你可以创建你的代码演示给我们看？ –

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

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

概述定义布局的新途径属性与类的帮助铁柔性的layout.html的： http://embed.plnkr.co/1UKMQz/preview

来源

2015-07-21 18:27:02

完美！谢谢！你从''width：100％''离开';'。但它效果很好。谢谢。 [解决方案演示在这里]（http://jsbin.com/qewedoqito/1/edit?html,output）。 – Mowzer

谢谢，编辑。别客气：）。 –

我得到了我的垂直和水平混合起来，当我写这个答案:)），所以下面是横向放置。但考虑到它几乎相同，除了几个变化。

因此创造了一个

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

，使按钮inline或flex;

如

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

为了摆脱填充/保证金等见下文，因为它应该是相同的

我用CSS发挥各地的纸按钮演示所以上述变化将工作

enter image description here

对于水平叠加

望着演示这里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>

这就给了你这样的事情

enter image description here

现在，当你不想要的任何边距/填充等，并填写您需要修改css一点点，并检查按钮元素的整个宽度。

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

enter image description here

，并采取了paper-button:notmargin-bottom:24px;和纸按钮CSS

enter image description here

和你结束了这个margin:0 0.25em;

enter image description here

由于您使用的模板我beileve样式可能需要去之前。

对不起，我不能做一个演示，我设法为0.5的人做一个演示，但还不是V.1，但它很容易理解上面的方法。

来源

2015-07-21 12:19:55 Tasos

谢谢你这个可爱的答案@Tasos。我已经投了票。我会尽快测试它，看看它是否有效，希望我能接受它。我审视了你最近的其他帖子。工作很好。所以... upvotes！ =] – Mowzer

演示：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-25 18:33:44 Mowzer

聚合物1.0：垂直堆叠<纸按钮>没有白色空间群（铁 - 柔性布局）

回答

相关问题