2.nicegui最佳实践之“页面布局”

1. 问题：

用nicegui开发web应用，如何设置一行中多列的宽度？

1. 核心概念：

“Grid Element”提供了网格布局，也就是把页面横向平均分成多少列， 这是最直接、最省事、最符合人的感官的布局方式。

“w-full”宽度方面，容器占用设置成最大宽度。

“col-span-[X]”设置“列”占用了多少个网格。

3.示例代码:

1. #1.将页面平均分为“12”列，并设置“w-full”占满整个网页  
2. with ui.grid(columns=12).classes("w-full bg-grey-12"):  
3.     #2.col-span-2,添加一个占用“2”列宽度的column  
4.     with ui.column().classes("col-span-2 bg-red-6 col-grow"):  
5.         ui.label("2")  
6.     #3.col-span-10,添加一个占用“10”列宽度的column      
7.     with ui.column().classes("col-span-10 bg-blue-6 "):  
8.         ui.label("10")  
9.     #3.col-span-1,添加一个占用“1”列宽度的column，由于上面已经占满12列，所以这个列被自动换行      
10.     with ui.column().classes("col-span-1 bg-blue-6 "):  
11.         ui.label("1")  

4.代码效果及说明

5.官方文档参考:

nicegui官方文档：ui.grid | NiceGUI

关于联系方式，可以搜索“敲键盘的生活”。有需要想深入讨论的可以线上交流。

end:关注一下吧~