首页 > 其他分享 >关于Streamlit中button的扩展用法

关于Streamlit中button的扩展用法

时间:2024-07-25 19:29:56浏览次数:20  
标签:markdown button st html 按钮 Streamlit 用法 True

最近团队在制作一个车辆管理系统,本人刚好负责streamlit的页面可视化。这篇Blog就不详细赘述系统的各项功能了,今天主要是想写点东西,加深一下知识的理解和消化,各位看官看个开心~

(手动分界线  /doge)

---------------------------------------------------------------------------------------------------------------------------------

我们知道,在Streamlitl中,常用的关于Button的使用方法有:

import streamlit as st

if st.button('按钮1'):
    st.write('是的,我被你click了!')
    st.markdown('<style>p {color: red;}</style><p>结合HTML和CSS后的产物 TnT</p>', unsafe_allow_html=True)
    st.balloons()

if st.button('按钮2'):
    st.write('怎么事,还点两次呢?')
    st.markdown('''
    | Lebron James | The Best basketplayer in SF |
    | --- | --- |
    | Stephen Curry | The NBA All-Time three-point Champion |
    | Kevin Durant | The most temperamental Player in NBA |
    ''')
    st.balloons()

if st.button('按钮3'):
    st.write('按钮3被Attack了!')
    st.markdown('这是一个 **粗体** 和 *斜体* 的例子')
    st.markdown('# 这是一个一级标题')
    st.markdown('## 这是一个二级标题')
    st.balloons()

显然,在Streamlit中,按钮的点击事件通常是通过"st.button"函数的返回值来判断,当按钮被点击时返回"True",否则返回"False"。同时,我们也能看到在上述代码的第一个button中,我们采用了button和HTML/CSS结合的方法,构造出了多样式的按钮(是的,实训我做的内容就是这玩意)。但是,直接使用"st.button"是最推荐的方法,并且它是与Streamlit生态系统最兼容的方式(学了前端的可以遮住眼睛了)

重点来了,这种结合方式会有什么后果:在和st.colume函数配合使用时,往往不是点击按钮显示效果,而是在加载页面后直接显示结果!(有大佬告诉孩子该怎么解决吗 #乞讨ing)

但是我不知悔改,还是喜欢花里胡哨的东西!

st.markdown("""
<style>
    .button-style {
        background-color: #4CAF50; /* 绿色背景 */
        border: none; /* 无边框 */
        color: white; /* 文字颜色白色 */
        padding: 15px 32px; /* 按钮的内边距 */
        text-align: center; /* 文字居中 */
        text-decoration: none; /* 无下划线 */
        display: inline-block; /* 行内块显示 */
        font-size: 16px; /* 字体大小 */
        margin: 4px 2px; /* 外边距 */
        cursor: pointer; /* 鼠标指针 */
        border-radius: 12px; /* 圆角 */
    }
</style>
""", unsafe_allow_html=True)

# 按钮1
if st.markdown('<a href="#" class="button-style">按钮1</a>', unsafe_allow_html=True):
    st.write('你点击了按钮1')

# 按钮2
if st.markdown('<a href="#" class="button-style">按钮2</a>', unsafe_allow_html=True):
    st.write('你点击了按钮2')

# 按钮3
if st.markdown('<a href="#" class="button-style">按钮3</a>', unsafe_allow_html=True):
    st.write('你点击了按钮3')

上述示例中,我们使用了CSS自定义了按钮的样式,并使用"st.markdown"添加了HTML内容,关键在于自定义HTML和CSS时,参数"unsafe_allow_html"要设置为"True"

如果学习了js,谁愿意当st的

标签:markdown,button,st,html,按钮,Streamlit,用法,True
From: https://blog.csdn.net/m0_74863281/article/details/140696821

相关文章

  • SQL中的declare用法
    SQL中的declare用法平时写SQL查询、存储过程都是凭着感觉来,没有探究过SQL的具体语法,一直都是按c#那一套往SQL上模仿,前几天项目中碰到一个问题引起了我对declare定义变量的作用域的兴趣。大家都知道c#中的局部变量,在if中如果我们定义一个变量的话他的作用到if结束为止,if外是不......
  • Rust 中 *、&、mut、&mut、ref、ref mut 的用法和区别
    Rust中*、&、mut、&mut、ref、refmut的用法和区别在Rust中,*、ref、mut、&和refmut是用于处理引用、解引用和可变性的关键字和操作符,它们在不同的上下文中有不同的用法。一、*解引用*属于操作符1.作用用于解引用指针或引用,以访问其指向的值。通过解引用,可以从指......
  • 指针的用法
    大家好,这次是用法系列第二期,给大家介绍指针的作用。一.用于变量我举个例子#include<iostream>usingnamespacestd;intmain(){ intx=6,y=5;//创建变量x,y int*p=&x;//创建指针p并指向x cout<<*p<<endl;//输出指针p *p=y;//指针指向y cout<<*p;//输出指针p......
  • 使用 os.system() 命令打开 Streamlit
    我正在工作中在Streamlit中创建一个应用程序。因为大多数人对编程一无所知(包括如何启动Streamlit),所以我想用启动Streamlit的代码创建一个可执行文件。这是我的代码:importoscmd='streamlitrunmain.py'os.system(cmd)接下来我使用pyinstaller来更改它到......
  • Vue中deep的用法
    deep:true 的用法在Vue中,watch用来监听数据的变化,并执行相应的回调函数。当监听的对象是一个复杂的数据结构(如对象或数组)时,默认情况下Vue的watch只会监听顶层属性的变化,而不会监听对象内部属性的变化。例子假设您有如下数据结构:data(){return{user:{......
  • UVM-config_db机制和用法
    1.用途        config_db机制用于在UVM验证平台间传递参数,通常成对出现,其中set相当于寄信,get相当于收信。UVM提供的config_db机制可在组件实例化前就设定好配置信息,这样就可在tb的initial块中就进行设定了。真正将这些配置信息落实在各component,是在testbench运行过程......
  • C语言 ——— 函数指针数组的讲解及其用法
    目录前言函数指针数组的定义函数指针数组的使用前言数组是存放一组相同类型数据的存储空间关于指针数组的知识请见:C语言———指针数组&指针数组模拟二维整型数组-CSDN博客那么要将多个函数的地址存储到数组中,这个数组该如何定义呢?函数指针数组的定义把多个函数......
  • C++this指针--指针的介绍用法以及相关注意事项
    什么是this指针this指针是在C++中用来指向当前对象的特殊指针。它是每个非静态成员函数的隐式参数,指向调用该函数的对象。在C++类的成员函数中,除了静态成员函数外,每个成员函数都有一个隐含的this指针,它指向调用该函数的对象。这个指针可以让成员函数访问调用它的对象......
  • 【云原生】Kubernetes 中的 PV 和 PVC 介绍、原理、用法及实战案例分析
    ✨✨欢迎大家来到景天科技苑✨✨......
  • python每日学习:numpy库的用法(上)
    python每日学习10:numpy库的用法(上)下载numpy库pipinstallnumpy检测环境是否安装importnumpyimportnumpyasnpa=np.arange(10)print(a)array创建数组名称描述dtype数组元素的数据类型,可选copy对象是否需要复制,可选order创建数组的样式,C为行方向,F为列方向,A......