图
代码：
from nicegui import ui
# 设置页面标题
ui.page_title('NiceGUI 3.0 布局演示')
# 1. 头部导航 - ui.header
with ui.header().classes('bg-blue-600 text-white shadow-lg'):
with ui.row().classes('w-full justify-between items-center'):
with ui.row().classes('items-center gap-4'):
ui.icon('menu').on('click', lambda: left_drawer.toggle())
ui.label('NiceGUI 3.0').classes('text-xl font-bold')
with ui.row().classes('items-center gap-2'):
ui.button('通知', icon='notifications', on_click=lambda: ui.notify('新消息!'))
ui.button('设置', icon='settings')
ui.avatar('User', color='primary')
# 2. 左侧抽屉 - ui.left_drawer
with ui.left_drawer().classes('bg-gray-100').props('bordered') as left_drawer:
ui.label('导航菜单').classes('text-lg font-semibold p-4')
ui.separator()
with ui.column().classes('w-full gap-1'):
with ui.link(target='/').classes('w-full'):
with ui.row().classes('w-full items-center gap-3 p-3 hover:bg-blue-100 rounded'):
ui.icon('home')
ui.label('首页')
with ui.link(target='/dashboard').classes('w-full'):
with ui.row().classes('w-full items-center gap-3 p-3 hover:bg-blue-100 rounded'):
ui.icon('dashboard')
ui.label('仪表板')
with ui.link(target='/analytics').classes('w-full'):
with ui.row().classes('w-full items-center gap-3 p-3 hover:bg-blue-100 rounded'):
ui.icon('analytics')
ui.label('分析')
with ui.link(target='/settings').classes('w-full'):
with ui.row().classes('w-full items-center gap-3 p-3 hover:bg-blue-100 rounded'):
ui.icon('settings')
ui.label('设置')
# 3. 右侧抽屉 - ui.right_drawer
with ui.right_drawer().classes('bg-gray-50').props('bordered') as right_drawer:
ui.label('快捷设置').classes('text-lg font-semibold p-4')
ui.separator()
with ui.column().classes('w-full gap-4 p-4'):
ui.label('主题设置')
ui.toggle(['浅色', '深色'], value='浅色')
ui.label('通知偏好')
ui.checkbox('邮件通知')
ui.checkbox('推送通知')
ui.checkbox('短信通知')
ui.button('保存设置', icon='save', color='primary').classes('w-full')
# 4. 粘性元素 - ui.page_sticky
with ui.page_sticky(position='bottom-right').classes('z-50'):
with ui.column().classes('gap-2'):
# 快速操作按钮
ui.button('', icon='keyboard_arrow_up', on_click=lambda: ui.run_javascript('window.scrollTo(0, 0)'))
ui.button('', icon='chat', on_click=lambda: ui.notify('打开聊天'))
ui.button('', icon='help', on_click=lambda: ui.notify('帮助中心'))
# 5. 页面滚动器 - ui.page_scroller
# 注意：page_scroller 通常用于单页应用的导航
# 这里我们模拟一个长页面来演示
# 主内容区域
with ui.column().classes('w-full p-8 max-w-6xl mx-auto gap-8'):
# 英雄区域
with ui.card().classes('w-full p-8 bg-gradient-to-r from-blue-500 to-purple-600 text-white'):
with ui.column().classes('items-center text-center gap-4'):
ui.label('NiceGUI 3.0 布局演示').classes('text-4xl font-bold')
ui.label('探索强大的布局组件').classes('text-xl opacity-90')
ui.button('开始探索', icon='rocket', color='white').classes('text-blue-600')
# 特性卡片区域
ui.label('布局特性').classes('text-2xl font-bold mt-8')
with ui.grid(columns=3).classes('w-full gap-6'):
features = [
('header', '顶部导航', '固定的头部导航栏，包含logo和用户控件'),
('drawer', '侧边抽屉', '可折叠的侧边菜单，支持左右两侧'),
('sticky', '粘性元素', '固定在页面特定位置的浮动元素'),
('scroller', '页面滚动', '平滑的页面滚动和导航'),
('footer', '页脚', '页面底部的信息区域'),
('responsive', '响应式', '完美适配各种屏幕尺寸')
]
for icon, title, description in features:
with ui.card().classes('p-6 hover:shadow-lg transition-shadow'):
with ui.column().classes('items-center text-center gap-3'):
ui.icon(icon).classes('text-4xl text-blue-500')
ui.label(title).classes('text-lg font-semibold')
ui.label(description).classes('text-gray-600 text-sm')
# 长内容区域 - 用于演示滚动
ui.label('滚动演示区域').classes('text-2xl font-bold mt-12')
for i in range(20):
with ui.card().classes('w-full p-6 mb-4'):
with ui.row().classes('items-center gap-4'):
ui.avatar(f'U{i+1}', color=f'{"primary" if i % 3 == 0 else "secondary" if i % 3 == 1 else "accent"}')
with ui.column():
ui.label(f'用户 {i+1}').classes('font-semibold')
ui.label(f'这是第 {i+1} 个内容卡片，用于演示页面滚动效果。').classes('text-gray-600')
if i % 5 == 4: # 每5个卡片添加一个页内锚点
ui.html(f'<div id="section-{(i//5)+1}"></div>',sanitize=False)
with ui.card().classes('w-full p-6 mb-4 bg-yellow-50 border-l-4 border-yellow-400'):
ui.label(f'第 {(i//5)+1} 部分').classes('font-bold text-lg')
# 6. 页脚 - ui.footer
with ui.footer().classes('bg-gray-800 text-white p-8'):
with ui.grid(columns=4).classes('w-full max-w-6xl mx-auto gap-8'):
# 公司信息
with ui.column().classes('gap-3'):
ui.label('NiceGUI').classes('text-xl font-bold')
ui.label('构建漂亮的Python Web应用').classes('text-gray-300')
with ui.row().classes('gap-2'):
ui.button('', icon='facebook').props('flat round')
ui.button('', icon='twitter').props('flat round')
ui.button('', icon='linkedin').props('flat round')
# 产品
with ui.column().classes('gap-3'):
ui.label('产品').classes('font-semibold')
ui.link('特性', '/features')
ui.link('定价', '/pricing')
ui.link('案例', '/cases')
# 支持
with ui.column().classes('gap-3'):
ui.label('支持').classes('font-semibold')
ui.link('文档', '/docs')
ui.link('社区', '/community')
ui.link('联系', '/contact')
# 法律
with ui.column().classes('gap-3'):
ui.label('法律').classes('font-semibold')
ui.link('隐私政策', '/privacy')
ui.link('服务条款', '/terms')
ui.link('Cookie政策', '/cookies')
# 版权信息
with ui.row().classes('w-full justify-center mt-8 pt-4 border-t border-gray-700'):
ui.label('© 2024 NiceGUI. 保留所有权利。').classes('text-gray-400')
# 页面滚动导航演示
def scroll_to_section(section_id):
ui.run_javascript(f"""
document.getElementById('{section_id}').scrollIntoView({{
behavior: 'smooth'
}});
""")
# 添加页面滚动导航
with ui.page_sticky(position='top-left').classes('z-40 ml-4 mt-20'):
with ui.card().classes('p-2'):
with ui.column().classes('gap-1'):
ui.label('快速导航').classes('text-sm font-semibold px-2')
for i in range(1, 5):
ui.button(f'第 {i} 部分', on_click=lambda x=i: scroll_to_section(f'section-{x}')).props('flat dense')
if __name__ in {"__main__", "__mp_main__"}:
ui.run()
注： ui.html(f'
',sanitize=False) ,sanitize=False
