wiki:plugin:bootswrapper:button

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:plugin:bootswrapper:button [2016/02/19 15:13] Giuseppe Di Terlizziwiki:plugin:bootswrapper:button [2016/02/22 17:53] (current) – [Options] Giuseppe Di Terlizzi
Line 3: Line 3:
 ===== Examples ===== ===== Examples =====
  
-<code html><btn type="primary">Primary</btn> ... </code>+<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 |
  
-<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 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 ==== ==== Link button ====
Line 12: Line 30:
  
 <btn type="success" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</btn> <btn type="success" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</btn>
 +
 +\\
  
 ==== Sizes ==== ==== Sizes ====
Line 31: Line 51:
 \\ \\
  
-<code html>+<code html5>
 <btn type="primary" size="lg">Large button</btn> <btn type="primary" size="lg">Large button</btn>
 <btn type="default" size="lg">Large button</btn> <btn type="default" size="lg">Large button</btn>
Line 45: Line 65:
 </code> </code>
  
-===== Block =====+\\ 
 + 
 +==== Block ====
  
-Create block level buttons—those that span the full width of a parent -- by adding ''block="true" option.+Create block level buttons—those that span the full width of a parent -- by adding ''block="true"'' option.
  
 <btn type="primary" size="lg" block="true">Block level button</btn> <btn type="primary" size="lg" block="true">Block level button</btn>
Line 55: Line 77:
 \\ \\
  
-<code html>+<code html5>
 <btn type="primary" size="lg" block="true">Block level button</btn> <btn type="primary" size="lg" block="true">Block level button</btn>
 <btn type="default" size="lg" block="true">Block level button</btn> <btn type="default" size="lg" block="true">Block level button</btn>
 </code> </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>
  
-===== Attributes =====+===== Options =====
  
 <datatable info="false" paging="false" searching="true"> <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 
-| ''block'' | optional | ''true''''false'' | Block level buttons | +| ''block'' | optional | ''true'' ''false'' | Block level buttons | 
-| ''collapse'' | optional | | Target element selector to collapse (see [[.:collapse]]) |+| ''collapse'' | optional | | Target element selector to collapse (see [[collapse]]) | 
 +| ''disabled'' | optional | ''true'' ''false'' | Disable the button | 
 +| ''modal'' | optional | | Modal ID (see [[modal]]) |
 </datatable> </datatable>
  • wiki/plugin/bootswrapper/button.1455891212.txt.gz
  • Last modified: 8 years ago
  • by Giuseppe Di Terlizzi