翼度科技»论坛 编程开发 python 查看内容

『玩转Streamlit』--文本与标题组件

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
本篇准备开始介绍Streamlit的组件。
Streamlit的组件非常多,后续几篇打算按照用途的分类,介绍每个分类中最常用的组件。
本次从最简单的组件开始,介绍文本和标题相关的组件,也就是以下4个组件:

  • st.text:用于显示普通的文本内容
  • st.title:用于显示页面的大标题
  • st.header:用于显示一级标题
  • st.subheader:用于显示二级标题
1. st.text 组件

st.text 是 Streamlit 中最基本的文本展示组件。
它的主要功能是显示普通的文本内容,没有特殊的格式或样式,
主要用于展示段落、说明性文字或任何不需要特殊强调的文本。
使用场景主要包括:

  • 展示应用程序的说明文字
  • 显示用户输入或动态生成的文本内容
  • 作为其他组件之间的过渡文本
st.text既可以显示单行文本,也可以通过三引号来显示多行文本
  1. import streamlit as st
  2. st.text("这是一个使用 st.text 显示的普通文本。")
  3. st.text(
  4.     """这是一个使用 st.text 显示的多行文本。
  5. 每一行都会单独显示,
  6. 并且保持原有的格式。"""
  7. )
复制代码

2. st.title 组件

st.title 是用于显示页面大标题的组件。
它的字体大且加粗,非常醒目,通常位于页面的顶部或重要内容的开头。
st.title 的主要作用是吸引用户的注意力,明确应用程序的主题或当前部分的核心内容。
它的使用场景有:

  • 作为整个应用程序的标题
  • 标识应用程序中的重要部分或章节
  • 在页面顶部提供清晰的导航指示
st.title使用非常简单。
  1. st.title("XXX数据应用程序")
复制代码
3. st.header 组件

st.header 是用于显示一级标题的组件。
它的字体和加粗程度略小于 st.title,但仍然足够显眼,能够清晰地标识出页面内容的不同部分。
st.header 的主要作用是帮助用户理解应用程序的结构,快速定位到感兴趣的内容部分。
st.header可以当成HTML中的H1标签来看,它的使用场景主要有:

  • 划分应用程序的不同区块或章节
  • 为特定部分的内容提供标题
  • 在长页面中提供视觉上的分隔
st.header的使用和st.title类似,下面的示例把它当作内容分割的标题。
  1. import streamlit as st
  2. st.header("引言")
  3. st.text("本文介绍了 Streamlit 的基本文本展示组件。")
  4. st.header("方法")
  5. st.text("我们采用了多种方法来分析数据。")
  6. st.header("结果")
  7. st.text("以下是我们的分析结果。")
复制代码

4. st.subheader 组件

st.subheader 是用于显示二级标题的组件。
相对于 st.header,它的字体和加粗程度进一步减小,但仍然能够清晰地标识出内容的子部分。
st.subheader 的主要作用是进一步细化内容结构,为用户提供更详细的导航或内容概述,可以把它当成HTML中的H2标签来看。
它的使用场景:

  • 在一级标题下进一步划分内容子部分
  • 为特定的小节或段落提供标题
  • 在需要强调但不需要过分突出的地方使用
下面的示例展示二级标题的使用:
  1. st.header("销售数据分析")
  2. st.subheader("月度销售趋势")
  3. st.text("这里将展示每月的销售数据趋势。")
  4. st.subheader("年度销售趋势")
  5. st.text("这里将展示整年的销售数据趋势。")
  6. st.subheader("产品类别销售情况")
  7. st.text("接下来,我们将分析不同产品类别的销售情况。")
复制代码

5. 总结

上面介绍的4个组件st.text、st.title、st.header 和 st.subheader 并不是孤立存在的,它们通常会被组合在一起使用,以构建出具有层次感和逻辑性的页面布局。
使用时,根据内容层次选择组件,比如,
使用 st.title 作为整个页面或应用程序的开头,明确主题和核心目的;
使用 st.header 来划分页面的主要部分或章节,每个 st.header 都应该代表一个相对独立且完整的内容区块;
在 st.header 之下,使用 st.subheader 来进一步细化内容,为具体的小节或段落提供标题;
最后,用st.text 来填充上述标题之间的空白,提供具体的描述、解释或补充信息。
需要注意的是,虽然这些文本展示组件非常有用,但也要避免过度使用,过多的标题和文本可能会让用户感到混乱和迷失方向。
因此,在使用这些组件时,要确保它们真正为页面增加了价值,而不是成为冗余的信息。

来源:https://www.cnblogs.com/wang_yb/p/18531821
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具