search

wet-boew / wet-boew-styleguide

A style guide for the Web Experience Toolkit.
http://wet-boew.github.io/wet-boew-styleguide/index-en.html
35 stars 32 forks source link

Button grouping in Lists #391

Open shawnthompson opened 4 years ago

shawnthompson commented 4 years ago

Would it be possible to make this design pattern for buttons into a ul with li for each button.

image

There is the toolbar pattern but this groups buttons all under the same li

image

ghost commented 4 years ago

The Bootstrap CSS doesn't support it. You can to create a bootstrap override for it.

I believe you mean:

<ul class="btn-group list-inline" role="group" aria-label="Basic example">
<li><button type="button" class="btn btn-default">Left</button></li>
<li><button type="button" class="btn btn-default">Middle</button></li>
<li><button type="button" class="btn btn-default">Right</button></li>
</ul>
shawnthompson commented 4 years ago

That's exactly what I mean! I'm not sure why you have the aria-label in there or the role.

ghost commented 4 years ago

Just the testing application I used added them. As I said before bootstrap css doesn't support it. You need to open a PR in https://github.com/wet-boew/wet-boew too add the feature.