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