系列参考:

python︱写markdown一样写网页,代码快速生成web工具:streamlit介绍(一)
python︱写markdown一样写网页,代码快速生成web工具:streamlit 重要组件介绍(二)
python︱写markdown一样写网页,代码快速生成web工具:streamlit 展示组件(三)
python︱写markdown一样写网页,代码快速生成web工具:streamlit lay-out布局(四)
python︱写markdown一样写网页,代码快速生成web工具:streamlit 缓存(五)
python︱写markdown一样写网页,代码快速生成web工具:streamlit 数据探索案例(六)
streamlit + opencv/YOLOv3 快速构建自己的图像目标检测demo网页(七)

github代码链接:mattzheng/streamlit_demo


1 streamlit.beta_container()

通过with st.beta_container():,可以Book一个组件模块
将一个不可见的容器插入到你的应用程序中,可以用来保存多个元素。

# with写法
with st.beta_container():
   st.write("This is inside the container")
   # You can call any Streamlit command, including custom components:
   st.bar_chart(np.random.randn(50, 3))

st.write("This is outside the container")

# 常规写法
container = st.beta_container()
container.write("This is inside the container")
st.write("This is outside the container")

# Now insert some more in the container
container.write("This is inside too")

在这里插入图片描述

2 分列展示

streamlit.beta_columns(spec)

以并排列的形式插入容器。插入多个并排放置的多元素容器,并返回容器对象列表。

要向返回的容器添加元素,可以使用“with”表示法(首选),或者直接调用返回对象的方法。

请参见下面的例子。


col1, col2, col3 = st.beta_columns(3)

with col1:
   st.header("A cat")
   st.image("https://static.streamlit.io/examples/cat.jpg", use_column_width=True)

with col2:
   st.header("A dog")
   st.image("https://static.streamlit.io/examples/dog.jpg", use_column_width=True)

with col3:
   st.header("An owl")
   st.image("https://static.streamlit.io/examples/owl.jpg", use_column_width=True)

在这里插入图片描述

3 按照比例分列展示

col1, col2 = st.beta_columns([3, 1])
data = np.random.randn(10, 1)

col1.subheader("A wide column with a chart")
col1.line_chart(data)

col2.subheader("A narrow column with the data")
col2.write(data)

在这里插入图片描述

4 折叠/展开

streamlit.beta_expander(label=None, expanded=False)


st.line_chart({"data": [1, 5, 2, 6, 2, 1]})

with st.beta_expander("See explanation"):
    st.write("""
        The chart above shows some numbers I picked for you.
        I rolled actual dice for these, so they're *guaranteed* to
        be random.
    """)
    st.image("https://static.streamlit.io/examples/dice.jpg")


在这里插入图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐