最近团队在制作一个车辆管理系统,本人刚好负责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