* @extends Roo.bootstrap.Component
* Bootstrap Button class
* @cfg {String} html The button content
- * @cfg {String} weight (default | primary | success | info | warning | danger | link ) default
+ * @cfg {String} weight (default | primary | secondary | success | info | warning | danger | link ) default
+ * @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline)
* @cfg {String} size ( lg | sm | xs)
* @cfg {String} tag ( a | input | submit)
* @cfg {String} href empty or href
Roo.bootstrap.Button = function(config){
Roo.bootstrap.Button.superclass.constructor.call(this, config);
- this.weightClass = ["btn-default",
+ this.weightClass = ["btn-default btn-outline-secondary",
"btn-primary",
"btn-success",
"btn-info",
html: false,
active: false,
weight: '',
+ outline : false,
size: '',
tag: 'button',
href: '',
name: false,
target: false,
- pressed : false,
+ pressed : null,
getAutoCreate : function(){
]
};
- if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
+ if (['default', 'secondary' , 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
cfg.cls += ' '+this.weight;
}
//}
if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
- cfg.cls += ' btn-' + this.weight;
+ var outline = this.outline || this.weight == 'default' ? 'outline-' : '';
+ cfg.cls += ' btn-' + outline + this.weight;
}
} else if (this.theme==='glow') {
return;
}
-
Roo.log('button on click ');
if(this.preventDefault){
e.preventDefault();
}
if (this.pressed === true || this.pressed === false) {
- this.toggleActive();
+ this.toggleActive(e);
}
/**
* toggles the current active state
*/
- toggleActive : function()
+ toggleActive : function(e)
{
- this.setActive(this.pressed);
+ this.setActive(!this.pressed);
+ this.fireEvent('toggle', this, e, !this.pressed);
},
/**
* get the current active state
{
return this.el.select('.roo-button-text',true).first().dom.innerHTML;
},
- hide: function() {
-
-
- this.el.hide();
- },
- show: function() {
-
- this.el.show();
- },
+
setWeight : function(str)
{
- this.el.removeClass(this.weightClass);
- this.el.addClass('btn-' + str);
+ this.weight = str;
+ var outline = this.outline ? 'outline-' : '';
+ if (str == 'default') {
+ outline = 'outline-';
+ str = 'secondary';
+ }
+ this.el.removeClass(this.weightClass);
+ this.el.addClass('btn-' + outline + str);
}