X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fbootstrap%2FCard.js;h=bd6467cbc07bd064ad1d5ffdfd0c38264adcb7bf;hb=1ead8465ba5774e3df216f91f4ccb72ed4ff894e;hp=c2e43049647af192e10f072445e1cf22198139ca;hpb=b9487e70b3abf325aab1697ad8986458b7bf7c1b;p=roojs1 diff --git a/Roo/bootstrap/Card.js b/Roo/bootstrap/Card.js index c2e4304964..bd6467cbc0 100644 --- a/Roo/bootstrap/Card.js +++ b/Roo/bootstrap/Card.js @@ -9,16 +9,40 @@ * * * 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 * * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark) - * @cfg {String} margin (0|1|2|3|4|5|auto|t-0|t-1|t-2|t-3|t-4|t-5|t-auto|b-0|b-1|b-2|b-3|b-4|b-5|b-auto|l-0|l-1|l-2|l-3|l-4|l-5|l-auto|r-0|r-1|r-2|r-3|r-4|r-5|r-auto|x-0|x-1|x-2|x-3|x-4|x-5|x-auto|y-0|y-1|y-2|y-3|y-4|y-5|y-auto) - * @cfg {String} padding (0|1|2|3|4|5|t-0|t-1|t-2|t-3|t-4|t-5|b-0|b-1|b-2|b-3|b-4|b-5|l-0|l-1|l-2|l-3|l-4|l-5|r-0|r-1|r-2|r-3|r-4|r-5|x-0|x-1|x-2|x-3|x-4|x-5|y-0|y-1|y-2|y-3|y-4|y-5) + * + * @cfg {String} margin (0|1|2|3|4|5|auto) + * @cfg {String} margin_top (0|1|2|3|4|5|auto) + * @cfg {String} margin_bottom (0|1|2|3|4|5|auto) + * @cfg {String} margin_left (0|1|2|3|4|5|auto) + * @cfg {String} margin_right (0|1|2|3|4|5|auto) + * @cfg {String} margin_x (0|1|2|3|4|5|auto) + * @cfg {String} margin_y (0|1|2|3|4|5|auto) + * + * @cfg {String} padding (0|1|2|3|4|5) + * @cfg {String} padding_top (0|1|2|3|4|5) + * @cfg {String} padding_bottom (0|1|2|3|4|5) + * @cfg {String} padding_left (0|1|2|3|4|5) + * @cfg {String} padding_right (0|1|2|3|4|5) + * @cfg {String} padding_x (0|1|2|3|4|5) + * @cfg {String} padding_y (0|1|2|3|4|5) + * + * @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 * @param {Object} config The config object @@ -35,9 +59,68 @@ Roo.bootstrap.Card = function(config){ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { + weight : '', - - + + margin: '', /// may be better in component? + margin_top: '', + margin_bottom: '', + margin_left: '', + margin_right: '', + margin_x: '', + margin_y: '', + + padding : '', + padding_top: '', + padding_bottom: '', + padding_left: '', + padding_right: '', + padding_x: '', + padding_y: '', + + display: '', + display_xs: '', + display_sm: '', + 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.