Introduction to streamlit-on-Hover-tabs
The streamlit-on-Hover-tabs project introduces a custom navigation component designed for use within Streamlit applications, utilizing a unique on-hover tab mechanism. This project revolves around enhancing user interface elements within Streamlit applications through custom CSS.
Project Overview
The streamlit-on-Hover-tabs component is a Streamlit custom navigation feature created with a focus on simplicity and customization. It allows developers to integrate a navigation bar into Streamlit applications, which reacts to hover actions. This tool is built upon the streamlit custom components typescript template and leverages custom CSS for styling and animation.
Key Features
-
Custom Icons: The project harnesses the power of Google's icon fonts, enabling users to select and customize icons for their navigation tabs.
-
Customizable Styles: Developers have the flexibility to adjust styles directly through CSS, allowing for tailored user experiences. The project borrows styling approaches from Victoryhb’s implementation, making it easy to define styles for various states like hover and active.
-
Built-in CSS: The hover effect and overall design are powered by custom CSS that comes pre-packaged with the component.
-
Adjustable Sidebar Elements: Although the current adjustments are mainly CSS-based, future updates may allow for more dynamic changes through Python code.
Installation
To incorporate the streamlit-on-Hover-tabs into your project, install it via pip:
pip install streamlit-on-Hover-tabs
Usage
The streamlit-on-Hover-tabs component requires several input variables to function effectively:
- tabName: Specifies the name of each tab.
- iconName: Sets the icon displayed alongside each tab in the navigation bar.
- styles: Customizable styling options for various HTML elements present in the navigation structure.
Here is an example to demonstrate its basic implementation:
from st_on_hover_tabs import on_hover_tabs
import streamlit as st
st.set_page_config(layout="wide")
st.header("Custom tab component for on-hover navigation bar")
st.markdown('<style>' + open('./style.css').read() + '</style>', unsafe_allow_html=True)
with st.sidebar:
tabs = on_hover_tabs(tabName=['Dashboard', 'Money', 'Economy'],
iconName=['dashboard', 'money', 'economy'], default_choice=0)
if tabs =='Dashboard':
st.title("Navigation Bar")
st.write('Name of option is {}'.format(tabs))
elif tabs == 'Money':
st.title("Paper")
st.write('Name of option is {}'.format(tabs))
elif tabs == 'Economy':
st.title("Tom")
st.write('Name of option is {}'.format(tabs))
Style Customization
The default CSS styles are provided but can be modified to fit various design needs. Example usage with custom styles:
with st.sidebar:
tabs = on_hover_tabs(tabName=['Dashboard', 'Money', 'Economy'],
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")
Conclusion
While this package may not be actively supported in the future due to emerging alternatives, it offers a foundational approach to integrating custom navigation capabilities with hover effects into Streamlit applications. It remains a useful tool for those seeking to enhance UI design with straightforward styling and icon integration.