NiceGUI之Button操作（ElementPlus组件库）

1、效果预览

2、代码

fromniceguiimportapp,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> """withui.row():ui.markdown("##### 不同颜色的按钮：")withui.element('el-button').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('type="primary"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('type="success"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('type="info"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('type="warning"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('type="danger"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.row():ui.markdown("##### 带图标+文字按钮：")ui.link('图标合集','https://element-plus.org/zh-CN/component/icon#icon-collection')withui.element('el-button').props('type="danger"').on('click',lambda:ui.notify('Hi!')):withui.element('el-icon').props('size="18"'):ui.html(SHARE,sanitize=False).style('margin-right:5px')ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('type="warning"').on('click',lambda:ui.notify('Hi!')):withui.element('el-icon').props('size="18"'):ui.html(TURNOFF,sanitize=False).style('margin-right:5px')ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('type="info"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-icon').props('size="18"'):ui.html(SWITCH,sanitize=False).style('margin-left:8px')withui.element('el-button').props('type="success"').on('click',lambda:ui.notify('Hi!')):withui.element('el-icon').props('size="18"'):ui.html(TURNOFF,sanitize=False).style('margin-right:5px')ui.html('Element Plus button',sanitize=False)withui.element('el-icon').props('size="18"'):ui.html(SWITCH,sanitize=False).style('margin-left:8px')withui.row():ui.markdown("##### plain样式按钮：")withui.element('el-button').props('plain').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('plain').props('type="primary"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('plain').props('type="success"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('plain').props('type="info"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('plain').props('type="warning"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('plain').props('type="danger"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.row():ui.markdown("##### round样式按钮：")withui.element('el-button').props('round').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('round').props('type="primary"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('round').props('type="success"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('round').props('type="info"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('round').props('type="warning"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.row():ui.markdown("##### 图标按钮：")withui.element('el-button').props('type="info"').props('circle').on('click',lambda:ui.notify('Hi!')):withui.element('el-icon').props('size="18"'):ui.html(SHARE,sanitize=False)withui.element('el-button').props('type="primary"').props('circle').on('click',lambda:ui.notify('Hi!')):withui.element('el-icon').props('size="18"'):ui.html(TURNOFF,sanitize=False)withui.element('el-button').props('type="danger"').props('circle').on('click',lambda:ui.notify('Hi!')):withui.element('el-icon').props('size="18"'):ui.html(SWITCH,sanitize=False)withui.row():ui.markdown("##### 禁用按钮：")withui.element('el-button').props('disabled').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('disabled').props('type="primary"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.row():ui.markdown("##### 链接按钮：")withui.element('el-button').props('link').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('link').props('type="primary"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.row():ui.markdown("##### 按钮组：")withui.element('el-button-group'):withui.element('el-button').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('type="primary"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.row():ui.markdown("##### 不同大小按钮：")withui.element('el-button').props('type="primary"').props('size="small"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('type="info"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.element('el-button').props('type="success"').props('size="large"').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)withui.row():ui.markdown("##### loading按钮：")withui.element('el-button').props('loading').on('click',lambda:ui.notify('Hi!')):ui.html('Element Plus button',sanitize=False)asyncdefchange_loading(bt,text):importasyncio# 设置为加载状态bt.props(":loading=true")# 修改按钮文本为"加载中..."text.content="加载中..."awaitasyncio.sleep(5)# 取消加载状态bt.props(":loading=false")# 修改按钮文本为"点击后loading 5s"text.content="点击后loading 5s"# 设置按钮文案withui.element('el-button').props('type="primary"')asf:bt_text_element=ui.html('点击后loading 5s',sanitize=False)# 绑定点击事件f.on('click',lambda:change_loading(f,bt_text_element))ui.run(port=8888)