This example shows how to use other styling libraries.
This plugin is not limited to YUI's `cssbutton` styling library. In this example, we use Bootstrap and Font Awesome. Incidentally, it is also affecting this document itself since there is no way to limit its usage to a particular area of the page, thus `code` and links don't follow the pattern of the rest of the documentation and the headings at the top of the page look squeezed.
While YUI uses CSS classNames with the prefix `yui3-` for most of its classes, other libraries don't hold to any particular convention and sometimes even redefine whole HTML tags. `gallery-button-plugin` comes preset for using the `cssbutton` sub-module, part of the YUI Button module. For other libraries, it can be customized.
``` {{>awesome-markup}} ```The HTML above combines CSS classNames starting with `yui3-` for functionality not related to styling with other used by the alternate styling library such as `btn`, `btn-group`, `disabled`, `btn-danger` or `btn-success`. See the examples and also this.
One obvious difference is that some of the buttons are not actually `
``` {{>awesome-code}} ```There are two ways to manipulate styling. One is to override the defaults by setting the CSS classNames directly in the `Y.ButtonToggle` object, as shown in the first two lines above. Those CSS classNames will be used for all toggles unless stated otherwise.
The other alternative is to set them for a specific set of buttons, as shown in the last few lines. Both arguments to `addToggles` are optional. The first is where to look for the toggles or groups and it defaults to the whole document. The second can be an object with alternate values for the CSS classNames used by the plugin. They are:
Bootstrap is licensed under Apache License v2.0,
documentation under CC BY 3.0.
The Font Awesome webfont and CSS files are licensed under CC BY 3.0.