X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fbootstrap%2FCard.js;h=bd6467cbc07bd064ad1d5ffdfd0c38264adcb7bf;hb=1ead8465ba5774e3df216f91f4ccb72ed4ff894e;hp=ae75f25513838662abd4df75038ea49d373b45fd;hpb=5d44ac475dda8ea234499c13fd56291802376684;p=roojs1 diff --git a/Roo/bootstrap/Card.js b/Roo/bootstrap/Card.js index ae75f25513..bd6467cbc0 100644 --- a/Roo/bootstrap/Card.js +++ b/Roo/bootstrap/Card.js @@ -9,10 +9,13 @@ * * * 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 + * @cfg {String} html -- html contents - or just use children.. * @cfg {String|Object} footer * @cfg {Array} - links * @@ -34,11 +37,11 @@ * @cfg {String} padding_x (0|1|2|3|4|5) * @cfg {String} padding_y (0|1|2|3|4|5) * - * @cfg {String} display (block|none) - * @cfg {String} display_xs (block|none) - * @cfg {String} display_sm (block|none) - * @cfg {String} display_lg (block|none) - * @cfg {String} display_xl (block|none) + * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) * @constructor * Create a new Container @@ -56,21 +59,22 @@ Roo.bootstrap.Card = function(config){ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { + weight : '', margin: '', /// may be better in component? - margin_xs: '', - margin_sm: '', - margin_lg: '', - margin_xl: '', + margin_top: '', + margin_bottom: '', + margin_left: '', + margin_right: '', margin_x: '', margin_y: '', padding : '', - padding_xs: '', - padding_sm: '', - padding_lg: '', - padding_xl: '', + padding_top: '', + padding_bottom: '', + padding_left: '', + padding_right: '', padding_x: '', padding_y: '', @@ -80,7 +84,43 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { display_lg: '', display_xl: '', + header_image : '', + header : '', + header_size : 0, + title : '', + subtitle : '', + html : '', + layoutCls : function() + { + var cls = ''; + var t = this; + + ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) { + // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet + + if (t['margin' + (v.length ? '_' : '') + v].length) { + cls += ' m' + (v.length ? v[0] : '') + '-' + t['margin' + (v.length ? '_' : '') + v]; + } + if (t['padding' + (v.length ? '_' : '') + v].length) { + cls += ' p' + (v.length ? v[0] : '') + '-' + t['padding' + (v.length ? '_' : '') + v]; + } + }); + + ['', 'xs', 'sm', 'lg', 'xl', ].forEach(function(v) { + if (t['display' + (v.length ? '_' : '') + v].length) { + cls += ' d' + (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v].length + } + }); + + // more generic support? + if (this.hidden) { + cls += ' d-none'; + } + + return cls; + }, + // Roo.log("Call onRender: " + this.xtype); /* We are looking at something like this.