KO Modal header

KO body…

Modal

Disable/Enable modal Fade modal Show modal
 

Icons

Icon swap
 

Alerts

Note we do not use the standard bootstrap alert 'close' as it removes the element from the DOM. Instead we fade in and out via jQuery.

Also note that valid values for alertType are 'info', 'success', 'error' - any other value will default to a standard alert

Fade alert Show/Hide alert Block Type

Holy guacamole! Best check yo self, you're not looking too good.
 

Progress Bars

Toggle Percentage Type Striped Animated

 

Collapse

Note the 'collapseIsOpen' binding and the 'collapseTarget/collapseAction' bindings should not be used together, rather one or the other, as the collapseTarget binding will not update the observable attached to the collapseIsOpen of the target element.

Toggle Click Target Show Hide Toggle

Collapse 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Collapse 2
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
 

Buttons

Size Type Text Block Select/Unselect Disable/Enable

Button Group

Vertical/Horizontal

 

Tooltips

Note all standard tooltip options can be set in the 'tooltipOptions' binding with the exception of the 'selector' and 'title' options as they do not apply to the case of stateful tooltip control via Knockout bindings.

Placement Trigger Delay Title Animation HTML

This is a tooltip example.

Toggle Click Target Show Hide Toggle

 

This is a tooltip. This is another tooltip.
 

Popovers

Note all standard popover options can be set in the 'popoverOptions' binding with the exception of the 'selector', 'title', and 'content' options as they do not apply to the case of stateful popover control via Knockout bindings.

Placement Trigger Delay Title Content Animation HTML

This is a popover example.
This is a popover. This is another popover.

Toggle Click Target Show Hide Toggle