Streamlit的所有组件基础使用.
请先创建一个Streamlit项目，然后将下面代码保存到项目下page目录tutoria.py即可
import streamlit as st
st.set_page_config(
page_title="Streamlit 中文文档",
page_icon="🐼",
layout="wide"
)
st.write("# Streamlit 中文文档")
st.divider()
st.markdown(
"""
Streamlit 让您可以轻松地可视化、修改和共享数据。 文档是按组件类型排版的。每个部分都包含与组件相关的函数、参数和示例。
浏览下面的 组件，然后单击以了解有关我们可用命令的更多信息！ 🎈
""")
st.divider()
# 1. 随意展示 Write and magic
st.write("## 1. 如何展示 Write and magic")
st.divider()
w1,w2 = st.columns(2,gap="large")
with w1:
st.subheader("st.write")
st.caption("写入对象到页面")
st.code(
'''st.write("Hello **world**!")
st.write(my_data_frame)
st.write(my_mpl_figure)''',language="python")
with w2:
st.subheader("Magic")
st.caption("每当Streamlit检测到变量和文本在的当前行时，都会自动使用st.write()将内容写入页面")
st.code('''"Hello **world**!"
my_data_frame
my_mpl_figure''',language="python")
st.divider()
# 2. 文本组件 Text elements
st.write("## 2. 文本组件 Text elements")
st.divider()
t1,t2,t3 = st.columns(3,gap="large")
with t1:
st.subheader("Markdown")
st.caption("展示格式为Markdown的内容")
st.code('st.markdown("Hello **world**!")',language='python')
st.image("https://docs.streamlit.io/images/api/markdown.jpg")
with t2:
st.subheader("Title")
st.caption("以标题格式展示内容")
st.code('st.title("The app title")',language='python')
st.image("https://docs.streamlit.io/images/api/title.jpg")
with t3:
st.subheader("Header")
st.caption("以标题格式展示内容")
st.code('st.header("This is a header")',language='python')
st.image("https://docs.streamlit.io/images/api/header.jpg")
st.divider()
t4,t5,t6 = st.columns(3,gap="medium")
with t4:
st.subheader("Subheader")
st.caption("以副标题格式展示内容")
st.code('st.subheader("This is a subheader")',language='python')
st.image("https://docs.streamlit.io/images/api/subheader.jpg")
with t5:
st.subheader("Caption")
st.caption("以小字体展示内容")
st.code('st.caption("This is a caption")',language='python')
st.image("https://docs.streamlit.io/images/api/caption.jpg")
with t6:
st.subheader("Code block")
st.caption("显示指定语法的代码块")
st.code('st.code("import streamlit",language="python")',language='python')
st.image("https://docs.streamlit.io/images/api/code.jpg")
st.divider()
t7,t8,t9 = st.columns(3,gap="medium")
with t7:
st.subheader("Preformatted text")
st.caption("文本")
st.code('st.text("Hello world")',language='python')
st.image("https://docs.streamlit.io/images/api/text.jpg")
with t8:
st.subheader("LaTeX")
st.caption("显示LaTeX的数学表达式")
st.code('st.latex("\int a x^2 \,dx")',language='python')
st.image("https://docs.streamlit.io/images/api/latex.jpg")
with t9:
st.subheader("Divider")
st.caption("水平线")
st.code('st.divider()',language='python')
st.divider()
# 3. 数据组件 Data elements
st.write("## 3. 数据组件 Data elements")
st.divider()
d1,d2,d3 = st.columns(3,gap="large")
with d1:
st.subheader("Dataframes")
st.caption("可互交的数据框")
st.code('st.dataframe(my_data_frame)',language='python')
st.image("https://docs.streamlit.io/images/api/dataframe.jpg")
with d2:
st.subheader("Data editor")
st.caption("数据编辑组件")
st.code('edited = st.data_editor(df,num_rows="dynamic")',language='python')
st.image("https://docs.streamlit.io/images/api/data_editor.jpg")
with d3:
st.subheader("Column configuration")
st.caption("数据框和数据编辑器的配置")
st.code('st.column_config.NumberColumn("Price (in USD)",min_value=0,format="$%d")',language='python')
st.image("https://docs.streamlit.io/images/api/column_config.jpg")
st.divider()
d4,d5,d6 = st.columns(3,gap="medium")
with d4:
st.subheader("Static tables")
st.caption("静态表")
st.code('st.table(my_data_frame)',language='python')
st.image("https://docs.streamlit.io/images/api/table.jpg")
with d5:
st.subheader("Metrics")
st.caption("指标,以粗体显示,并带有指标变化提示")
st.code('st.metric("My metric",42,2)',language='python')
st.image("https://docs.streamlit.io/images/api/metric.jpg")
with d6:
st.subheader("Dicts and Json")
st.caption("字典和Json")
st.code('st.json(my_dict)',language='python')
st.image("https://docs.streamlit.io/images/api/json.jpg")
st.divider()
# 4. 图表组件 Chart elements
st.write("## 4. 图表组件 Chart elements")
st.divider()
c1,c2,c3 = st.columns(3,gap="large")
with c1:
st.subheader("Simple line charts")
st.caption("折线图")
st.code('st.line_chart(my_data_frame)',language='python')
st.image("https://docs.streamlit.io/images/api/line_chart.jpg")
with c2:
st.subheader("Simple area charts")
st.caption("面积图")
st.code('st.area_chart(my_data_frame)',language='python')
st.image("https://docs.streamlit.io/images/api/area_chart.jpg")
with c3:
st.subheader("Simple bar charts")
st.caption("条形图")
st.code('st.bar_chart(my_data_frame)',language='python')
st.image("https://docs.streamlit.io/images/api/bar_chart.jpg")
st.divider()
c4,c5,c6 = st.columns(3,gap="large")
with c4:
st.subheader("Scatterplots on maps")
st.caption("地图散点图")
st.code('st.map(my_data_frame)',language='python')
st.image("https://docs.streamlit.io/images/api/map.jpg")
with c5:
st.subheader("Matplotlib")
st.caption("matplotlib.pyplot图形")
st.code('st.pyplot(my_mpl_figure)',language='python')
st.image("https://docs.streamlit.io/images/api/pyplot.jpg")
with c6:
st.subheader("Altair")
st.caption("使用Altair展示图表")
st.code('st.altair_chart(my_altair_chart)',language='python')
st.image("https://docs.streamlit.io/images/api/vega_lite_chart.jpg")
st.divider()
c7,c8,c9 = st.columns(3,gap="large")
with c7:
st.subheader("Vega-Lite")
st.caption("使用Vega-Lite展示图表")
st.code('st.vega_lite_chart(my_vega_lite_chart)',language='python')
st.image("https://docs.streamlit.io/images/api/vega_lite_chart.jpg")
with c8:
st.subheader("Plotly")
st.caption("可互交Plotly图表")
st.code('st.plotly_chart(my_plotly_chart)',language='python')
st.image("https://docs.streamlit.io/images/api/plotly_chart.jpg")
with c9:
st.subheader("Bokeh")
st.caption("可互交Bokeh图表")
st.code('st.bokeh_chart(my_bokeh_chart)',language='python')
st.image("https://docs.streamlit.io/images/api/bokeh_chart.jpg")
st.divider()
c10,c11,c12 = st.columns(3,gap="large")
with c10:
st.subheader("PyDeck")
st.caption("使用PyDeck展示图表")
st.code('st.pydeck_chart(my_pydeck_chart)',language='python')
st.image("https://docs.streamlit.io/images/api/pydeck_chart.jpg")
with c11:
st.subheader("GraphVie")
st.caption("使用Dagre-d3库图表")
st.code('st.graphviz_chart(my_graphviz_spec)',language='python')
st.image("https://docs.streamlit.io/images/api/graphviz_chart.jpg")
with c12:
st.write("")
st.divider()
# 5. 输入框架 Input widgets
st.write("## 5. 输入框架 Input widgets")
st.divider()
i1,i2,i3 = st.columns(3,gap="large")
with i1:
st.subheader("Button")
st.caption("按钮组件")
st.code('clicked = st.button("Click me")',language='python')
st.image("https://docs.streamlit.io/images/api/button.jpg")
with i2:
st.subheader("Data editor")
st.caption("数据编辑组件")
st.code('edited = st.experimental_data_editor(df,num_rows="dynamic")',language='python')
st.image("https://docs.streamlit.io/images/api/data_editor.jpg")
with i3:
st.subheader("Download button")
st.caption("下载按钮组件")
st.code('st.download_button("Download file",file)',language='python')
st.image("https://docs.streamlit.io/images/api/download_button.jpg")
st.divider()
i4,i5,i6 = st.columns(3,gap="large")
with i4:
st.subheader("Checkbox")
st.caption("复选组件")
st.code('selected = st.checkbox("I agree")',language='python')
st.image("https://docs.streamlit.io/images/api/checkbox.jpg")
with i5:
st.subheader("Toggle")
st.caption("切换组件")
st.code('activated = st.toggle("Activate")',language='python')
st.image("https://docs.streamlit.io/images/api/toggle.jpg")
with i6:
st.subheader("Radio")
st.caption("单选按钮组件")
st.code('choice = st.radio("Pick one",["cats","dogs"])',language='python')
st.image("https://docs.streamlit.io/images/api/radio.jpg")
st.divider()
i7,i8,i9 = st.columns(3,gap="large")
with i7:
st.subheader("Selectbox")
st.caption("选择框组件")
st.code('choice = st.selectobx("Pick one",["cats","dogs"])',language='python')
st.image("https://docs.streamlit.io/images/api/selectbox.jpg")
with i8:
st.subheader("Multiselect")
st.caption("多选框组件")
st.code('choices = st.multiselect("Buy",["milk","apples","potatoes"])',language='python')
st.image("https://docs.streamlit.io/images/api/multiselect.jpg")
with i9:
st.subheader("Slider")
st.caption("单选按钮组件")
st.code('number = st.slider("Pick a number",0,100)',language='python')
st.image("https://docs.streamlit.io/images/api/slider.jpg")
st.divider()
i10,i11,i12 = st.columns(3,gap="large")
with i10:
st.subheader("Select-slider")
st.caption("滑块选择组件")
st.code('size = st.select_slider("Pick a size",["S","M","L"])',language='python')
st.image("https://docs.streamlit.io/images/api/select_slider.jpg")
with i11:
st.subheader("Text input")
st.caption("文本输入组件")
st.code('name = st.text_input("First name")',language='python')
st.image("https://docs.streamlit.io/images/api/text_input.jpg")
with i12:
st.subheader("Number input")
st.caption("数字输入组件")
st.code('number = st.number_input("Pick a number",0,10)',language='python')
st.image("https://docs.streamlit.io/images/api/number_input.jpg")
st.divider()
i13,i14,i15 = st.columns(3,gap="large")
with i13:
st.subheader("Text-area")
st.caption("文本块输入组件")
st.code('text = st.text_area("Text to translate")',language='python')
st.image("https://docs.streamlit.io/images/api/text_area.jpg")
with i14:
st.subheader("Date input")
st.caption("日期输入组件")
st.code('date = st.date_input("One day")',language='python')
st.image("https://docs.streamlit.io/images/api/date_input.jpg")
with i15:
st.subheader("Time input")
st.caption("时间输入组件")
st.code('time = st.time_input("Meeting time")',language='python')
st.image("https://docs.streamlit.io/images/api/time_input.jpg")
st.divider()
i16,i17,i18 = st.columns(3,gap="large")
with i16:
st.subheader("File Uploader")
st.caption("文件上传组件")
st.code('data = st.file_uploader("Choose a file")',language='python')
st.image("https://docs.streamlit.io/images/api/file_uploader.jpg")
with i17:
st.subheader("Camera input")
st.caption("摄像头输入组件")
st.code('image = st.camera_input("Take a picture")',language='python')
st.image("https://docs.streamlit.io/images/api/camera_input.jpg")
with i18:
st.subheader("Color picker")
st.caption("选色器组件")
st.code('color = st.color_picker("Pick a color")',language='python')
st.image("https://docs.streamlit.io/images/api/color_picker.jpg")
st.divider()
# 6. 多媒体 Media elements
st.write("## 6. 多媒体 Media elements")
st.divider()
m1,m2,m3 = st.columns(3,gap="large")
with m1:
st.subheader("Image")
st.caption("图像或图像列表")
st.code('''st.image(numpy_array)
st.image(image_bytes)
st.image(file)
st.image("https://example.com/p.jpg")''',language='python')
st.image("https://docs.streamlit.io/images/api/image.jpg")
with m2:
st.subheader("Audio")
st.caption("音乐播放器")
st.code('''st.audio(numpy_array)
st.audio(image_bytes)
st.audio(file)
st.audio("https://example.com/p.mp3")''',language='python')
st.image("https://docs.streamlit.io/images/api/audio.jpg")
with m3:
st.subheader("Video")
st.caption("视频播放器")
st.code('''st.video(numpy_array)
st.video(image_bytes)
st.video(file)
st.video("https://example.com/p.mp4")''',language='python')
st.image("https://docs.streamlit.io/images/api/video.jpg")
st.divider()
#7. 排版和容器 Layouts and containers
st.write("## 7. 排版和容器 Layouts and containers")
st.divider()
l1,l2,l3 = st.columns(3,gap="large")
with l1:
st.subheader("Sidebar")
st.caption("侧边栏")
st.code('''st.sidebar.write("This lives in the sidebar")
st.sidebar.button("Click me !")''',language='python')
st.image("https://docs.streamlit.io/images/api/sidebar.jpg")
with l2:
st.subheader("Columns")
st.caption("并排排列的容器")
st.code('''col1,col2 = st.columns(2)
col1.write("this is column 1")
col2.write("this is column 2")''',language='python')
st.image("https://docs.streamlit.io/images/api/columns.jpg")
with l3:
st.subheader("Tabs")
st.caption("选项卡容器")
st.code('''tab1,tab2 = st.tabs(["Tab1","Tab2"])
tab1.write("this is tab1 1")
tab2.write("this is tab2 2")''',language='python')
st.image("https://docs.streamlit.io/images/api/tabs.jpg")
st.divider()
l4,l5,l6 = st.columns(3,gap="large")
with l4:
st.subheader("Expander")
st.caption("可折叠多元素容器")
st.code('''with st.expander("Open to se")
st.write("This is more core")''',language='python')
st.image("https://docs.streamlit.io/images/api/expander.jpg")
with l5:
st.subheader("Container")
st.caption("多元素容器")
st.code('''c = st.container()
st.wirte("This will show last")
c.write("This will show first")
c.write("This will show second")''',language='python')
st.image("https://docs.streamlit.io/images/api/container.jpg")
with l6:
st.subheader("Empty")
st.caption("空容器")
st.code('''c = st.empty()
st.wirte("This will show last")
c.write("This will be rreplaced")
c.write("This will show first")''',language='python')
st.image("https://docs.streamlit.io/images/api/empty.jpg")
st.divider()
# 8. 聊天组件 Chat elements
st.write("## 8. 聊天组件 Chat elements")
st.caption("Streamlit 提供了一些命令来帮助您构建对话式应用程序。这些聊天元素旨在相互结合使用，但您也可以单独使用它们。")
st.caption("st.chat_message 允许您将聊天消息容器插入到应用程序中，以便您可以显示来自用户或应用程序的消息。聊天容器可以包含其他 Streamlit 元素，包括图表、表格、文本等。 st.chat_input 允许您显示聊天输入小部件，以便用户可以输入消息。")
st.divider()
ch1,ch2,ch3 = st.columns(3,gap="large")
with ch1:
st.subheader("Chat message")
st.caption("聊天消息容器")
st.code('''import numpy as np
with st.chat_message("user")
st.write("Hello")
st.line_chart(np.random.randn(30,3))''',language='python')
st.image("https://docs.streamlit.io/images/api/chat_message.jpg")
with ch2:
st.subheader("Chat input")
st.caption("聊天输入框架")
st.code('''prompt = st.chat_input("Say something")
if prompt:
st.write(f"The user has sent:{prompt}")''',language='python')
st.image("https://docs.streamlit.io/images/api/chat_input.jpg")
with ch3:
st.write("")
st.divider()
# 9. 状态组件 Status elements
st.write("## 9. 状态组件 Status and progress")
st.divider()
p1,p2,p3 = st.columns(3,gap="large")
with p1:
st.subheader("Progress bar")
st.caption("进度条")
st.code('''for i in range(101):
st.progress(i)
do_something_slow()''',language='python')
st.image("https://docs.streamlit.io/images/api/progress.jpg")
with p2:
st.subheader("Spinner")
st.caption("旋转等待")
st.code('''with st.spinner("Please wait ..."):
do_something_slow()''',language='python')
st.image("https://docs.streamlit.io/images/api/spinner.jpg")
with p3:
st.subheader("Status container")
st.caption("用于显示容器中长时间允许的任务的显示")
st.code('''with st.status("Running")
do_something_slow()''',language='python')
st.image("https://docs.streamlit.io/images/api/status.jpg")
st.divider()
p4,p5,p6 = st.columns(3,gap="large")
with p4:
st.subheader("Toast")
st.caption("右下角显示一天toast消息")
st.code('''st.toast("Butter!",icon='🍞')''',language='python')
st.image("https://docs.streamlit.io/images/api/toast.jpg")
with p5:
st.subheader("Balloons")
st.caption("庆祝气球")
st.code('''do_something()
# Celebrate when all done!
st.balloons()''',language='python')
st.image("https://docs.streamlit.io/images/api/balloons.jpg")
with p6:
st.subheader("Snowflakes")
st.caption("庆祝雪花")
st.code('''do_something()
# Celebrate when all done!
st.snow()''',language='python')
st.image("https://docs.streamlit.io/images/api/snow.jpg")
st.divider()
p7,p8,p9 = st.columns(3,gap="large")
with p7:
st.subheader("Error box")
st.caption("错误消息")
st.code('''st.error("We encountered an error")''',language='python')
st.image("https://docs.streamlit.io/images/api/error.jpg")
with p8:
st.subheader("Warning box")
st.caption("警告消息")
st.code('''st.warning("Unable to fetch image")''',language='python')
st.image("https://docs.streamlit.io/images/api/warning.jpg")
with p9:
st.subheader("Info box")
st.caption("信息消息")
st.code('''st.info("Dataset is updated every day at midnight")''',language='python')
st.image("https://docs.streamlit.io/images/api/info.jpg")
st.divider()
p10,p11,p12 = st.columns(3,gap="large")
with p10:
st.subheader("Success box")
st.caption("成功消息")
st.code('''st.success("Match found")''',language='python')
st.image("https://docs.streamlit.io/images/api/success.jpg")
with p11:
st.subheader("Exception output")
st.caption("异常输出")
st.code('''e= RuntimeError("This is an exception")
st.exception(e)''',language='python')
st.image("https://docs.streamlit.io/images/api/exception.jpg")
with p12:
st.write("")
st.divider()
st.write("## 10. 程序控制 Control flow")
st.divider()
cf1,cf2,cf3 = st.columns(3,gap="large")
with cf1:
st.subheader("Forms")
st.caption("创建一个表单，通过'提交'按钮提交")
st.code('''with st.form(key='my_form'):
username = st.text_input("Username")
password = st.text_input("Password")
st.form_submit_button("Login")''',language='python')
with cf2:
st.subheader("Stop execution")
st.caption("立即停止执行")
st.code('''st.stop()''',language='python')
with cf3:
st.subheader("Rerun script")
st.caption("立即重新运行脚本")
st.code('''st.experimental_rerun()''',language='python')
st.write("## 11. 实用模块 Utilities")
st.divider()
u1,u2,u3 = st.columns(3,gap="large")
with u1:
st.subheader("Set page title,favicon,and more")
st.caption("默认页面配置")
st.code('''st.set_page_config(
page_title="My app",
page_icon=":shark:"
)''',language='python')
with u2:
st.subheader("Echo")
st.caption("在页面上展示代码,然后执行,用于教程")
st.code('''with st.echo():
st.write('This code will be print.')''',language='python')
with u3:
st.subheader("Get help")
st.caption("展示对象文档内容")
st.code('''st.help(st.write)
st.help(pd.DataFrame)''',language='python')
st.divider()
u4,u5,u6 = st.columns(3,gap="large")
with u4:
st.subheader("Get query parameters")
st.caption("返回当前浏览器地址栏的查询参数")
st.code('''st.experimental_get_query_params()''',language='python')
with u5:
st.subheader("Set query parameters")
st.caption("设置当前浏览器地址栏的查询参数")
st.code('''st.experimental_set_query_params(
show_map=True,selected=["asia"])''',language='python')
with u6:
st.subheader("Get help")
st.caption("展示对象文档内容")
st.code('''st.help(st.write)
st.help(pd.DataFrame)''',language='python')
st.divider()
u7,u8,u9 = st.columns(3,gap="large")
with u7:
st.subheader("State management")
st.caption("会话状态是一种在每个用户会话重新运行之间共享变量的方法")
st.code('''st.session_state['key']=value''',language='python')
with u8:
""
with u9:
""
st.write("## 12. 连接和数据库 Connections and databases")
st.divider()
cd1,cd2,cd3 = st.columns(3,gap="large")
with cd1:
st.subheader("Create a connection")
st.caption("创建一个数据源或者API")
st.code('''conn = st.experimental_connection('pets_db',type='sql')
pet_owners = conn.query('select * from pet_owners')
st.dataframe(pet_owners)''',language='python')
st.image("https://docs.streamlit.io/images/api/connection.jpg")
with cd2:
st.subheader("SQL Connection")
st.caption("使用SQL Alchemy连接到SQL数据库")
st.code('''conn = st.experimental_connection('sql')''',language='python')
st.image("https://docs.streamlit.io/images/api/connections.SQLConnection.jpg")
with cd3:
st.subheader("Snowpark Connection")
st.caption("与 snowflake snowpark连接")
st.code('''conn = st.experimental_connection('snowpark')''',language='python')
st.image("https://docs.streamlit.io/images/api/connections.SnowparkConnection.jpg")
st.divider()
st.write("## 13. 第三方组件 Third-party")
st.subheader("第三方组件平台:https://extras.streamlitapp.com")
st.divider()
tp1,tp2,tp3 = st.columns(3,gap="large")
with tp1:
st.subheader("Tags")
st.caption("标签")
st.code('''pip install streamlit-tags
keywords = st_tags(
label='# Enter Keywords:',
text='Press enter to add more',
value=['Zero', 'One', 'Two'],
suggestions=['five', 'six', 'seven',
'eight', 'nine', 'three',
'eleven', 'ten', 'four'],
maxtags = 4,
key='1')
keyword = st_tags_sidebar(
label='# Enter Keywords:',
text='Press enter to add more',
value=['Zero', 'One', 'Two'],
suggestions=['five', 'six', 'seven',
'eight', 'nine', 'three',
'eleven', 'ten', 'four'],
maxtags = 4,
key='2')''',language='python')
with tp2:
st.subheader("Streamlit Extras")
st.caption("外部组件:")
st.code('''pip install streamlit-extras
from streamlit_extras.dataframe_explorer import dataframe_explorer
dataframe = generate_fake_dataframe(
size=500, cols="dfc", col_names=("date", "income", "person"), seed=1
)
filtered_df = dataframe_explorer(dataframe, case=False)
st.dataframe(filtered_df, use_container_width=True)''',language='python')
st.image("https://docs.streamlit.io/images/api/connections.SQLConnection.jpg")
with tp3:
st.subheader("Snowpark Connection")
st.caption("与 snowflake snowpark连接")
st.code('''conn = st.experimental_connection('snowpark')''',language='python')
st.image("https://docs.streamlit.io/images/api/connections.SnowparkConnection.jpg")
评论区