src/Grid.js File

  1. import React,{ PropTypes } from 'react';
  2. import Component from './utils/Component';
  3. import classnames from 'classnames';
  4. import {setPhoenixPrefix} from './utils/Tool';
  5.  
  6. /**
  7.  * <h5>主要栅格化布局组件</h5>
  8.  * <strong><a href='../classes/Grid.html'>Grid 外框</a></strong><br>
  9.  * <strong><a href='../classes/Row.html'>Row 行排列</a></strong><br>
  10.  * <strong><a href='../classes/Col.html'>Col 竖排列</a></strong><br>
  11.  * <strong><a href='../classes/TableView.html'>TableView 仿表格组件</a></strong><br>
  12.  * <h6>点击以上链接进行相关查看</h6>
  13.  * @module 布局组件
  14.  * @main 布局组件
  15.  * @static
  16.  */
  17. /**
  18.  * 栅格容器组件<br/>
  19.  * - 配合Row、Col使用布局。
  20.  * - 可自定义className、style等属性以及自定义事件。
  21.  *
  22.  * 示例:
  23.  * ```code
  24.  *     <Grid> //定义栅格
  25.  *         <Row> //定义一行
  26.  *             <Col> //定义一列，最多12份
  27.  *                 <div className='col-demo'>内容</div>
  28.  *             </Col>
  29.  *             <Col>
  30.  *                 <div className='col-demo'>stretch<br />baseline</div>
  31.  *             </Col>
  32.  *         </Row>
  33.  *     </Grid>
  34.  * ```
  35.  *
  36.  * @class Grid
  37.  * @module 布局组件
  38.  * @extends Component
  39.  * @constructor
  40.  * @since 0.1.0
  41.  * @demo grid|grid.js {展示}
  42.  * @show true
  43.  * */
  44. export default class Grid extends Component{
  45.  
  46.     static propTypes = {
  47.         /**
  48.          * 样式前缀
  49.          * @property classPrefix
  50.          * @type String
  51.          * @default 'grid'
  52.          * */
  53.         classPrefix: PropTypes.string,
  54.     };
  55.  
  56.     static defaultProps = {
  57.         classPrefix:'grid',
  58.         classMapping : {}
  59.     };
  60.  
  61.     constructor(props, context) {
  62.         super(props, context);
  63.     }
  64.  
  65.     render(){
  66.         return (
  67.             <div {...this.props}
  68.                 className={classnames(
  69.                     this.getProperty(true),
  70.                     this.props.fluid ? setPhoenixPrefix('grid-fluid'):'',
  71.                     this.props.className
  72.             )}>
  73.                 {this.props.children}
  74.             </div>
  75.         );
  76.     }
  77. }
  78.