Grid Vue Component
Grid Vue component represents Framework7's Layout Grid.
Grid Components
There are following components included:
f7-row
- grid rowf7-col
- grid column (cell)
Grid Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-row> properties | |||
no-gap | boolean | false | Removes spacing between columns |
tag | string | div | Defines which tag must be used to render row element |
resizable | boolean | false | Makes row resizable |
resizable-absolute | boolean | false | Enables absolute resizing (in px ) |
resizable-fixed | boolean | false | Keeps resizable row in fixed size (not resizable) |
resizable-handler | boolean | true | Adds resize handler element (between rows) to resize them |
<f7-col> properties | |||
tag | string | div | Defines which tag must be used to render column element |
width | number string | auto | Column width. Check available Column Sizes |
xsmall | number string | Column width when app width >= 480px | |
small | number string | Column width when app width >= 568px | |
medium | number string | Column width when app width >= 768px | |
large | number string | Column width when app width >= 1024px | |
xlarge | number string | Column width when app width >= 1200px | |
resizable | boolean | false | Makes column resizable |
resizable-absolute | boolean | false | Enables absolute resizing (in px ) |
resizable-fixed | boolean | false | Keeps resizable column in fixed size (not resizable) |
resizable-handler | boolean | true | Adds resize handler element (between columns) to resize them |
Grid Events
Event | Description |
---|---|
<f7-row> events | |
grid:resize | Event will be triggered on resizable grid row resize |
<f7-col> events | |
grid:resize | Event will be triggered on resizable grid column resize |
Examples
<f7-block>
<p>Columns within a row are automatically set to have equal width. Otherwise you can define your column with percentage of screen you want.</p>
</f7-block>
<f7-block-title>Columns with gap</f7-block-title>
<f7-block>
<f7-row>
<f7-col>50% (.col)</f7-col>
<f7-col>50% (.col)</f7-col>
</f7-row>
<f7-row>
<f7-col>25% (.col)</f7-col>
<f7-col>25% (.col)</f7-col>
<f7-col>25% (.col)</f7-col>
<f7-col>25% (.col)</f7-col>
</f7-row>
<f7-row>
<f7-col>33% (.col)</f7-col>
<f7-col>33% (.col)</f7-col>
<f7-col>33% (.col)</f7-col>
</f7-row>
<f7-row>
<f7-col>20% (.col)</f7-col>
<f7-col>20% (.col)</f7-col>
<f7-col>20% (.col)</f7-col>
<f7-col>20% (.col)</f7-col>
<f7-col>20% (.col)</f7-col>
</f7-row>
<f7-row>
<f7-col width="33">33% (.col-33)</f7-col>
<f7-col width="66">66% (.col-66)</f7-col>
</f7-row>
<f7-row>
<f7-col width="25">25% (.col-25)</f7-col>
<f7-col width="25">25% (.col-25)</f7-col>
<f7-col width="50">50% (.col-50)</f7-col>
</f7-row>
<f7-row>
<f7-col width="75">75% (.col-75)</f7-col>
<f7-col width="25">25% (.col-25)</f7-col>
</f7-row>
<f7-row>
<f7-col width="80">80% (.col-80)</f7-col>
<f7-col width="20">20% (.col-20)</f7-col>
</f7-row>
</f7-block>
<f7-block-title>No gap between columns</f7-block-title>
<f7-block>
<f7-row no-gap>
<f7-col>50% (.col)</f7-col>
<f7-col>50% (.col)</f7-col>
</f7-row>
<f7-row no-gap>
<f7-col>25% (.col)</f7-col>
<f7-col>25% (.col)</f7-col>
<f7-col>25% (.col)</f7-col>
<f7-col>25% (.col)</f7-col>
</f7-row>
<f7-row no-gap>
<f7-col>33% (.col)</f7-col>
<f7-col>33% (.col)</f7-col>
<f7-col>33% (.col)</f7-col>
</f7-row>
<f7-row no-gap>
<f7-col>20% (.col)</f7-col>
<f7-col>20% (.col)</f7-col>
<f7-col>20% (.col)</f7-col>
<f7-col>20% (.col)</f7-col>
<f7-col>20% (.col)</f7-col>
</f7-row>
<f7-row no-gap>
<f7-col width="33">33% (.col-33)</f7-col>
<f7-col width="66">66% (.col-66)</f7-col>
</f7-row>
<f7-row no-gap>
<f7-col width="25">25% (.col-25)</f7-col>
<f7-col width="25">25% (.col-25)</f7-col>
<f7-col width="50">50% (.col-50)</f7-col>
</f7-row>
<f7-row no-gap>
<f7-col width="75">75% (.col-75)</f7-col>
<f7-col width="25">25% (.col-25)</f7-col>
</f7-row>
<f7-row no-gap>
<f7-col width="80">80% (.col-80)</f7-col>
<f7-col width="20">20% (.col-20)</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Nested</f7-block-title>
<f7-block>
<f7-row>
<f7-col>50% (.col)
<f7-row>
<f7-col>50% (.col)</f7-col>
<f7-col>50% (.col)</f7-col>
</f7-row>
</f7-col>
<f7-col>50% (.col)
<f7-row>
<f7-col width="33">33% (.col-33)</f7-col>
<f7-col width="66">66% (.col-66)</f7-col>
</f7-row>
</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Responsive Grid</f7-block-title>
<f7-block>
<p>Grid cells have different size on Phone/Tablet</p>
<f7-row>
<f7-col width="100" medium="50">.col-100.medium-50</f7-col>
<f7-col width="100" medium="50">.col-100.medium-50</f7-col>
</f7-row>
<f7-row>
<f7-col width="50" medium="25">.col-50.medium-25</f7-col>
<f7-col width="50" medium="25">.col-50.medium-25</f7-col>
<f7-col width="50" medium="25">.col-50.medium-25</f7-col>
<f7-col width="50" medium="25">.col-50.medium-25</f7-col>
</f7-row>
<f7-row>
<f7-col width="100" medium="40">.col-100.medium-40</f7-col>
<f7-col width="50" medium="60">.col-50.medium-60</f7-col>
<f7-col width="50" medium="66">.col-50.medium-66</f7-col>
<f7-col width="100" medium="33">.col-100.medium-33</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Resizable Cols</f7-block-title>
<f7-block class="grid-resizable-demo">
<f7-row>
<f7-col resizable style="min-width: 20px">1</f7-col>
<f7-col resizable style="min-width: 20px">2</f7-col>
<f7-col resizable style="min-width: 20px">3</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Resizable Fixed Col</f7-block-title>
<f7-block-header>2nd column has fixed size</f7-block-header>
<f7-block class="grid-resizable-demo">
<f7-row>
<f7-col resizable style="min-width: 20px">1</f7-col>
<f7-col resizable resizable-fixed style="min-width: 20px">2</f7-col>
<f7-col resizable style="min-width: 20px">3</f7-col>
</f7-row>
</f7-block>
<f7-block-title>Resizable Grid</f7-block-title>
<f7-block class="grid-resizable-demo">
<f7-row class="align-items-stretch" style="height: 300px">
<f7-col resizable class="demo-col-center-content" style="min-width: 50px">Left</f7-col>
<f7-col resizable class="display-flex flex-direction-column" style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
<f7-row resizable style="height: 50%; min-height: 50px">
<f7-col class="demo-col-center-content" style="height: 100%">Center Top</f7-col>
</f7-row>
<f7-row resizable style="height: 50%; min-height: 50px">
<f7-col class="demo-col-center-content" style="height: 100%">Center Bottom</f7-col>
</f7-row>
</f7-col>
<f7-col resizable class="demo-col-center-content" style="min-width: 50px">Right</f7-col>
</f7-row>
</f7-block>