- 问题:
用nicegui开发web应用,如何设置一行中多列的宽度?
- 核心概念:
“Grid Element”提供了网格布局,也就是把页面横向平均分成多少列, 这是最直接、最省事、最符合人的感官的布局方式。
“w-full”宽度方面,容器占用设置成最大宽度。
“col-span-[X]”设置“列”占用了多少个网格。
3.示例代码:
- #1.将页面平均分为“12”列,并设置“w-full”占满整个网页
- with ui.grid(columns=12).classes("w-full bg-grey-12"):
- #2.col-span-2,添加一个占用“2”列宽度的column
- with ui.column().classes("col-span-2 bg-red-6 col-grow"):
- ui.label("2")
- #3.col-span-10,添加一个占用“10”列宽度的column
- with ui.column().classes("col-span-10 bg-blue-6 "):
- ui.label("10")
- #3.col-span-1,添加一个占用“1”列宽度的column,由于上面已经占满12列,所以这个列被自动换行
- with ui.column().classes("col-span-1 bg-blue-6 "):
- ui.label("1")
4.代码效果及说明
5.官方文档参考:
nicegui官方文档:ui.grid | NiceGUI
关于联系方式,可以搜索“敲键盘的生活”。有需要想深入讨论的可以线上交流。
end:关注一下吧~