グリッドReactコンポーネント

Grid Reactコンポーネントは、Framework7のLayout Gridを表現しています。

グリッドコンポーネント

以下のコンポーネントが含まれています。

Row - グリッドの行
Col - グリッドの列(セル)

グリッドのプロパティ

Prop	Type	Default	Description
<Row> properties
noGap	boolean	false	列の間のスペースを削除します。
tag	string	div	行要素のレンダリングに使用するタグを定義します。
resizable	boolean	false	行のサイズを変更する
resizableAbsolute	boolean	false	絶対的なサイズ変更を可能にする（単位は`px`）。
resizableFixed	boolean	false	リサイズ可能な行を固定サイズのままにする（リサイズ不可
resizableHandler	boolean	true	リサイズ可能な行の間にリサイズハンドラ要素を追加します。
<Col> properties
tag	string	div	列要素のレンダリングにどのタグを使用するかを定義します。
width	number string	auto	列の幅。利用可能な列のサイズを確認します。
xsmall	number string		アプリの幅が >= 480px のときのカラムの幅
small	number string		アプリの幅が >= 568px の場合のカラムの幅
medium	number string		アプリの幅が >= 768px の場合のカラムの幅
large	number string		アプリの幅が >= 1024px のときのカラムの幅
xlarge	number string		アプリの幅が>>1200pxのときのカラムの幅
resizable	boolean	false	列のサイズを変更する
resizableAbsolute	boolean	false	絶対的なサイズ変更を可能にする（`px`単位
resizableFixed	boolean	false	リサイズ可能なカラムを固定サイズのままにします (リサイズできません)
resizableHandler	boolean	true	リサイズハンドラ要素（カラム間）を追加してリサイズする

グリッドイベント

Event	Description
<Row> events
gridResize	リサイズ可能なグリッドの行のリサイズ時にイベントを発生させる
<Col> events
gridResize	リサイズ可能なグリッドの列がリサイズされるとイベントが発生します。

Examples

import React from 'react';
import {
  Page,
  Navbar,
  Block,
  BlockTitle,
  Row,
  Col,
  BlockHeader,
} from 'framework7-react';
import './grid.css';

export default () => (
  
    
  <Page className="grid-demo">
    <Navbar title="Grid / Layout"></Navbar>
    <Block>
      <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>
    </Block>
    <BlockTitle>Columns with gap</BlockTitle>
    <Block>
      <Row>
        <Col>50% (.col)</Col>
        <Col>50% (.col)</Col>
      </Row>
      <Row>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
      </Row>
      <Row>
        <Col>33% (.col)</Col>
        <Col>33% (.col)</Col>
        <Col>33% (.col)</Col>
      </Row>
      <Row>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
      </Row>
      <Row>
        <Col width="33">33% (.col-33)</Col>
        <Col width="66">66% (.col-66)</Col>
      </Row>
      <Row>
        <Col width="25">25% (.col-25)</Col>
        <Col width="25">25% (.col-25)</Col>
        <Col width="50">50% (.col-50)</Col>
      </Row>
      <Row>
        <Col width="75">75% (.col-75)</Col>
        <Col width="25">25% (.col-25)</Col>
      </Row>
      <Row>
        <Col width="80">80% (.col-80)</Col>
        <Col width="20">20% (.col-20)</Col>
      </Row>
    </Block>
    <BlockTitle>No gap between columns</BlockTitle>
    <Block>
      <Row noGap>
        <Col>50% (.col)</Col>
        <Col>50% (.col)</Col>
      </Row>
      <Row noGap>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
        <Col>25% (.col)</Col>
      </Row>
      <Row noGap>
        <Col>33% (.col)</Col>
        <Col>33% (.col)</Col>
        <Col>33% (.col)</Col>
      </Row>
      <Row noGap>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
        <Col>20% (.col)</Col>
      </Row>
      <Row noGap>
        <Col width="33">33% (.col-33)</Col>
        <Col width="66">66% (.col-66)</Col>
      </Row>
      <Row noGap>
        <Col width="25">25% (.col-25)</Col>
        <Col width="25">25% (.col-25)</Col>
        <Col width="50">50% (.col-50)</Col>
      </Row>
      <Row noGap>
        <Col width="75">75% (.col-75)</Col>
        <Col width="25">25% (.col-25)</Col>
      </Row>
      <Row noGap>
        <Col width="80">80% (.col-80)</Col>
        <Col width="20">20% (.col-20)</Col>
      </Row>
    </Block>

    <BlockTitle>Nested</BlockTitle>
    <Block>
      <Row>
        <Col>
          50% (.col)
          <Row>
            <Col>50% (.col)</Col>
            <Col>50% (.col)</Col>
          </Row>
        </Col>
        <Col>
          50% (.col)
          <Row>
            <Col width="33">33% (.col-33)</Col>
            <Col width="66">66% (.col-66)</Col>
          </Row>
        </Col>
      </Row>
    </Block>

    <BlockTitle>Responsive Grid</BlockTitle>
    <Block>
      <p>Grid cells have different size on Phone/Tablet</p>
      <Row>
        <Col width="100" medium="50">
          .col-100.medium-50
        </Col>
        <Col width="100" medium="50">
          .col-100.medium-50
        </Col>
      </Row>
      <Row>
        <Col width="50" medium="25">
          .col-50.medium-25
        </Col>
        <Col width="50" medium="25">
          .col-50.medium-25
        </Col>
        <Col width="50" medium="25">
          .col-50.medium-25
        </Col>
        <Col width="50" medium="25">
          .col-50.medium-25
        </Col>
      </Row>
      <Row>
        <Col width="100" medium="40">
          .col-100.medium-40
        </Col>
        <Col width="50" medium="60">
          .col-50.medium-60
        </Col>
        <Col width="50" medium="66">
          .col-50.medium-66
        </Col>
        <Col width="100" medium="33">
          .col-100.medium-33
        </Col>
      </Row>
    </Block>

    <BlockTitle>Resizable Cols</BlockTitle>
    <Block className="grid-resizable-demo">
      <Row>
        <Col resizable style={{ minWidth: '20px' }}>
          1
        </Col>
        <Col resizable style={{ minWidth: '20px' }}>
          2
        </Col>
        <Col resizable style={{ minWidth: '20px' }}>
          3
        </Col>
      </Row>
    </Block>

    <BlockTitle>Resizable Fixed Col</BlockTitle>
    <BlockHeader>2nd column has fixed size</BlockHeader>
    <Block className="grid-resizable-demo">
      <Row>
        <Col resizable style={{ minWidth: '20px' }}>
          1
        </Col>
        <Col resizable resizableFixed style={{ minWidth: '20px' }}>
          2
        </Col>
        <Col resizable style={{ minWidth: '20px' }}>
          3
        </Col>
      </Row>
    </Block>

    <BlockTitle>Resizable Grid</BlockTitle>
    <Block className="grid-resizable-demo">
      <Row className="align-items-stretch" style={{ height: '300px' }}>
        <Col resizable className="demo-col-center-content" style={{ minWidth: '50px' }}>
          Left
        </Col>
        <Col
          resizable
          className="display-flex flex-direction-column"
          style={{
            padding: '0px',
            border: 'none',
            minWidth: '50px',
            backgroundColor: 'transparent',
          }}
        >
          <Row resizable style={{ height: '50%', minHeight: '50px' }}>
            <Col className="demo-col-center-content" style={{ height: '100%' }}>
              Center Top
            </Col>
          </Row>
          <Row resizable style={{ height: '50%', minHeight: '50px' }}>
            <Col className="demo-col-center-content" style={{ height: '100%' }}>
              Center Bottom
            </Col>
          </Row>
        </Col>
        <Col resizable className="demo-col-center-content" style={{ minWidth: '50px' }}>
          Right
        </Col>
      </Row>
    </Block>
  </Page>
    
  
);

/* grid.css */
.grid-demo div[class*='col'] {
  background: #fff;
  text-align: center;
  color: #000;
  border: 1px solid #ddd;
  padding: 5px;
  margin-bottom: 15px;
  font-size: 12px;
}
.grid-resizable-demo {
  --f7-grid-row-gap: 16px;
}
.grid-resizable-demo div[class*='col'] {
  margin-bottom: 0;
}
.grid-resizable-demo .demo-col-center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}