2 * This is BS4's Card element.. - similar to our containers probably..
6 * @class Roo.bootstrap.Card
7 * @extends Roo.bootstrap.Component
11 * possible... may not be implemented..
12 * @cfg {String} header content of header (for panel)
13 * @cfg {String|Object} title
14 * @cfg {String|Object} subtitle
15 * @cfg {String|Object} body
16 * @cfg {String|Object} footer
17 * @cfg {Array} - links
19 * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
20 * @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)
21 * @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)
23 * Create a new Container
24 * @param {Object} config The config object
27 Roo.bootstrap.Card = function(config){
28 Roo.bootstrap.Card.superclass.constructor.call(this, config);
36 Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
41 // Roo.log("Call onRender: " + this.xtype);
42 /* We are looking at something like this.
44 <img src="..." class="card-img-top" alt="...">
45 <div class="card-body">
46 <h5 class="card-title">Card title</h5>
47 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
49 >> this bit is really the body...
50 <div> << we will ad dthis in hopefully it will not break shit.
52 <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
55 <a href="#" class="card-link">Card link</a>
58 <div class="card-footer">
59 <small class="text-muted">Last updated 3 mins ago</small>
63 getAutoCreate : function(){
66 tag : this.tag || 'div',
71 if (this.weight.length && this.weight != 'light') {
72 cfg.cls += ' text-white'
74 if (this.weight.length) {
75 cfg.cls += ' bg-' + this.weight;
82 // - this is applied by the parent..
84 // cfg.cls = this.cls + '';
87 if (this.sticky.length) {
89 var bd = Roo.get(document.body);
90 if (!bd.hasClass('bootstrap-sticky')) {
91 bd.addClass('bootstrap-sticky');
92 Roo.select('html',true).setStyle('height', '100%');
95 cfg.cls += 'bootstrap-sticky-' + this.sticky;
99 if (this.well.length) {
103 cfg.cls +=' well well-' +this.well;
112 cfg.cls += ' hidden';
116 if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
117 cfg.cls +=' alert alert-' + this.alert;
122 if (this.panel.length) {
123 cfg.cls += ' panel panel-' + this.panel;
125 if (this.header.length) {
131 cfg.cls = cfg.cls + ' expandable';
135 cls: (this.expanded ? 'fa fa-minus' : 'fa fa-plus')
144 html : (this.expandable ? ' ' : '') + this.header
148 cls: 'panel-header-right',
154 cls : 'panel-heading',
155 style : this.expandable ? 'cursor: pointer' : '',
163 cls : 'panel-body' + (this.expanded ? '' : ' hide'),
168 if (this.footer.length) {
170 cls : 'panel-footer',
179 body.html = this.html || cfg.html;
180 // prefix with the icons..
182 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
185 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
190 if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
191 cfg.cls = 'container';