*
*
* possible... may not be implemented..
- * @cfg {String} header content of header (for panel)
+ * @cfg {String} header_image
+ * @cfg {String|Object} header
+ * @cfg {String|Object} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
+ *
* @cfg {String|Object} title
* @cfg {String|Object} subtitle
* @cfg {String|Object} body
Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
+
weight : '',
margin: '', /// may be better in component?
display_lg: '',
display_xl: '',
+ header_image : '',
+ header : '',
+ header_size : 0,
+ title : '',
+ html : '',
layoutCls : function()
{
getAutoCreate : function(){
var cfg = {
- tag : this.tag || 'div',
- html : '',
- cls : 'card'
+ tag : 'div',
+ cls : 'card',
+ cn : [ ]
};
if (this.weight.length && this.weight != 'light') {
cfg.cls += this.layoutCls();
-
+ if (this.header) {
+ cfg.cn.push({
+ tag : 'div',
+ cls : 'card-header',
+ html : this.header // escape?
+ });
+ }
+ if (this.header_image) {
+ cfg.cn.push({
+ tag : 'img',
+ cls : 'card-img-top',
+ src: this.header_image // escape?
+ });
+ }
+
+
if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {