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

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
width number string auto Column width. Check available Column Sizes
xsmall number Column width when app width >= 480px
small number Column width when app width >= 568px
medium number Column width when app width >= 768px
large number Column width when app width >= 1024px
xlarge number 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

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>

5. <f7-block-title>Columns with gap</f7-block-title>
6. <f7-block>
7. <f7-row>
8. <f7-col>50% (.col)</f7-col>
9. <f7-col>50% (.col)</f7-col>
10. </f7-row>
11. <f7-row>
12. <f7-col>25% (.col)</f7-col>
13. <f7-col>25% (.col)</f7-col>
14. <f7-col>25% (.col)</f7-col>
15. <f7-col>25% (.col)</f7-col>
16. </f7-row>
17. <f7-row>
18. <f7-col>33% (.col)</f7-col>
19. <f7-col>33% (.col)</f7-col>
20. <f7-col>33% (.col)</f7-col>
21. </f7-row>
22. <f7-row>
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-col>20% (.col)</f7-col>
28. </f7-row>
29. <f7-row>
30. <f7-col width="33">33% (.col-33)</f7-col>
31. <f7-col width="66">66% (.col-66)</f7-col>
32. </f7-row>
33. <f7-row>
34. <f7-col width="25">25% (.col-25)</f7-col>
35. <f7-col width="25">25% (.col-25)</f7-col>
36. <f7-col width="50">50% (.col-50)</f7-col>
37. </f7-row>
38. <f7-row>
39. <f7-col width="75">75% (.col-75)</f7-col>
40. <f7-col width="25">25% (.col-25)</f7-col>
41. </f7-row>
42. <f7-row>
43. <f7-col width="80">80% (.col-80)</f7-col>
44. <f7-col width="20">20% (.col-20)</f7-col>
45. </f7-row>
46. </f7-block>

48. <f7-block-title>No gap between columns</f7-block-title>
49. <f7-block>
50. <f7-row no-gap>
51. <f7-col>50% (.col)</f7-col>
52. <f7-col>50% (.col)</f7-col>
53. </f7-row>
54. <f7-row no-gap>
55. <f7-col>25% (.col)</f7-col>
56. <f7-col>25% (.col)</f7-col>
57. <f7-col>25% (.col)</f7-col>
58. <f7-col>25% (.col)</f7-col>
59. </f7-row>
60. <f7-row no-gap>
61. <f7-col>33% (.col)</f7-col>
62. <f7-col>33% (.col)</f7-col>
63. <f7-col>33% (.col)</f7-col>
64. </f7-row>
65. <f7-row no-gap>
66. <f7-col>20% (.col)</f7-col>
67. <f7-col>20% (.col)</f7-col>
68. <f7-col>20% (.col)</f7-col>
69. <f7-col>20% (.col)</f7-col>
70. <f7-col>20% (.col)</f7-col>
71. </f7-row>
72. <f7-row no-gap>
73. <f7-col width="33">33% (.col-33)</f7-col>
74. <f7-col width="66">66% (.col-66)</f7-col>
75. </f7-row>
76. <f7-row no-gap>
77. <f7-col width="25">25% (.col-25)</f7-col>
78. <f7-col width="25">25% (.col-25)</f7-col>
79. <f7-col width="50">50% (.col-50)</f7-col>
80. </f7-row>
81. <f7-row no-gap>
82. <f7-col width="75">75% (.col-75)</f7-col>
83. <f7-col width="25">25% (.col-25)</f7-col>
84. </f7-row>
85. <f7-row no-gap>
86. <f7-col width="80">80% (.col-80)</f7-col>
87. <f7-col width="20">20% (.col-20)</f7-col>
88. </f7-row>
89. </f7-block>

91. <f7-block-title>Nested</f7-block-title>
92. <f7-block>
93. <f7-row>
94. <f7-col>50% (.col)
95. <f7-row>
96. <f7-col>50% (.col)</f7-col>
97. <f7-col>50% (.col)</f7-col>
98. </f7-row>
99. </f7-col>
100. <f7-col>50% (.col)
101. <f7-row>
102. <f7-col width="33">33% (.col-33)</f7-col>
103. <f7-col width="66">66% (.col-66)</f7-col>
104. </f7-row>
105. </f7-col>
106. </f7-row>
107. </f7-block>

109. <f7-block-title>Responsive Grid</f7-block-title>
110. <f7-block>
111. <p>Grid cells have different size on Phone/Tablet</p>
112. <f7-row>
113. <f7-col width="100" medium="50">.col-100.tablet-50</f7-col>
114. <f7-col width="100" medium="50">.col-100.tablet-50</f7-col>
115. </f7-row>
116. <f7-row>
117. <f7-col width="50" medium="25">.col-50.tablet-25</f7-col>
118. <f7-col width="50" medium="25">.col-50.tablet-25</f7-col>
119. <f7-col width="50" medium="25">.col-50.tablet-25</f7-col>
120. <f7-col width="50" medium="25">.col-50.tablet-25</f7-col>
121. </f7-row>
122. <f7-row>
123. <f7-col width="100" medium="40">.col-100.tablet-40</f7-col>
124. <f7-col width="50" medium="60">.col-50.tablet-60</f7-col>
125. <f7-col width="50" medium="66">.col-50.tablet-66</f7-col>
126. <f7-col width="100" medium="33">.col-100.tablet-33</f7-col>
127. </f7-row>
128. </f7-block>

130. <f7-block-title>Resizable Cols</f7-block-title>
131. <f7-block class="grid-resizable-demo">
132. <f7-row>
133. <f7-col resizable style="min-width: 20px">1</f7-col>
134. <f7-col resizable style="min-width: 20px">2</f7-col>
135. <f7-col resizable style="min-width: 20px">3</f7-col>
136. </f7-row>
137. </f7-block>

139. <f7-block-title>Resizable Fixed Col</f7-block-title>
140. <f7-block-header>2nd column has fixed size</f7-block-header>
141. <f7-block class="grid-resizable-demo">
142. <f7-row>
143. <f7-col resizable style="min-width: 20px">1</f7-col>
144. <f7-col resizable resizable-fixed style="min-width: 20px">2</f7-col>
145. <f7-col resizable style="min-width: 20px">3</f7-col>
146. </f7-row>
147. </f7-block>

149. <f7-block-title>Resizable Grid</f7-block-title>
150. <f7-block class="grid-resizable-demo">
151. <f7-row class="align-items-stretch" style="height: 300px">
152. <f7-col resizable class="demo-col-center-content" style="min-width: 50px">Left</f7-col>
153. <f7-col resizable class="display-flex flex-direction-column" style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
154. <f7-row resizable style="height: 50%; min-height: 50px">
155. <f7-col class="demo-col-center-content" style="height: 100%">Center Top</f7-col>
156. </f7-row>
157. <f7-row resizable style="height: 50%; min-height: 50px">
158. <f7-col class="demo-col-center-content" style="height: 100%">Center Bottom</f7-col>
159. </f7-row>
160. </f7-col>
161. <f7-col resizable class="demo-col-center-content" style="min-width: 50px">Right</f7-col>
162. </f7-row>
163. </f7-block>

← Gauge

Icon →