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

Grid Svelteコンポーネントは、Framework7のLayout Gridを表すコンポーネントです。

グリッドコンポーネント

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

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

グリッドのプロパティ

Prop	Type	Default	Description
<Row> properties
noGap	boolean	false	列の間のスペースを削除します。
tag	string	div	行要素のレンダリングにどのタグを使用するかを定義します。div `または` p` になります。
resizable	boolean	false	行のサイズを変更する
resizableAbsolute	boolean	false	絶対的なリサイズを可能にする（単位は`px`）。
resizableFixed	boolean	false	リサイズ可能な行を固定サイズで保持する(リサイズ不可)
resizableHandler	boolean	true	リサイズ可能な行をリサイズするために、リサイズハンドラ要素を(行の間に)追加します。
<Col> properties
tag	string	div	列要素のレンダリングにどのタグを使用するかを定義します。div `または` span` を指定します。
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

<Page class="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 class="grid-resizable-demo">
    <Row>
      <Col resizable style="min-width: 20px">1</Col>
      <Col resizable style="min-width: 20px">2</Col>
      <Col resizable style="min-width: 20px">3</Col>
    </Row>
  </Block>

  <BlockTitle>Resizable Fixed Col</BlockTitle>
  <BlockHeader>2nd column has fixed size</BlockHeader>
  <Block class="grid-resizable-demo">
    <Row>
      <Col resizable style="min-width: 20px">1</Col>
      <Col resizable resizableFixed style="min-width: 20px">2</Col>
      <Col resizable style="min-width: 20px">3</Col>
    </Row>
  </Block>

  <BlockTitle>Resizable Grid</BlockTitle>
  <Block class="grid-resizable-demo">
    <Row class="align-items-stretch" style="height: 300px">
      <Col resizable class="demo-col-center-content" style="min-width: 50px">Left</Col>
      <Col resizable class="display-flex flex-direction-column" style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
        <Row resizable style="height: 50%; min-height: 50px">
          <Col class="demo-col-center-content" style="height: 100%">Center Top</Col>
        </Row>
        <Row resizable style="height: 50%; min-height: 50px">
          <Col class="demo-col-center-content" style="height: 100%">Center Bottom</Col>
        </Row>
      </Col>
      <Col resizable class="demo-col-center-content" style="min-width: 50px">Right</Col>
    </Row>
  </Block>
</Page>
  

<style>
  :global(.grid-demo div[class*="col"]) {
    background: #fff;
    text-align: center;
    color: #000;
    border: 1px solid #ddd;
    padding: 5px;
    margin-bottom: 15px;
    font-size: 12px;
  }
  :global(.grid-resizable-demo) {
    --f7-grid-row-gap: 16px;
  }
  :global(.grid-resizable-demo div[class*="col"]) {
    margin-bottom: 0;
  }
  :global(.grid-resizable-demo .demo-col-center-content) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
<script>
  import {Page, Navbar, Block, BlockTitle, Row, Col, BlockHeader} from 'framework7-svelte';
</script>