suitcss / Components Button Group
Licence: mit
Component CSS for button-groups (DEPRECATED)
Stars: ✭ 22
Labels
SUIT ButtonGroup (DEPRECATED)
CSS for visually grouping buttons.
Read more about SUIT's design principles.
Installation
-
Component(1):
component install suitcss/components-button-group
-
npm:
npm install suitcss-components-button-group
-
Bower:
bower install suit-components-button-group
Available classes
-
ButtonGroup
- The core component. -
ButtonGroup--hz
- Horizontally arranged buttons. -
ButtonGroup-item
- AButtonGroup
sub-object used to contain buttons.
The plugin file provides the following classes:
-
ButtonGroup--borderCollapse
- Collapse the borders between buttons.
Configurable variables
-
--font-size-ButtonGroup
- The font-size to use. Defaults to1rem
.
Use
An element with the ButtonGroup
class must be used to wrap a collection of
elements with the ButtonGroup-item
class. The ButtonGroup
component must
only contain ButtonGroup-item
components as children.
The button group items must contain Button components.
<div class="ButtonGroup">
<div class="ButtonGroup-item">
<a class="Button" href="{{url}}">Dashboard</a>
</div>
<div class="ButtonGroup-item">
<a class="Button" href="{{url}}">Settings</a>
</div>
<div class="ButtonGroup-item">
<a class="Button" href="{{url}}">
Account
<span class="Icon Icon--cog"></span>
</a>
</div>
</div>
Testing
Install Node (comes with npm).
npm install
To generate a build:
npm run build
To generate the testing build.
npm run build-test
Basic visual tests are in test.html
.
Browser support
- Google Chrome (latest)
- Opera (latest)
- Firefox 4+
- Safari 5+
- Internet Explorer 9+
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].