NiceGUI 3.0 卡片间距设置

37 阅读1分钟

NiceGUI 3.0 卡片间距

默认:

image.png

设置 加入 gap-0 来控制 gap-1,gap-2

image.png

from nicegui import ui

# 用不同背景色验证间距
with ui.column().classes('bg-blue-100 p-4 gap-0 '):
    ui.label('无间距的卡片:').classes('text-red-500')
    
    # 卡片1
    with ui.card().classes('bg-red-200 space-y-0'):
        ui.label('卡片1')
    
    # 卡片2
    with ui.card().classes('bg-green-200 space-y-0'):
        ui.label('卡片2')
    
    # 卡片3
    with ui.card().classes('bg-yellow-200 m-0'):
        ui.label('卡片3')




# 所有可能的间距重置
with ui.column().classes('''
    m-0      # 移除外边距
    p-0      # 移除内边距
    gap-0    # 移除子元素间距
    space-y-0 # 另一种控制子元素间距的方式
'''):
    ui.label('完全无间距')
    ui.button('按钮')
    ui.card()
ui.run()