声明

我决定不再支持此软件包。目前有更好的选择，比如我偶然发现的 streamlt Antd Components (github)。它提供了嵌套导航选项 - 这正是我在最新更新中实现的功能，但该软件包中已经包含了这一功能。将其与 switch_page 函数结合使用可以在页面间导航。祝一切顺利。

更新 我在这里构建了一个新的侧边栏组件。我将在这个仓库中构建其他侧边栏模板，包括 streamlit-on-Hover-tabs 组件所基于的悬停效果。

streamlit-on-Hover-tabs

通过自定义 CSS 创建的 Streamlit 导航栏悬停标签

on-hover-tabs 是一个用于创建如上图所示的自定义导航栏的组件，通过自定义 CSS 实现。CSS 文件也包含在仓库中。

• 可以选择自定义图标，这是通过 https://fonts.google.com/icons 实现的
• 计划通过 Python 代码调整侧边栏（如颜色等，但您也可以直接编辑 style.css 文件来实现）

它基于 streamlit 自定义组件 typescript 模板 构建

安装方法：

pip install streamlit-on-Hover-tabs

变量

• tabName：标签的名称
• iconName：您希望在侧边栏中使用的图标名称
• styles：借鉴了出色的 Victoryhb 实现。它只有四个带有 CSS 样式的 HTML 元素，您可以像在 CSS 文件中一样进行调整。它使用 glamor 的样式，允许其他实现，如悬停、激活等，如下所示。现在您可以创建自己的导航栏并自定义标签以满足您的自定义标签规格。
  • 'navtab' 是包含标签的 div 容器
  • 'all-tabs-options' 是下面 'tabStyle' 的父元素
  • 'tabStyle' 是包含图标和 tabName 的 li 容器。使用它来控制活动和悬停设计功能。
  • 'iconStyle' 是包含图标的图标标签
  • 'labelName' 是包含 tabName 的列表标签

您需要在目录中保存 style.css 文件。它位于这里

示例：

from st_on_hover_tabs import on_hover_tabs
import streamlit as st
st.set_page_config(layout="wide")

st.header("自定义标签组件用于悬停导航栏")
st.markdown('<style>' + open('./style.css').read() + '</style>', unsafe_allow_html=True)

with st.sidebar:
    tabs = on_hover_tabs(tabName=['仪表盘', '资金', '经济'], 
                         iconName=['dashboard', 'money', 'economy'], default_choice=0)

if tabs == '仪表盘':
    st.title("导航栏")
    st.write('选项名称是 {}'.format(tabs))

elif tabs == '资金':
    st.title("文件")
    st.write('选项名称是 {}'.format(tabs))

elif tabs == '经济':
    st.title("Tom")
    st.write('选项名称是 {}'.format(tabs))

使用样式实现：

（这些是标签的当前默认 CSS 样式）

with st.sidebar:
        tabs = on_hover_tabs(tabName=['仪表盘', '资金', '经济'], 
                             iconName=['dashboard', 'money', 'economy'],
                             styles = {'navtab': {'background-color':'#111',
                                                  'color': '#818181',
                                                  'font-size': '18px',
                                                  'transition': '.3s',
                                                  'white-space': 'nowrap',
                                                  'text-transform': 'uppercase'},
                                       'tabStyle': {':hover :hover': {'color': 'red',
                                                                      'cursor': 'pointer'}},
                                       'tabStyle' : {'list-style-type': 'none',
                                                     'margin-bottom': '30px',
                                                     'padding-left': '30px'},
                                       'iconStyle':{'position':'fixed',
                                                    'left':'7.5px',
                                                    'text-align': 'left'},
                                       },
                             key="1")