图
from nicegui import ui
from nicegui import events
import asyncio
class IconDemo:
def __init__(self):
self.favorite_count = 0
self.like_count = 0
self.notification_count = 3
self.is_playing = False
def create_header_icons(self):
"""创建顶部导航图标"""
with ui.header().classes('bg-blue-800 text-white p-4 shadow-lg'):
with ui.row().classes('w-full justify-between items-center'):
with ui.row().classes('items-center gap-4'):
ui.icon('menu', size='lg').classes('cursor-pointer hover:bg-blue-700 p-1 rounded')
ui.icon('home', size='lg').classes('cursor-pointer hover:bg-blue-700 p-1 rounded')
with ui.row().classes('items-center bg-white rounded-lg px-3 py-1'):
ui.icon('search', color='gray').classes('mr-2')
ui.input(placeholder='搜索...').props('borderless dense')
with ui.row().classes('items-center gap-4'):
with ui.element('div').classes('relative cursor-pointer'):
ui.icon('notifications', size='lg').classes('hover:bg-blue-700 p-1 rounded')
if self.notification_count > 0:
ui.badge(str(self.notification_count), color='red').classes('absolute -top-2 -right-2')
ui.icon('shopping_cart', size='lg').classes('cursor-pointer hover:bg-blue-700 p-1 rounded')
ui.icon('account_circle', size='lg').classes('cursor-pointer hover:bg-blue-700 p-1 rounded')
def create_sidebar_icons(self):
"""创建侧边栏图标导航"""
with ui.column().classes('w-64 bg-gray-100 h-screen p-4'):
ui.label('导航菜单').classes('text-lg font-bold mb-4')
menu_items = [
('dashboard', '仪表板', True),
('bar_chart', '数据分析', False),
('folder', '文件管理', False),
('email', '消息中心', False),
('settings', '系统设置', False),
('people', '用户管理', False),
('security', '权限管理', False),
('help', '帮助中心', False)
]
for icon, text, active in menu_items:
with ui.row().classes(f'w-full p-3 rounded-lg {"bg-blue-100 text-blue-600" if active else "hover:bg-gray-200"} cursor-pointer items-center gap-3'):
ui.icon(icon, size='md')
ui.label(text)
def create_media_player(self):
"""创建媒体播放器"""
with ui.card().classes('w-full mt-6'):
ui.label('媒体播放器').classes('text-h6 mb-4')
with ui.row().classes('w-full items-center justify-between p-4'):
with ui.column().classes('items-start'):
ui.label('夏日微风').classes('text-lg font-bold')
ui.label('轻音乐专辑').classes('text-gray-600')
with ui.row().classes('items-center gap-2'):
ui.icon('skip_previous', size='lg').classes('cursor-pointer hover:bg-gray-200 p-2 rounded-full')
self.play_icon = ui.icon('play_arrow', size='xl')
self.play_icon.classes('cursor-pointer bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600')
self.play_icon.on('click', self.toggle_play)
ui.icon('skip_next', size='lg').classes('cursor-pointer hover:bg-gray-200 p-2 rounded-full')
with ui.row().classes('items-center gap-2'):
ui.icon('volume_up', size='sm')
ui.slider(min=0, max=100, value=80).classes('w-24')
with ui.column().classes('flex-1'):
ui.linear_progress(value=0.4).classes('w-full')
with ui.row().classes('w-full justify-between text-sm text-gray-600'):
ui.label('02:30')
ui.label('06:15')
def create_file_manager(self):
"""创建文件管理器"""
with ui.card().classes('w-full mt-6'):
with ui.row().classes('w-full justify-between items-center'):
ui.label('文件管理器').classes('text-h6')
with ui.row().classes('gap-2'):
ui.icon('create_new_folder', size='sm').classes('cursor-pointer hover:bg-gray-200 p-1 rounded')
ui.icon('file_upload', size='sm').classes('cursor-pointer hover:bg-gray-200 p-1 rounded')
ui.icon('view_list', size='sm').classes('cursor-pointer hover:bg-gray-200 p-1 rounded')
ui.icon('refresh', size='sm').classes('cursor-pointer hover:bg-gray-200 p-1 rounded')
files = [
('description', '项目报告.pdf', '2.3 MB', '昨天'),
('folder', '设计资源', '--', '2天前'),
('image', '产品截图.png', '1.1 MB', '3天前'),
('code', 'main.py', '45 KB', '本周'),
('table_chart', '数据统计.xlsx', '890 KB', '上周')
]
for icon, name, size, date in files:
with ui.row().classes('w-full p-3 border-b items-center gap-4 hover:bg-gray-50'):
ui.icon(icon, size='md', color='blue' if icon == 'folder' else 'gray')
with ui.column().classes('flex-1'):
ui.label(name).classes('font-medium')
ui.label(size).classes('text-gray-600 text-sm')
ui.label(date).classes('text-gray-500 text-sm')
ui.icon('more_vert').classes('cursor-pointer')
def create_social_widget(self):
"""创建社交互动组件"""
with ui.card().classes('w-full mt-6'):
ui.label('社交互动').classes('text-h6 mb-4')
with ui.column().classes('w-full gap-4'):
with ui.row().classes('w-full items-center gap-3'):
ui.avatar('P', color='blue')
with ui.column().classes('flex-1'):
ui.label('张三').classes('font-bold')
ui.label('2小时前').classes('text-gray-600 text-sm')
ui.icon('more_horiz').classes('cursor-pointer')
ui.label('今天发现了一个很棒的Python库 - NiceGUI！用它来构建Web界面真的太方便了！').classes('text-lg')
with ui.row().classes('w-full justify-between pt-4'):
with ui.row().classes('items-center gap-1 cursor-pointer'):
self.like_icon = ui.icon('thumb_up', color='gray')
self.like_count_label = ui.label(str(self.like_count))
self.like_icon.on('click', self.toggle_like)
with ui.row().classes('items-center gap-1 cursor-pointer'):
self.favorite_icon = ui.icon('favorite_border', color='gray')
self.favorite_count_label = ui.label(str(self.favorite_count))
self.favorite_icon.on('click', self.toggle_favorite)
with ui.row().classes('items-center gap-1 cursor-pointer'):
ui.icon('share', color='gray')
ui.label('分享')
with ui.row().classes('items-center gap-1 cursor-pointer'):
ui.icon('comment', color='gray')
ui.label('评论')
def create_weather_widget(self):
"""创建天气组件"""
with ui.card().classes('w-full mt-6'):
with ui.row().classes('w-full justify-between items-center'):
ui.label('天气预报').classes('text-h6')
ui.icon('refresh').classes('cursor-pointer')
with ui.row().classes('w-full justify-around items-center p-4'):
with ui.column().classes('items-center'):
ui.icon('wb_sunny', size='xl', color='orange')
ui.label('25°C').classes('text-2xl font-bold')
ui.label('晴朗').classes('text-gray-600')
with ui.column().classes('gap-2'):
with ui.row().classes('items-center gap-2'):
ui.icon('air', size='sm', color='blue')
ui.label('湿度: 65%')
with ui.row().classes('items-center gap-2'):
ui.icon('water_drop', size='sm', color='blue')
ui.label('风速: 3级')
with ui.row().classes('items-center gap-2'):
ui.icon('device_thermostat', size='sm', color='red')
ui.label('体感: 26°C')
def create_system_monitor(self):
"""创建系统监控面板"""
with ui.card().classes('w-full mt-6'):
ui.label('系统监控').classes('text-h6 mb-4')
with ui.grid(columns=2).classes('w-full gap-4'):
with ui.card().classes('p-4'):
with ui.row().classes('items-center gap-3'):
ui.icon('memory', size='lg', color='blue')
with ui.column():
ui.label('CPU').classes('font-medium')
ui.label('45%').classes('text-lg text-green-600')
ui.linear_progress(value=0.45).classes('w-full mt-2')
with ui.card().classes('p-4'):
with ui.row().classes('items-center gap-3'):
ui.icon('storage', size='lg', color='green')
with ui.column():
ui.label('内存').classes('font-medium')
ui.label('68%').classes('text-lg text-orange-600')
ui.linear_progress(value=0.68).classes('w-full mt-2')
with ui.card().classes('p-4'):
with ui.row().classes('items-center gap-3'):
ui.icon('hard_drive', size='lg', color='purple')
with ui.column():
ui.label('磁盘').classes('font-medium')
ui.label('82%').classes('text-lg text-red-600')
ui.linear_progress(value=0.82).classes('w-full mt-2')
with ui.card().classes('p-4'):
with ui.row().classes('items-center gap-3'):
ui.icon('wifi', size='lg', color='teal')
with ui.column():
ui.label('网络').classes('font-medium')
ui.label('良好').classes('text-lg text-green-600')
ui.linear_progress(value=0.9).classes('w-full mt-2')
def create_icon_gallery(self):
"""创建图标库展示"""
with ui.card().classes('w-full mt-6'):
ui.label('图标库').classes('text-h6 mb-4')
categories = {
'常用操作': ['add', 'edit', 'delete', 'save', 'cancel', 'refresh', 'download', 'upload'],
'导航菜单': ['home', 'menu', 'dashboard', 'apps', 'settings', 'account_circle'],
'状态指示': ['check_circle', 'error', 'warning', 'info', 'help', 'notifications'],
'媒体控制': ['play_arrow', 'pause', 'stop', 'volume_up', 'mic', 'headset'],
'文件类型': ['folder', 'description', 'image', 'code', 'table_chart'],
'社交互动': ['thumb_up', 'favorite', 'share', 'comment', 'chat'],
'工具设备': ['build', 'computer', 'smartphone', 'print', 'cloud'],
'交通出行': ['directions_car', 'flight', 'train', 'directions_walk']
}
for category, icons in categories.items():
ui.label(category).classes('text-lg font-medium mt-4 mb-2 text-blue-600')
with ui.row().classes('flex-wrap gap-4 p-4 bg-gray-50 rounded-lg'):
for icon_name in icons:
with ui.column().classes('items-center cursor-pointer hover:bg-white p-2 rounded'):
ui.icon(icon_name, size='md')
ui.label(icon_name).classes('text-xs text-gray-600 mt-1')
def toggle_play(self):
"""切换播放状态"""
self.is_playing = not self.is_playing
if self.is_playing:
self.play_icon.props('name=pause')
else:
self.play_icon.props('name=play_arrow')
def toggle_like(self):
"""切换点赞状态"""
if self.like_icon._props.get('color') == 'gray':
self.like_icon.props('color=blue')
self.like_count += 1
else:
self.like_icon.props('color=gray')
self.like_count -= 1
self.like_count_label.text = str(self.like_count)
def toggle_favorite(self):
"""切换收藏状态"""
if self.favorite_icon._props.get('name') == 'favorite_border':
self.favorite_icon.props('name=favorite color=red')
self.favorite_count += 1
else:
self.favorite_icon.props('name=favorite_border color=gray')
self.favorite_count -= 1
self.favorite_count_label.text = str(self.favorite_count)
def create_demo(self):
"""创建完整演示"""
ui.label('NiceGUI 3.0 图标库完整演示').classes('text-h4 text-center my-6 text-blue-800')
self.create_header_icons()
with ui.row().classes('w-full'):
with ui.column().classes('w-64'):
self.create_sidebar_icons()
with ui.column().classes('flex-1 p-6'):
self.create_media_player()
self.create_file_manager()
self.create_social_widget()
with ui.row().classes('w-full gap-6'):
with ui.column().classes('flex-1'):
self.create_weather_widget()
with ui.column().classes('flex-1'):
self.create_system_monitor()
self.create_icon_gallery()
demo = IconDemo()
demo.create_demo()
ui.run(title='NiceGUI 图标库演示', port=8080)
