Lines Matching refs:grid

4 栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。具体请参考[Grid-container](../reference/apis-arkui/arkui-js/js-compo…
7 ## 创建grid-container组件
9 在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/apis-arkui/arkui-js/js-compon…
15   <grid-container id="mygrid" gutter="20px" style="background-color: pink;">
16 …<grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;ma…
17       10%;"></grid-row>
18 …<grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"…
19 …<grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"…
20   </grid-container>
40 > grid-container仅支持grid-row为子组件。
45 grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSi…
51   <grid-container id="mygrid" gutter="20px" style="background-color: pink;padding-top: 100px;" 
53 …<grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;ma…
54       40%;"></grid-row>
55 …<grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;ma…
56       25%;"></grid-row>
57 …<grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;ma…
58       10%;"></grid-row>
59 …<grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"…
60   </grid-container>
112 ## 添加grid-col
114 创建grid-container组件并添加grid-row，在grid-row组件内添加grid-col组件形成布局。
120 …<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getCol…
121 …<grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%…
122       <grid-col span="0">
126       </grid-col>
127     </grid-row>
128 …<grid-row style="height:500px;justify-content:space-around;background-color: #3b55ef;width: 100%;">
129       <grid-col span="0" style="width: 20%;">
133       </grid-col>
134       <grid-col span="0" style="background-color:orange;width: 80%;">
138       </grid-col>
139     </grid-row>
140 …<grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%…
141       <grid-col style="background-color:#c075ef;" span="0">
145       </grid-col>
146     </grid-row>
147   </grid-container>
172 > grid-row仅支持grid-col为子组件，只能在grid-col组件中添加填充的内容。
184     <grid-container id="mygrid" gutter="20" style="margin: 10px;">
185 …<grid-row style="height:200px;width: 100%;background-color: #e7e7e2;margin-top: 50px; padding: 0px…
186         <grid-col span="0" style="width: 40%;">
190         </grid-col>
191         <grid-col span="0" style="width: 60%;">
195         </grid-col>
196       </grid-row>
197     </grid-container>