| Both sides previous revision Previous revision Next revision | Previous revision |
| wiki:plugin:bootswrapper:button [2015/08/04 15:32] – Giuseppe Di Terlizzi | wiki:plugin:bootswrapper:button [2016/02/22 17:53] (current) – [Options] Giuseppe Di Terlizzi |
|---|
| ====== Buttons ====== | ====== Buttons ====== |
| |
| {{page>:wiki:plugin:bootswrapper:menu&inline&nofooter}} | ===== Examples ===== |
| |
| ===== Basic usage ===== | | <btn type="default">Default</btn> | Standard button | |
| | | <btn type="primary">Primary</btn> | Provides extra visual weight and identifies the primary action in a set of buttons | |
| | | <btn type="success">Success</btn> | Indicates a successful or positive action | |
| | | <btn type="info">Info</btn> | Contextual button for informational alert messages | |
| | | <btn type="warning">Warning</btn> | Indicates caution should be taken with this action | |
| | | <btn type="danger">Danger</btn> | Indicates a dangerous or potentially negative action | |
| | | <btn type="link">Link</btn> | Deemphasize a button by making it look like a link while maintaining button behavior | |
| |
| <code><button type="primary">Primary</button> ... </code> | \\ |
| |
| <button type="default">Default</button> <button type="primary">Primary</button> <button type="success">Success</button> <button type="info">Info</button> <button type="warning">Warning</button> <button type="danger">Danger</button> <button type="link">Link</button> | <code html5> |
| | <btn type="default">Default</btn> |
| | <btn type="primary">Primary</btn> |
| | <btn type="success">Success</btn> |
| | <btn type="info">Info</btn> |
| | <btn type="warning">Warning</btn> |
| | <btn type="danger">Danger</btn> |
| | <btn type="link">Link</btn> |
| | </code> |
| |
| ===== Link button ===== | \\ |
| |
| <code><button type="success" size="lg" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</button></code> | ==== Link button ==== |
| |
| <button type="success" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</button> | <code html><btn type="success" size="lg" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</btn></code> |
| |
| ===== Sizes ===== | <btn type="success" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</btn> |
| |
| <code> | \\ |
| <button type="primary" size="lg">Large button</button> | |
| <button type="default" size="lg">Large button</button> | |
| |
| <button type="primary">Default button</button> | ==== Sizes ==== |
| <button type="default">Default button</button> | |
| |
| <button type="primary" size="sm">Small button</button> | Fancy larger or smaller buttons? Add ''size="lg"'', ''size="sm"'', or ''size="xs"'' for additional sizes. |
| <button type="default" size="sm">Small button</button> | |
| |
| <button type="primary" size="xs">Extra small button</button> | <btn type="primary" size="lg">Large button</btn> |
| <button type="default" size="xs">Extra small button</button> | <btn type="default" size="lg">Large button</btn> |
| | |
| | <btn type="primary">Default button</btn> |
| | <btn type="default">Default button</btn> |
| | |
| | <btn type="primary" size="sm">Small button</btn> |
| | <btn type="default" size="sm">Small button</btn> |
| | |
| | <btn type="primary" size="xs">Extra small button</btn> |
| | <btn type="default" size="xs">Extra small button</btn> |
| | |
| | \\ |
| | |
| | <code html5> |
| | <btn type="primary" size="lg">Large button</btn> |
| | <btn type="default" size="lg">Large button</btn> |
| | |
| | <btn type="primary">Default button</btn> |
| | <btn type="default">Default button</btn> |
| | |
| | <btn type="primary" size="sm">Small button</btn> |
| | <btn type="default" size="sm">Small button</btn> |
| | |
| | <btn type="primary" size="xs">Extra small button</btn> |
| | <btn type="default" size="xs">Extra small button</btn> |
| </code> | </code> |
| |
| <button type="primary" size="lg">Large button</button> | \\ |
| <button type="default" size="lg">Large button</button> | |
| |
| <button type="primary">Default button</button> | ==== Block ==== |
| <button type="default">Default button</button> | |
| |
| <button type="primary" size="sm">Small button</button> | Create block level buttons—those that span the full width of a parent -- by adding ''block="true"'' option. |
| <button type="default" size="sm">Small button</button> | |
| |
| <button type="primary" size="xs">Extra small button</button> | <btn type="primary" size="lg" block="true">Block level button</btn> |
| <button type="default" size="xs">Extra small button</button> | \\ |
| | <btn type="default" size="lg" block="true">Block level button</btn> |
| |
| ===== Attributes ===== | \\ |
| |
| | <code html5> |
| | <btn type="primary" size="lg" block="true">Block level button</btn> |
| | <btn type="default" size="lg" block="true">Block level button</btn> |
| | </code> |
| | |
| | \\ |
| | |
| | |
| | ==== Active state ==== |
| | |
| | Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. Bootstrap Wrapper Plugin detect automatically the active state of current page. |
| | |
| | <btn type="primary">[[button]]</btn> <btn type="default">[[panel]]</btn> |
| | |
| | <code html5> |
| | <btn type="primary">[[button]]</btn> <btn type="default">[[panel]]</btn> |
| | </code> |
| | |
| | \\ |
| | |
| | ==== Disabled state ==== |
| | |
| | Make buttons look unclickable by fading them back with ''opacity''. |
| | |
| | <btn type="primary" disabled="true">[[button]]</btn> <btn type="default" disabled="true">[[panel]]</btn> |
| | |
| | <code html5> |
| | <btn type="primary" disabled="true">[[button]]</btn> <btn type="default" disabled="true">[[panel]]</btn> |
| | </code> |
| | |
| | ===== Options ===== |
| | |
| | <datatable info="false" paging="false" searching="true"> |
| ^ Attribute ^ Default Value ^ Allowed Values ^ Description ^ | ^ Attribute ^ Default Value ^ Allowed Values ^ Description ^ |
| | ''type'' | ''default'' | ''default'', ''primary'', ''success'', ''info'', ''warning'', ''danger'', ''link'' | Type of button | | | ''type'' | ''default'' | ''default'' ''primary'' ''success'' ''info'' ''warning'' ''danger'' ''link'' | Type of button | |
| | ''icon'' | optional | | Font icon class (eg. Glyphicon or Font-Awesome) | | | ''icon'' | optional | | Font icon class (eg. Glyphicon or Font-Awesome) | |
| | ''size'' | optional | | Allowed values: ''lg'', ''sm'' | | | ''size'' | optional | ''lg'' ''sm'' | Button size | |
| | ''collapse'' | optional | | Target element selector to collapse (see [[.:collapse]]) | | | ''block'' | optional | ''true'' ''false'' | Block level buttons | |
| | | ''collapse'' | optional | | Target element selector to collapse (see [[collapse]]) | |
| | | ''disabled'' | optional | ''true'' ''false'' | Disable the button | |
| | | ''modal'' | optional | | Modal ID (see [[modal]]) | |
| | </datatable> |
Giuseppe Di Terlizzi