git.roojs.org Git - roojs1/blob - Roo/bootstrap/Column.js

   1 /*
   2  * - LGPL
   3  *
   4  * column
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.Column
  10  * @extends Roo.bootstrap.Component
  11  * @children Roo.bootstrap.Component
  12  * Bootstrap Column class
  13  * @cfg {Number} xs colspan out of 12 for mobile-sized screens or 0 for hidden
  14  * @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
  15  * @cfg {Number} md colspan out of 12 for computer-sized screens or 0 for hidden
  16  * @cfg {Number} lg colspan out of 12 for large computer-sized screens or 0 for hidden
  17  * @cfg {Number} xsoff colspan offset out of 12 for mobile-sized screens or 0 for hidden
  18  * @cfg {Number} smoff colspan offset out of 12 for tablet-sized screens or 0 for hidden
  19  * @cfg {Number} mdoff colspan offset out of 12 for computer-sized screens or 0 for hidden
  20  * @cfg {Number} lgoff colspan offset out of 12 for large computer-sized screens or 0 for hidden
  21  *
  22  *
  23  * @cfg {Boolean} hidden (true|false) hide the element
  24  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
  25  * @cfg {String} fa (ban|check|...) font awesome icon
  26  * @cfg {Number} fasize (1|2|....) font awsome size
  27
  28  * @cfg {String} icon (info-sign|check|...) glyphicon name
  29
  30  * @cfg {String} html content of column.
  31  *
  32  * @constructor
  33  * Create a new Column
  34  * @param {Object} config The config object
  35  */
  36
  37 Roo.bootstrap.Column = function(config){
  38     Roo.bootstrap.Column.superclass.constructor.call(this, config);
  39 };
  40
  41 Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
  42
  43     xs: false,
  44     sm: false,
  45     md: false,
  46     lg: false,
  47     xsoff: false,
  48     smoff: false,
  49     mdoff: false,
  50     lgoff: false,
  51     html: '',
  52     offset: 0,
  53     alert: false,
  54     fa: false,
  55     icon : false,
  56     hidden : false,
  57     fasize : 1,
  58
  59     getAutoCreate : function(){
  60         var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
  61
  62         cfg = {
  63             tag: 'div',
  64             cls: 'column'
  65         };
  66
  67         var settings=this;
  68         var sizes =   ['xs','sm','md','lg'];
  69         sizes.map(function(size ,ix){
  70             //Roo.log( size + ':' + settings[size]);
  71
  72             if (settings[size+'off'] !== false) {
  73                 cfg.cls += ' col-' + size + '-offset-' + settings[size+'off'] ;
  74             }
  75
  76             if (settings[size] === false) {
  77                 return;
  78             }
  79
  80             if (!settings[size]) { // 0 = hidden
  81                 cfg.cls += ' hidden-' + size + ' hidden-' + size + '-down';
  82                 // bootsrap4
  83                 for (var i = ix; i > -1; i--) {
  84                     cfg.cls +=  ' d-' + sizes[i] + '-none';
  85                 }
  86
  87
  88                 return;
  89             }
  90             cfg.cls += ' col-' + size + '-' + settings[size] + (
  91                 size == 'xs' ? (' col-' + settings[size] ) : '' // bs4 col-{num} replaces col-xs
  92             );
  93
  94         });
  95
  96         if (this.hidden) {
  97             cfg.cls += ' hidden';
  98         }
  99
 100         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
 101             cfg.cls +=' alert alert-' + this.alert;
 102         }
 103
 104
 105         if (this.html.length) {
 106             cfg.html = this.html;
 107         }
 108         if (this.fa) {
 109             var fasize = '';
 110             if (this.fasize > 1) {
 111                 fasize = ' fa-' + this.fasize + 'x';
 112             }
 113             cfg.html = '<i class="fa fa-'+this.fa + fasize + '"></i>' + (cfg.html || '');
 114
 115
 116         }
 117         if (this.icon) {
 118             cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' +  (cfg.html || '');
 119         }
 120
 121         return cfg;
 122     }
 123
 124 });
 125
 126
 127
 128