Grid / Layout Grid - 图1

Grid Svelte Component

Grid Svelte component represents Framework7’s Layout Grid.

Grid Components

There are following components included:

  • Row - grid row
  • Col - grid column (cell)

Grid Properties

PropTypeDefaultDescription
<Row> properties
noGapbooleanfalseRemoves spacing between columns
tagstringdivDefines which tag must be used to render row element. Can be div or p
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
tagstringdivDefines which tag must be used to render row element. Can be div or span
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. <Page class="grid-demo">
  2.   <Navbar title="Grid / Layout"></Navbar>
  3.   <Block>
  4.     <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>
  5.   </Block>
  6.   <BlockTitle>Columns with gap</BlockTitle>
  7.   <Block>
  8.     <Row>
  9.       <Col>50% (.col)</Col>
  10.       <Col>50% (.col)</Col>
  11.     </Row>
  12.     <Row>
  13.       <Col>25% (.col)</Col>
  14.       <Col>25% (.col)</Col>
  15.       <Col>25% (.col)</Col>
  16.       <Col>25% (.col)</Col>
  17.     </Row>
  18.     <Row>
  19.       <Col>33% (.col)</Col>
  20.       <Col>33% (.col)</Col>
  21.       <Col>33% (.col)</Col>
  22.     </Row>
  23.     <Row>
  24.       <Col>20% (.col)</Col>
  25.       <Col>20% (.col)</Col>
  26.       <Col>20% (.col)</Col>
  27.       <Col>20% (.col)</Col>
  28.       <Col>20% (.col)</Col>
  29.     </Row>
  30.     <Row>
  31.       <Col width="33">33% (.col-33)</Col>
  32.       <Col width="66">66% (.col-66)</Col>
  33.     </Row>
  34.     <Row>
  35.       <Col width="25">25% (.col-25)</Col>
  36.       <Col width="25">25% (.col-25)</Col>
  37.       <Col width="50">50% (.col-50)</Col>
  38.     </Row>
  39.     <Row>
  40.       <Col width="75">75% (.col-75)</Col>
  41.       <Col width="25">25% (.col-25)</Col>
  42.     </Row>
  43.     <Row>
  44.       <Col width="80">80% (.col-80)</Col>
  45.       <Col width="20">20% (.col-20)</Col>
  46.     </Row>
  47.   </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 class="grid-resizable-demo">
  132.     <Row>
  133.       <Col resizable style="min-width: 20px">1</Col>
  134.       <Col resizable style="min-width: 20px">2</Col>
  135.       <Col resizable style="min-width: 20px">3</Col>
  136.     </Row>
  137.   </Block>
  139.   <BlockTitle>Resizable Fixed Col</BlockTitle>
  140.   <BlockHeader>2nd column has fixed size</BlockHeader>
  141.   <Block class="grid-resizable-demo">
  142.     <Row>
  143.       <Col resizable style="min-width: 20px">1</Col>
  144.       <Col resizable resizableFixed style="min-width: 20px">2</Col>
  145.       <Col resizable style="min-width: 20px">3</Col>
  146.     </Row>
  147.   </Block>
  149.   <BlockTitle>Resizable Grid</BlockTitle>
  150.   <Block class="grid-resizable-demo">
  151.     <Row class="align-items-stretch" style="height: 300px">
  152.       <Col resizable class="demo-col-center-content" style="min-width: 50px">Left</Col>
  153.       <Col resizable class="display-flex flex-direction-column" style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
  154.         <Row resizable style="height: 50%; min-height: 50px">
  155.           <Col class="demo-col-center-content" style="height: 100%">Center Top</Col>
  156.         </Row>
  157.         <Row resizable style="height: 50%; min-height: 50px">
  158.           <Col class="demo-col-center-content" style="height: 100%">Center Bottom</Col>
  159.         </Row>
  160.       </Col>
  161.       <Col resizable class="demo-col-center-content" style="min-width: 50px">Right</Col>
  162.     </Row>
  163.   </Block>
  164. </Page>
  167. <style>
  168.   :global(.grid-demo div[class*="col"]) {
  169.     background: #fff;
  170.     text-align: center;
  171.     color: #000;
  172.     border: 1px solid #ddd;
  173.     padding: 5px;
  174.     margin-bottom: 15px;
  175.     font-size: 12px;
  176.   }
  177.   :global(.grid-resizable-demo) {
  178.     --f7-grid-row-gap: 16px;
  179.   }
  180.   :global(.grid-resizable-demo div[class*="col"]) {
  181.     margin-bottom: 0;
  182.   }
  183.   :global(.grid-resizable-demo .demo-col-center-content) {
  184.     display: flex;
  185.     align-items: center;
  186.     justify-content: center;
  187.   }
  188. </style>
  189. <script>
  190.   import {Page, Navbar, Block, BlockTitle, Row, Col, BlockHeader} from 'framework7-svelte';
  191. </script>

← Gauge

Icon →