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. }