Grid / Layout Grid - 图1

Grid React Component

Grid React component represents Framework7’s Layout Grid.

Grid Components

There are following components included:

  • Row / F7Row - grid row
  • Col / F7Col - grid column (cell)

Grid Properties

PropTypeDefaultDescription
<Row> properties
noGapbooleanfalseRemoves spacing between columns
tagstringdivDefines which tag must be used to render row element
resizablebooleanfalseMakes row resizable
resizableAbsolutebooleanfalseEnables absolute resizing (in px)
resizableFixedbooleanfalseKeeps resizable row in fixed size (not resizable)
resizableHhandlerbooleantrueAdds resize handler element (between rows) to resize them
<Col> properties
widthnumber
string		autoColumn width. Check available Column Sizes
xsmallnumberColumn width when app width >= 480px
smallnumberColumn width when app width >= 568px
mediumnumberColumn width when app width >= 768px
largenumberColumn width when app width >= 1024px
xlargenumberColumn width when app width >= 1200px
resizablebooleanfalseMakes column resizable
resizableAbsolutebooleanfalseEnables absolute resizing (in px)
resizableFixedbooleanfalseKeeps resizable column in fixed size (not resizable)
resizableHandlerbooleantrueAdds resize handler element (between columns) to resize them

Grid Events

EventDescription
<Row> events
gridResizeEvent will be triggered on resizable grid row resize
<Col> events
gridResizeEvent will be triggered on resizable grid column resize

Examples

  1. <Block>
  2.   <p>Columns within a row are automatically set to have equal width. Otherwise you can define your column with pourcentage of screen you want.</p>
  3. </Block>
  5. <BlockTitle>Columns with gap</BlockTitle>
  6. <Block>
  7.   <Row>
  8.     <Col>50% (.col)</Col>
  9.     <Col>50% (.col)</Col>
  10.   </Row>
  11.   <Row>
  12.     <Col>25% (.col)</Col>
  13.     <Col>25% (.col)</Col>
  14.     <Col>25% (.col)</Col>
  15.     <Col>25% (.col)</Col>
  16.   </Row>
  17.   <Row>
  18.     <Col>33% (.col)</Col>
  19.     <Col>33% (.col)</Col>
  20.     <Col>33% (.col)</Col>
  21.   </Row>
  22.   <Row>
  23.     <Col>20% (.col)</Col>
  24.     <Col>20% (.col)</Col>
  25.     <Col>20% (.col)</Col>
  26.     <Col>20% (.col)</Col>
  27.     <Col>20% (.col)</Col>
  28.   </Row>
  29.   <Row>
  30.     <Col width="33">33% (.col-33)</Col>
  31.     <Col width="66">66% (.col-66)</Col>
  32.   </Row>
  33.   <Row>
  34.     <Col width="25">25% (.col-25)</Col>
  35.     <Col width="25">25% (.col-25)</Col>
  36.     <Col width="50">50% (.col-50)</Col>
  37.   </Row>
  38.   <Row>
  39.     <Col width="75">75% (.col-75)</Col>
  40.     <Col width="25">25% (.col-25)</Col>
  41.   </Row>
  42.   <Row>
  43.     <Col width="80">80% (.col-80)</Col>
  44.     <Col width="20">20% (.col-20)</Col>
  45.   </Row>
  46. </Block>
  48. <BlockTitle>No gap between columns</BlockTitle>
  49. <Block>
  50.   <Row noGap>
  51.     <Col>50% (.col)</Col>
  52.     <Col>50% (.col)</Col>
  53.   </Row>
  54.   <Row noGap>
  55.     <Col>25% (.col)</Col>
  56.     <Col>25% (.col)</Col>
  57.     <Col>25% (.col)</Col>
  58.     <Col>25% (.col)</Col>
  59.   </Row>
  60.   <Row noGap>
  61.     <Col>33% (.col)</Col>
  62.     <Col>33% (.col)</Col>
  63.     <Col>33% (.col)</Col>
  64.   </Row>
  65.   <Row noGap>
  66.     <Col>20% (.col)</Col>
  67.     <Col>20% (.col)</Col>
  68.     <Col>20% (.col)</Col>
  69.     <Col>20% (.col)</Col>
  70.     <Col>20% (.col)</Col>
  71.   </Row>
  72.   <Row noGap>
  73.     <Col width="33">33% (.col-33)</Col>
  74.     <Col width="66">66% (.col-66)</Col>
  75.   </Row>
  76.   <Row noGap>
  77.     <Col width="25">25% (.col-25)</Col>
  78.     <Col width="25">25% (.col-25)</Col>
  79.     <Col width="50">50% (.col-50)</Col>
  80.   </Row>
  81.   <Row noGap>
  82.     <Col width="75">75% (.col-75)</Col>
  83.     <Col width="25">25% (.col-25)</Col>
  84.   </Row>
  85.   <Row noGap>
  86.     <Col width="80">80% (.col-80)</Col>
  87.     <Col width="20">20% (.col-20)</Col>
  88.   </Row>
  89. </Block>
  91. <BlockTitle>Nested</BlockTitle>
  92. <Block>
  93.   <Row>
  94.     <Col>50% (.col)
  95.       <Row>
  96.         <Col>50% (.col)</Col>
  97.         <Col>50% (.col)</Col>
  98.       </Row>
  99.     </Col>
  100.     <Col>50% (.col)
  101.       <Row>
  102.         <Col width="33">33% (.col-33)</Col>
  103.         <Col width="66">66% (.col-66)</Col>
  104.       </Row>
  105.     </Col>
  106.   </Row>
  107. </Block>
  109. <BlockTitle>Responsive Grid</BlockTitle>
  110. <Block>
  111.   <p>Grid cells have different size on Phone/Tablet</p>
  112.   <Row>
  113.     <Col width="100" medium="50">.col-100.tablet-50</Col>
  114.     <Col width="100" medium="50">.col-100.tablet-50</Col>
  115.   </Row>
  116.   <Row>
  117.     <Col width="50" medium="25">.col-50.tablet-25</Col>
  118.     <Col width="50" medium="25">.col-50.tablet-25</Col>
  119.     <Col width="50" medium="25">.col-50.tablet-25</Col>
  120.     <Col width="50" medium="25">.col-50.tablet-25</Col>
  121.   </Row>
  122.   <Row>
  123.     <Col width="100" medium="40">.col-100.tablet-40</Col>
  124.     <Col width="50" medium="60">.col-50.tablet-60</Col>
  125.     <Col width="50" medium="66">.col-50.tablet-66</Col>
  126.     <Col width="100" medium="33">.col-100.tablet-33</Col>
  127.   </Row>
  128. </Block>
  130. <BlockTitle>Resizable Cols</BlockTitle>
  131. <Block className="grid-resizable-demo">
  132.   <Row>
  133.     <Col resizable style={{minWidth: '20px'}}>1</Col>
  134.     <Col resizable style={{minWidth: '20px'}}>2</Col>
  135.     <Col resizable style={{minWidth: '20px'}}>3</Col>
  136.   </Row>
  137. </Block>
  139. <BlockTitle>Resizable Fixed Col</BlockTitle>
  140. <BlockHeader>2nd column has fixed size</BlockHeader>
  141. <Block className="grid-resizable-demo">
  142.   <Row>
  143.     <Col resizable style={{minWidth: '20px'}}>1</Col>
  144.     <Col resizable resizableFixed style={{minWidth: '20px'}}>2</Col>
  145.     <Col resizable style={{minWidth: '20px'}}>3</Col>
  146.   </Row>
  147. </Block>
  149. <BlockTitle>Resizable Grid</BlockTitle>
  150. <Block className="grid-resizable-demo">
  151.   <Row className="align-items-stretch" style={{height: '300px'}}>
  152.     <Col resizable className="demo-col-center-content" style={{minWidth: '50px'}}>Left</Col>
  153.     <Col resizable className="display-flex flex-direction-column" style={{
  154.       padding: '0px',
  155.       border: 'none',
  156.       minWidth: '50px',
  157.       backgroundColor: 'transparent',
  158.     }}>
  159.       <Row resizable style={{height: '50%', minHeight: '50px'}}>
  160.         <Col className="demo-col-center-content" style={{height: '100%'}}>Center Top</Col>
  161.       </Row>
  162.       <Row resizable style={{height: '50%', minHeight: '50px'}}>
  163.         <Col className="demo-col-center-content" style={{height: '100%'}}>Center Bottom</Col>
  164.       </Row>
  165.     </Col>
  166.     <Col resizable className="demo-col-center-content" style={{minWidth: '50px'}}>Right</Col>
  167.   </Row>
  168. </Block>

← Gauge

Icon →