A single twig breaks, but the bundle of twigs is strong.
Overview
When we need a series of button working together, we can group them to get a better UI.
We have two different versions, based on different elements: radio inputs and lists of anchors. Use them accordingly to your needs.
Usage
Dependencies
To get the button group component working, include the dependencies in your project in the following order:
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"
@import 'design-system/src/scss/02-molecules/button-group';
import initButtonGroups from 'design-system/src/js/02-molecules/button-group/button-group';
Basic code
Radio based code
A radio based button group is composed by a
div
containing multiple
label
(at least 2) with the classes
.btn-grp__item
in which we find a
radio input
with the class
.btn-grp__radio
masked by CSS.
If we want to start with a preselected option, we give the
.btn-grp__radio
element a
checked
attribute. The JS will take care of the rest.
If we want to disable an option, we give the
.btn-grp__radio
element a
disabled
attribute. The JS will take care of the rest.
<div class="btn-grp btn-grp--md">
<label class="btn-grp__item">
Label 1
<input class="btn-grp__radio" type="radio" name="btn-group-1" value="value1" checked="checked" />
</label>
<label class="btn-grp__item">
Label 2
<input class="btn-grp__radio" type="radio" name="btn-group-1" value="value2" />
</label>
</div>
.btn-grp.btn-grp--md
label.btn-grp__item
| Label 1
input.btn-grp__radio(type='radio' name='btn-group-1' value='value1' checked)
label.btn-grp__item
| Label 2
input.btn-grp__radio(type='radio' name='btn-group-1' value='value2')
const btnmanager = initButtonGroups( '.btn-grp' );
List based code
A list based button group is composed by a
ul
containing multiple
li
(at least 2) with the classes
.btn-grp__item
in which we find a
a
tag with the class
.btn-grp__link.
If we want to start with a preselected option, we give the
.btn-grp__item
element a
.btn-grp__item--selected
class.
If we want to disable an option, we give the
.btn-grp__item
element a
.btn-grp__item--disabled
class.
<ul class="btn-grp btn-grp--md">
<li class="btn-grp__item btn-grp__item--selected">
<a class="btn-grp__link" href="#"> Label 1 <a>
</li>
<li class="btn-grp__item">
<a class="btn-grp__link" href="#"> Label 2 <a>
</li>
</ul>
ul.btn-grp.btn-grp--md
li.btn-grp__item
a.btn-grp__link(href="#")
| Label 1
li.btn-grp__item
a.btn-grp__link(href="#")
| Label 2
const btnmanager = initButtonGroups( '.btn-grp' );
Methods
We access each button group methods through the
btnmanager
that we used to initialize the component. This manager holds reference to all initialized button groups in the page. We can console log the
btnmanager
variable in order to check its contents.
To make use of a method, we need to call the method from the button group reference we are going to work with.
If we want to access the methods of the first button group, we would access it from:
btnmanager.buttonGroups[ 0 ]
Enable
To enable a previously disabled option, we have the
.enableItem( element )
method, to which we send the element to enable.
Disable
To disable an option, we have the
.disableItem( element )
method, to which we send the element to disable.
Modifiers
Add the following modifier to change the appearance of a button group.
Size
Size modifier comes in 3 variants and allows you to change the font size and the padding of the button group items making them smaller or bigger.
<!-- Small -->
<div class="btn-grp btn-grp--sm">
<!-- Rest of component -->
<!-- Medium -->
<div class="btn-grp btn-grp--md">
<!-- Rest of component -->
<!-- Large -->
<div class="btn-grp btn-grp--lg">
<!-- Rest of component -->
//- Small
.btn-grp.btn-grp--sm
//- Rest of component
//- Medium
.btn-grp.btn-grp--md
//- Rest of component
//- Large
.btn-grp.btn-grp--lg
//- Rest of component
Block
Block modifier allows the button group to fit the whole width of his direct ancestor.Each button will have the same width, independently of its contents.
Fit
Fit modifier allows the button group to fit the whole width of his direct ancestor.Each button will have a width assigned taking into account its contents.