search

PolymerElements / paper-button

A button à la Material Design
https://www.webcomponents.org/element/PolymerElements/paper-button
138 stars 64 forks source link

Make it possible to have paper-button use full-width #116

Closed AndreasGalster closed 8 years ago

AndreasGalster commented 8 years ago

A very common outcome for a paper-button is to use the entire width available, especially on a mobile viewport. Currently there's no quick way to do this. It's fairly straightforward to do so by simply giving the button width: 100%. Could this be exposed as a property like <paper-button full-width>? Not sure if you'd suggest using properties for layout changes.

notwaldorf commented 8 years ago

Does this not work for you? http://jsbin.com/puzoge/edit?html,output

If the parent div has a size, paper-button { width: 100%; } should work...

AndreasGalster commented 8 years ago

Yes it does work. I'm just wondering if this is a property that makes sense to generally expose. I believe almost every project that has a mobile viewport needs full-width paper-buttons depending on the ui component.

Yes, that can be easily added via a stylesheet or shared-styles though it only adds clutter by adding more custom-styling. Which isn't that bad with one element but really adds up the more general custom-styling you need to add for elements that could have these very basic styling options built in.

This can apply generally to many elements. Paper-button could use full-width. Or checkboxes are always horizontal though I'd argue in most cases people would align them vertical. That's already two added styles I need to maintain that I use over and over in different projects. There's a long list of these UI refinements for the paper components in general imo. Of course we can do these ourselfs but it really becomes troublesome doing it over and over again when e. g. a simple <paper-radio-group align-veritcal> could do the trick.

keanulee commented 8 years ago

I think sizing the element from the outside (paper-button { width: 100% }) makes more sense than having all possible styles embedded inside the element itself (which would make the element stylesheet too heavy).