4.1 KiB
| layout | title |
|---|---|
| page | Buttons |
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Uses
Stateful
Add data-loading-text="Loading..." to use a loading state on a button.
{% example html %} Loading state
{% endexample %}
Single toggle
Add data-toggle="button" to activate toggling on a single button.
{% example html %} Single toggle {% endexample %}
Checkbox
Add data-toggle="buttons" to a group of checkboxes for checkbox style toggling on btn-group.
Pre-checked options need .active
For pre-checked options, you must add the .active class to the input's label yourself.
{% example html %}
Radio
Add data-toggle="buttons" to a group of radio inputs for radio style toggling on btn-group.
Preselected options need .active
For preselected options, you must add the .active class to the input's label yourself.
{% highlight html %}
Usage
Enable buttons via JavaScript:
{% highlight js %} $('.btn').button() {% endhighlight %}
Markup
Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
Options
None.
Methods
$().button('toggle')
Toggles push state. Gives the button the appearance that it has been activated.
Auto toggling
You can enable auto toggling of a button by using the data-toggle attribute.
{% highlight html %} ... {% endhighlight %}
$().button('loading')
Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.
{% highlight html %} ...
{% endhighlight %}
Cross-browser compatibility
Firefox persists form control states across page loads. A workaround for this is to use autocomplete="off".
$().button('reset')
Resets button state - swaps text to original text.
$().button(string)
Resets button state - swaps text to any data defined text state.
{% highlight html %} ...
{% endhighlight %}