Streamlit Option Menu 项目技术文档
1. 安装指南
要安装 streamlit-option-menu
组件,请在终端或命令行中运行以下命令:
pip install streamlit-option-menu
安装完成后,您可以在您的 Streamlit 项目中导入并使用该组件。
2. 项目使用说明
streamlit-option-menu
是一个简单的 Streamlit 组件,允许用户从菜单中选择一个选项。它类似于 st.selectbox()
,但具有以下特点:
- 使用静态列表显示选项,而不是下拉菜单。
- 可以为每个选项和菜单标题配置图标。
- 可以自定义菜单中大多数 HTML 元素的 CSS 样式。
该组件基于 streamlit-component-template-vue 构建,使用 Bootstrap 进行样式设计,并使用 bootstrap-icons 提供的图标。
3. 项目API使用文档
option_menu
函数参数说明
option_menu
函数接受以下参数:
- menu_title (必需): 菜单的标题;传递
None
以隐藏标题。 - options (必需): 要在菜单中显示的选项列表(字符串);如果要在选项之间插入分隔符,可以将选项设置为
"---"
。 - default_index (可选, 默认=0): 默认选中的选项的索引。
- menu_icon (可选, 默认="menu-up"): 用于菜单标题的 bootstrap-icon 名称。
- icons (可选, 默认=["caret-right"]): 用于每个选项的 bootstrap-icon 名称列表;其长度应与
options
的长度相等。 - orientation (可选, 默认="vertical"): 菜单的显示方向,可以是 "vertical" 或 "horizontal"。
- styles (可选, 默认=None): 包含菜单中大多数 HTML 元素的 CSS 定义的字典,包括:
- "container": 整个菜单的容器 div。
- "menu-title": 包含菜单标题的
<a>
元素。 - "menu-icon": 菜单标题旁边的图标。
- "nav": 包含 "nav-link" 的
<ul>
元素。 - "nav-item": 包含 "nav-link" 的
<li>
元素。 - "nav-link": 包含每个选项文本的
<a>
元素。 - "nav-link-selected": 包含选中选项文本的
<a>
元素。 - "icon": 每个选项旁边的图标。
- "separator": 分隔选项的
<hr>
元素。
- manual_select: 用于手动更改菜单项选择的参数。
- on_change: 当选择发生变化时触发的回调函数。回调函数应接受一个参数
key
,您可以使用它来获取菜单的值。
手动选择
manual_select
选项允许用户手动移动到菜单中的特定选项。当用户完成一个选项后自动移动到另一个选项时,这可能很有用(例如,如果设置被批准,则返回到主选项)。
要使用此选项,您需要将所需选项的索引作为 manual_select
传递。注意:此选项的行为类似于按钮。这意味着您应该只在想要选择选项时传递 manual_select
,而不是在菜单创建调用中将其作为常量值保留。
4. 项目安装方式
streamlit-option-menu
的安装非常简单,只需在终端或命令行中运行以下命令:
pip install streamlit-option-menu
安装完成后,您可以在 Streamlit 项目中导入并使用该组件。