* @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 {String} badge_weight (default | primary | secondary | success | info | warning | danger | link ) default (same as button)
+ * @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: '',
+ badge_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 (this.parentType != 'Navbar') {
this.weight = this.weight.length ? this.weight : 'default';
//}
- if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
+ if (['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
- cfg.cls += ' btn-' + this.weight;
+ var outline = this.outline || this.weight == 'default' ? 'outline-' : '';
+ var weight = this.weight == 'default' ? 'secondary' : this.weight;
+ cfg.cls += ' btn-' + outline + weight;
+ if (this.weight == 'default') {
+ // BC
+ cfg.cls += ' btn-' + this.weight;
+ }
}
} else if (this.theme==='glow') {
};
}
+ var bw = this.badge_weight.length ? this.badge_weight :
+ (this.weight.length ? this.weight : 'secondary');
+ bw = bw == 'default' ? 'secondary' : bw;
cfg.cn = [
value,
{
tag: 'span',
- cls: 'badge',
+ cls: 'badge badge-' + bw,
html: this.badge
}
];
{
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') {
+ this.el.addClass('btn-default btn-outline-secondary');
+ return;
+ }
+ this.el.addClass('btn-' + outline + str);
}