Grid / Layout Grid - 图1

Grid Vue Component

Grid Vue component represents Framework7’s Layout Grid.

Grid Components

There are following components included:

  • f7-row - grid row
  • f7-col - grid column (cell)

Grid Properties

PropTypeDefaultDescription
<f7-row> properties
no-gapbooleanfalseRemoves spacing between columns
tagstringdivDefines which tag must be used to render row element
resizablebooleanfalseMakes row resizable
resizable-absolutebooleanfalseEnables absolute resizing (in px)
resizable-fixedbooleanfalseKeeps resizable row in fixed size (not resizable)
resizable-handlerbooleantrueAdds resize handler element (between rows) to resize them
<f7-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
resizable-absolutebooleanfalseEnables absolute resizing (in px)
resizable-fixedbooleanfalseKeeps resizable column in fixed size (not resizable)
resizable-handlerbooleantrueAdds resize handler element (between columns) to resize them

Grid Events

EventDescription
<f7-row> events
grid:resizeEvent will be triggered on resizable grid row resize
<f7-col> events
grid:resizeEvent will be triggered on resizable grid column resize

Examples

  1. <f7-block>
  2. <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>
  3. </f7-block>
  4. <f7-block-title>Columns with gap</f7-block-title>
  5. <f7-block>
  6. <f7-row>
  7. <f7-col>50% (.col)</f7-col>
  8. <f7-col>50% (.col)</f7-col>
  9. </f7-row>
  10. <f7-row>
  11. <f7-col>25% (.col)</f7-col>
  12. <f7-col>25% (.col)</f7-col>
  13. <f7-col>25% (.col)</f7-col>
  14. <f7-col>25% (.col)</f7-col>
  15. </f7-row>
  16. <f7-row>
  17. <f7-col>33% (.col)</f7-col>
  18. <f7-col>33% (.col)</f7-col>
  19. <f7-col>33% (.col)</f7-col>
  20. </f7-row>
  21. <f7-row>
  22. <f7-col>20% (.col)</f7-col>
  23. <f7-col>20% (.col)</f7-col>
  24. <f7-col>20% (.col)</f7-col>
  25. <f7-col>20% (.col)</f7-col>
  26. <f7-col>20% (.col)</f7-col>
  27. </f7-row>
  28. <f7-row>
  29. <f7-col width="33">33% (.col-33)</f7-col>
  30. <f7-col width="66">66% (.col-66)</f7-col>
  31. </f7-row>
  32. <f7-row>
  33. <f7-col width="25">25% (.col-25)</f7-col>
  34. <f7-col width="25">25% (.col-25)</f7-col>
  35. <f7-col width="50">50% (.col-50)</f7-col>
  36. </f7-row>
  37. <f7-row>
  38. <f7-col width="75">75% (.col-75)</f7-col>
  39. <f7-col width="25">25% (.col-25)</f7-col>
  40. </f7-row>
  41. <f7-row>
  42. <f7-col width="80">80% (.col-80)</f7-col>
  43. <f7-col width="20">20% (.col-20)</f7-col>
  44. </f7-row>
  45. </f7-block>
  46. <f7-block-title>No gap between columns</f7-block-title>
  47. <f7-block>
  48. <f7-row no-gap>
  49. <f7-col>50% (.col)</f7-col>
  50. <f7-col>50% (.col)</f7-col>
  51. </f7-row>
  52. <f7-row no-gap>
  53. <f7-col>25% (.col)</f7-col>
  54. <f7-col>25% (.col)</f7-col>
  55. <f7-col>25% (.col)</f7-col>
  56. <f7-col>25% (.col)</f7-col>
  57. </f7-row>
  58. <f7-row no-gap>
  59. <f7-col>33% (.col)</f7-col>
  60. <f7-col>33% (.col)</f7-col>
  61. <f7-col>33% (.col)</f7-col>
  62. </f7-row>
  63. <f7-row no-gap>
  64. <f7-col>20% (.col)</f7-col>
  65. <f7-col>20% (.col)</f7-col>
  66. <f7-col>20% (.col)</f7-col>
  67. <f7-col>20% (.col)</f7-col>
  68. <f7-col>20% (.col)</f7-col>
  69. </f7-row>
  70. <f7-row no-gap>
  71. <f7-col width="33">33% (.col-33)</f7-col>
  72. <f7-col width="66">66% (.col-66)</f7-col>
  73. </f7-row>
  74. <f7-row no-gap>
  75. <f7-col width="25">25% (.col-25)</f7-col>
  76. <f7-col width="25">25% (.col-25)</f7-col>
  77. <f7-col width="50">50% (.col-50)</f7-col>
  78. </f7-row>
  79. <f7-row no-gap>
  80. <f7-col width="75">75% (.col-75)</f7-col>
  81. <f7-col width="25">25% (.col-25)</f7-col>
  82. </f7-row>
  83. <f7-row no-gap>
  84. <f7-col width="80">80% (.col-80)</f7-col>
  85. <f7-col width="20">20% (.col-20)</f7-col>
  86. </f7-row>
  87. </f7-block>
  88. <f7-block-title>Nested</f7-block-title>
  89. <f7-block>
  90. <f7-row>
  91. <f7-col>50% (.col)
  92. <f7-row>
  93. <f7-col>50% (.col)</f7-col>
  94. <f7-col>50% (.col)</f7-col>
  95. </f7-row>
  96. </f7-col>
  97. <f7-col>50% (.col)
  98. <f7-row>
  99. <f7-col width="33">33% (.col-33)</f7-col>
  100. <f7-col width="66">66% (.col-66)</f7-col>
  101. </f7-row>
  102. </f7-col>
  103. </f7-row>
  104. </f7-block>
  105. <f7-block-title>Responsive Grid</f7-block-title>
  106. <f7-block>
  107. <p>Grid cells have different size on Phone/Tablet</p>
  108. <f7-row>
  109. <f7-col width="100" medium="50">.col-100.tablet-50</f7-col>
  110. <f7-col width="100" medium="50">.col-100.tablet-50</f7-col>
  111. </f7-row>
  112. <f7-row>
  113. <f7-col width="50" medium="25">.col-50.tablet-25</f7-col>
  114. <f7-col width="50" medium="25">.col-50.tablet-25</f7-col>
  115. <f7-col width="50" medium="25">.col-50.tablet-25</f7-col>
  116. <f7-col width="50" medium="25">.col-50.tablet-25</f7-col>
  117. </f7-row>
  118. <f7-row>
  119. <f7-col width="100" medium="40">.col-100.tablet-40</f7-col>
  120. <f7-col width="50" medium="60">.col-50.tablet-60</f7-col>
  121. <f7-col width="50" medium="66">.col-50.tablet-66</f7-col>
  122. <f7-col width="100" medium="33">.col-100.tablet-33</f7-col>
  123. </f7-row>
  124. </f7-block>
  125. <f7-block-title>Resizable Cols</f7-block-title>
  126. <f7-block class="grid-resizable-demo">
  127. <f7-row>
  128. <f7-col resizable style="min-width: 20px">1</f7-col>
  129. <f7-col resizable style="min-width: 20px">2</f7-col>
  130. <f7-col resizable style="min-width: 20px">3</f7-col>
  131. </f7-row>
  132. </f7-block>
  133. <f7-block-title>Resizable Fixed Col</f7-block-title>
  134. <f7-block-header>2nd column has fixed size</f7-block-header>
  135. <f7-block class="grid-resizable-demo">
  136. <f7-row>
  137. <f7-col resizable style="min-width: 20px">1</f7-col>
  138. <f7-col resizable resizable-fixed style="min-width: 20px">2</f7-col>
  139. <f7-col resizable style="min-width: 20px">3</f7-col>
  140. </f7-row>
  141. </f7-block>
  142. <f7-block-title>Resizable Grid</f7-block-title>
  143. <f7-block class="grid-resizable-demo">
  144. <f7-row class="align-items-stretch" style="height: 300px">
  145. <f7-col resizable class="demo-col-center-content" style="min-width: 50px">Left</f7-col>
  146. <f7-col resizable class="display-flex flex-direction-column" style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
  147. <f7-row resizable style="height: 50%; min-height: 50px">
  148. <f7-col class="demo-col-center-content" style="height: 100%">Center Top</f7-col>
  149. </f7-row>
  150. <f7-row resizable style="height: 50%; min-height: 50px">
  151. <f7-col class="demo-col-center-content" style="height: 100%">Center Bottom</f7-col>
  152. </f7-row>
  153. </f7-col>
  154. <f7-col resizable class="demo-col-center-content" style="min-width: 50px">Right</f7-col>
  155. </f7-row>
  156. </f7-block>

← Gauge

Icon →