from nicegui import app, ui
ui.add_body_html('''
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script defer src="https://unpkg.com/element-plus"></script>
''')
app.config.vue_config_script += '''
app.use(ElementPlus);
'''
SHARE = """
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="m679.872 348.8-301.76 188.608a127.8 127.8 0 0 1 5.12 52.16l279.936 104.96a128 128 0 1 1-22.464 59.904l-279.872-104.96a128 128 0 1 1-16.64-166.272l301.696-188.608a128 128 0 1 1 33.92 54.272z"></path></svg>
"""
TURNOFF = """
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M329.956 257.138a254.862 254.862 0 0 0 0 509.724h364.088a254.862 254.862 0 0 0 0-509.724zm0-72.818h364.088a327.68 327.68 0 1 1 0 655.36H329.956a327.68 327.68 0 1 1 0-655.36"></path><path fill="currentColor" d="M329.956 621.227a109.227 109.227 0 1 0 0-218.454 109.227 109.227 0 0 0 0 218.454m0 72.817a182.044 182.044 0 1 1 0-364.088 182.044 182.044 0 0 1 0 364.088"></path></svg>
"""
SWITCH = """
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M118.656 438.656a32 32 0 0 1 0-45.248L416 96l4.48-3.776A32 32 0 0 1 461.248 96l3.712 4.48a32.064 32.064 0 0 1-3.712 40.832L218.56 384H928a32 32 0 1 1 0 64H141.248a32 32 0 0 1-22.592-9.344M64 608a32 32 0 0 1 32-32h786.752a32 32 0 0 1 22.656 54.592L608 928l-4.48 3.776a32.064 32.064 0 0 1-40.832-49.024L805.632 640H96a32 32 0 0 1-32-32"></path></svg>
"""
with ui.row():
ui.markdown("##### 不同颜色的按钮：")
with ui.element('el-button').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('type="primary"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('type="success"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('type="info"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('type="warning"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('type="danger"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.row():
ui.markdown("##### 带图标+文字按钮：")
ui.link('图标合集', 'https://element-plus.org/zh-CN/component/icon#icon-collection')
with ui.element('el-button').props('type="danger"').on('click', lambda: ui.notify('Hi!')):
with ui.element('el-icon').props('size="18"'):
ui.html(SHARE, sanitize=False).style('margin-right:5px')
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('type="warning"').on('click', lambda: ui.notify('Hi!')):
with ui.element('el-icon').props('size="18"'):
ui.html(TURNOFF, sanitize=False).style('margin-right:5px')
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('type="info"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-icon').props('size="18"'):
ui.html(SWITCH, sanitize=False).style('margin-left:8px')
with ui.element('el-button').props('type="success"').on('click', lambda: ui.notify('Hi!')):
with ui.element('el-icon').props('size="18"'):
ui.html(TURNOFF, sanitize=False).style('margin-right:5px')
ui.html('Element Plus button', sanitize=False)
with ui.element('el-icon').props('size="18"'):
ui.html(SWITCH, sanitize=False).style('margin-left:8px')
with ui.row():
ui.markdown("##### plain样式按钮：")
with ui.element('el-button').props('plain').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('plain').props('type="primary"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('plain').props('type="success"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('plain').props('type="info"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('plain').props('type="warning"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('plain').props('type="danger"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.row():
ui.markdown("##### round样式按钮：")
with ui.element('el-button').props('round').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('round').props('type="primary"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('round').props('type="success"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('round').props('type="info"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('round').props('type="warning"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.row():
ui.markdown("##### 图标按钮：")
with ui.element('el-button').props('type="info"').props('circle').on('click', lambda: ui.notify('Hi!')):
with ui.element('el-icon').props('size="18"'):
ui.html(SHARE, sanitize=False)
with ui.element('el-button').props('type="primary"').props('circle').on('click', lambda: ui.notify('Hi!')):
with ui.element('el-icon').props('size="18"'):
ui.html(TURNOFF, sanitize=False)
with ui.element('el-button').props('type="danger"').props('circle').on('click', lambda: ui.notify('Hi!')):
with ui.element('el-icon').props('size="18"'):
ui.html(SWITCH, sanitize=False)
with ui.row():
ui.markdown("##### 禁用按钮：")
with ui.element('el-button').props('disabled').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('disabled').props('type="primary"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.row():
ui.markdown("##### 链接按钮：")
with ui.element('el-button').props('link').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('link').props('type="primary"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.row():
ui.markdown("##### 按钮组：")
with ui.element('el-button-group'):
with ui.element('el-button').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('type="primary"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.row():
ui.markdown("##### 不同大小按钮：")
with ui.element('el-button').props('type="primary"').props('size="small"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('type="info"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.element('el-button').props('type="success"').props('size="large"').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
with ui.row():
ui.markdown("##### loading按钮：")
with ui.element('el-button').props('loading').on('click', lambda: ui.notify('Hi!')):
ui.html('Element Plus button', sanitize=False)
async def change_loading(bt,text):
import asyncio
# 设置为加载状态
bt.props(":loading=true")
# 修改按钮文本为"加载中..."
text.content = "加载中..."
await asyncio.sleep(5)
# 取消加载状态
bt.props(":loading=false")
# 修改按钮文本为"点击后loading 5s"
text.content = "点击后loading 5s"
# 设置按钮文案
with ui.element('el-button').props('type="primary"') as f:
bt_text_element = ui.html('点击后loading 5s', sanitize=False)
# 绑定点击事件
f.on('click', lambda: change_loading(f,bt_text_element))
ui.run(port=8888)
