美文网首页Python
Streamlit 进阶

Streamlit 进阶

作者: 水之心 | 来源:发表于2020-11-28 17:05 被阅读0次

资源:Introduction - Streamlitopedia

1 Markdown 集成

Markdown在简化的应用程序中有多种用途。作为精简应用程序中唯一用于自定义 HTML 的工具,您可以使用它灵活地将丰富的内容插入到您的应用程序中。

1.1 使用 Markdown 文件

如果您的内容超出了句子的长度,或者想要一种更简单的方法来编写多行 markdown 内容,请创建一个单独的 markdown 文件,然后在需要时将该内容导入到您的应用中。

例如,您的应用可能包含一些介绍性文字。创建一个 intro.md 文件并在其中写入内容,然后将内容导入 markdown 小部件中。

import streamlit as st

def read_markdown_file(markdown_file):
    with open(markdown_file, encoding='utf-8') as fp:
        w = fp.read()
    return w

intro_markdown = read_markdown_file("intro.md")
st.markdown(intro_markdown, unsafe_allow_html=True)

1.2 有条件地显示长内容

如果使用上述方法编写和显示长 Markdown 内容,则可能不希望总是显示该内容,因为它占用了应用程序屏幕空间的很大一部分。有两种选择。

1.2.1 使用 st.checkbox 隐藏

在此示例中,假设在 data_dictionary.md 中有一个数据字典。然后,我们可以用一个 st.checkbox 当复选框被选中,以显示此内容的地方。

dict_check = st.checkbox("Data Dictionary")
dict_markdown = read_markdown_file("data_dictionary.md")

if dict_check:
    st.markdown(dict_markdown, unsafe_allow_html=True)

1.2.2 在 Markdown 中使用 <details><summary> 元素

由于可以在 markdown 中使用 HTML,因此可以利用 <details> 元素。您无需使用精简的窗口小部件,而可以使用 markdown 中的这些元素“write”该窗口小部件。

例如:

<details>
<summary>Data Dictionary</summary>

## Data Dictionary

- Variable 1: this is variable 1
- Variable 2: this is variable 2
...

</details>

1.2.3 使用 <small> Elements 元素

在 markdown 中,--- 将创建水平线 <hr> 元素。这些有助于对应用程序进行分区。

1.2.4 可以使用 Emoji

表情符号可以充当一些小图标,以突出显示您应用的某些功能。例如,ℹ️可用于指示上下文信息,,和🚫可用于正例和负例。

表情符号数字(①⑴❶)也有几种样式,可用来指导用户完成应用程序中选项的顺序。

1.2.5 将 f-strings 与 Markdown 结合

在围绕分析构建界面时,其中的许多步骤都需要在变量名称,小部件值,轴标签,小部件标签或叙述性描述中创建或处理字符串。

如果我们想以叙述形式显示一些分析结果,并且要突出显示一些特定变量,则 f-strings 和 markdown 可以帮助我们。除了用特定的变量值填充字符串的简便方法之外,这也是一种内联格式的简单方法。例如,我们可能会使用类似的方式来显示有关数据集中列的基本信息,并在 markdown 字符串中突出显示它们。

mean = df["values"].mean()
n_rows = len(df)

md_results = f"The mean is **{mean:.2f}** and there are **{n_rows:,}**."
st.markdown(md_results)

在此,我们使用了两种格式:.2f 将浮点数舍入到小数点后两位;以及使用逗号作为千位分隔符。我们还使用 markdown 语法对值加粗,以使它们在文本中在视觉上突出显示。

相关文章

网友评论

    本文标题:Streamlit 进阶

    本文链接:https://www.haomeiwen.com/subject/bkbqwktx.html