466d36e541
- Replaces manual use of .bd-callout with {% callout [type] %}
- Rearranged some callouts for proximity to others
- Turned long lists of callouts--like those on tooltips, plugings, etc--into a list because holy shit that's overwhelming
3.8 KiB
| layout | title |
|---|---|
| page | Buttons |
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
{% callout danger %}
Cross-browser compatibility
Firefox persists form control states (disabledness and checkedness) across page loads. A workaround for this is to use autocomplete="off". See Mozilla bug #654072.
{% endcallout %}
Stateful
Add data-loading-text="Loading..." to use a loading state on a button.
{% callout info %}
Use whichever state you like!
For the sake of this demonstration, we are using data-loading-text and $().button('loading'), but that's not the only state you can use. See more on this below in the $().button(string) documentation.
{% endcallout %}
{% example html %} Loading state
{% endexample %}
Single toggle
Add data-toggle="button" to activate toggling on a single button.
{% example html %} Single toggle {% endexample %}
{% callout warning %}
Pre-toggled buttons need .active and aria-pressed="true"
For pre-toggled buttons, you must add the .active class and the aria-pressed="true" attribute to the button yourself.
{% endcallout %}
Checkbox and radio
Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.
{% callout warning %}
Preselected options need .active
For preselected options, you must add the .active class to the input's label yourself.
{% endcallout %}
{% callout warning %}
Visual checked state only updated on click
If the checked state of a checkbox button is updated without firing a click event on the button (e.g. via <input type="reset"> or via setting the checked property of the input), you will need to toggle the .active class on the input's label yourself.
{% endcallout %}
{% example html %}
{% example html %}
Methods
$().button('toggle')
Toggles push state. Gives the button the appearance that it has been activated.
$().button('reset')
Resets button state—swaps text to original text.
$().button(string)
Swaps text to any data defined text state.
{% highlight html %} ...
{% endhighlight %}