* @extends Roo.bootstrap.Component
* Bootstrap Button class
* @cfg {String} html The button content
- * @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 {String} weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default
+ * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) 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} size (lg|sm|xs)
+ * @cfg {String} tag (a|input|submit)
* @cfg {String} href empty or href
* @cfg {Boolean} disabled default false;
* @cfg {Boolean} isClose default false;
- * @cfg {String} glyphicon depricated - use fs
+ * @cfg {String} glyphicon depricated - use fa
+ * @cfg {String} fa fontawesome icon - eg. 'comment' - without the fa/fas etc..
* @cfg {String} badge text for badge
* @cfg {String} theme (default|glow)
* @cfg {Boolean} inverse dark themed version
* @cfg {Boolean} toggle is it a slidy toggle button
- * @cfg {Boolean} pressed (true|false) default null - if the button ahs active state
+ * @cfg {Boolean} pressed  default null - if the button ahs active state
* @cfg {String} ontext text for on slidy toggle state
* @cfg {String} offtext text for off slidy toggle state
* @cfg {Boolean} preventDefault default true (stop click event triggering the URL if it's a link.)
* @cfg {Boolean} removeClass remove the standard class..
- * @cfg {String} target target for a href. (_self|_blank|_parent|_top| other)
+ * @cfg {String} target (_self|_blank|_parent|_top|other) target for a href.
*
* @constructor
* Create a new button
Roo.bootstrap.Button = function(config){
Roo.bootstrap.Button.superclass.constructor.call(this, config);
- this.weightClass = ["btn-default btn-outline-secondary",
- "btn-primary",
- "btn-success",
- "btn-info",
- "btn-warning",
- "btn-danger",
- "btn-link"
- ],
+
this.addEvents({
// raw events
/**
disabled: false,
isClose: false,
glyphicon: '',
+ fa: '',
badge: '',
theme: 'default',
inverse: false,
}
]
};
-
- if (['default', 'secondary' , 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
- cfg.cls += ' '+this.weight;
+ // why are we validating the weights?
+ if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
+ cfg.cls += ' ' + this.weight;
}
return cfg;
return cfg;
}
+
-
if (this.theme==='default') {
cfg.cls = 'btn roo-button';
//if (this.parentType != 'Navbar') {
this.weight = this.weight.length ? this.weight : 'default';
//}
- if (['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
+ if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
var outline = this.outline || this.weight == 'default' ? 'outline-' : '';
var weight = this.weight == 'default' ? 'secondary' : this.weight;
cfg.tag = 'a';
cfg.cls = 'btn-glow roo-button';
- if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
+ if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
cfg.cls += ' ' + this.weight;
}
Roo.log('changing to ul' );
cfg.tag = 'ul';
this.glyphicon = 'caret';
+ if (Roo.bootstrap.version == 4) {
+ this.fa = 'caret-down';
+ }
+
}
cfg.cls += this.size.length ? (' btn-' + this.size) : '';
}
];
}
+ if (this.fa) {
+ cfg.html = ' ' + cfg.html;
+
+ cfg.cn = [
+ {
+ tag: 'i',
+ cls: 'fa fas fa-' + this.fa
+ }
+ ];
+ }
if (this.badge) {
cfg.html += ' ';
if(this.glyphicon){
value = {
- tag: 'span',
- cls: 'glyphicon glyphicon-' + this.glyphicon,
- html: this.html
- };
-
+ tag: 'span',
+ cls: 'glyphicon glyphicon-' + this.glyphicon,
+ html: this.html
+ };
}
+ if(this.fa){
+ value = {
+ tag: 'i',
+ cls: 'fa fas fa-' + this.fa,
+ html: this.html
+ };
+ }
+
var bw = this.badge_weight.length ? this.badge_weight :
(this.weight.length ? this.weight : 'secondary');
bw = bw == 'default' ? 'secondary' : bw;
setWeight : function(str)
{
- this.el.removeClass(this.weightClass);
+ this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-' + w; } ) );
+ this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-outline-' + w; } ) );
this.weight = str;
var outline = this.outline ? 'outline-' : '';
if (str == 'default') {
});
+// fixme - this is probably generic bootstrap - should go in some kind of enum file.. - like sizes.
-
\ No newline at end of file
+Roo.bootstrap.Button.weights = [
+ 'default',
+ 'secondary' ,
+ 'primary',
+ 'success',
+ 'info',
+ 'warning',
+ 'danger',
+ 'link',
+ 'light',
+ 'dark',
+
+];
\ No newline at end of file