Components to use with or without the Hydralit package.
Project description
Hydralit Components
A package of Streamlit components that can be used directly or with the Hydralit library.
Current Components
-
Navbar
-
Loaders
-
Experimental
Installing Hydralit Components
Hydralit can be installed from PyPI:
pip install -U hydralit_components
New in version 1.0.5
- Can toggle navbar animation on/off
- Tighten up the navbar animation
- Add over 20 custom loaders that work the same as the built-in spinner
- An ability to enable experimental features to allow for previously disallowed code injection (like javascript)
- Added a modified version of the existing Streamlit cookie manager to allow for better use in multi-app environments
New in version 1.0.3
- Enable sticky menu mode (pin to top of the window)
- Animated dropdown menu entries to support complex navigation
- Offline support
- Added support for fontawesome icons
- Full collapse in mobile view (the burger is back!)
Features
- Full theme color support
- Full container support (can put on sidebar too)
- Responsive layout
- Use Bootstrap icons or emojis or nothing
- Configure Response values when clicked
- Assign tooltips
Navbar
A very quick example of how to modify the menu items and to show we can put it on the main page, sidebar or within a container, up to you.
import streamlit as st
import hydralit_components as hc
st.set_page_config(layout='wide',initial_sidebar_state='collapsed',)
# specify the primary menu definition
menu_data = [
{'icon': "far fa-copy", 'label':"Left End"},
{'id':'Copy','icon':"🐙",'label':"Copy"},
{'icon': "far fa-chart-bar", 'label':"Chart"},#no tooltip message
{'icon': "far fa-address-book", 'label':"Book"},
{'id':' Crazy return value 💀','icon': "💀", 'label':"Calendar"},
{'icon': "far fa-clone", 'label':"Component"},
{'icon': "fas fa-tachometer-alt", 'label':"Dashboard",'ttip':"I'm the Dashboard tooltip!"}, #can add a tooltip message
{'icon': "far fa-copy", 'label':"Right End"},
]
menu_id = hc.nav_bar(menu_definition=menu_data)
#get the id of the menu item clicked
st.info(f"{menu_id=}")
HyLoader
A very quick example of how to use the load to wrap your long running code
import hydralit_components as hc
import time
# a dedicated single loader
with hc.HyLoader('Now doing loading',hc.Loaders.pulse_bars,):
time.sleep(5)
# for 3 loaders from the standard loader group
with hc.HyLoader('Now doing loading',hc.Loaders.standard_loaders,index=[3,0,5]):
time.sleep(5)
# for 1 (index=5) from the standard loader group
with hc.HyLoader('Now doing loading',hc.Loaders.standard_loaders,index=5):
time.sleep(5)
# for 4 replications of the same loader (index=2) from the standard loader group
with hc.HyLoader('Now doing loading',hc.Loaders.standard_loaders,index=[2,2,2,2]):
time.sleep(5)
Experimental
An example of injecting code into the Streamlit application that previously would not have worked.
NOTE: You need to force reload (browser refresh) the entire page after the experiemntal features have been enabled (you will see a notification in the terminal) to ensure the additions have been loaded into the web page.
import hydralit_components as hc
import streamlit as st
hc.hydralit_experimental(True)
modal_code = """
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Hydralit Components Experimental Demo!
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Popup Form!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<h2>Pure JS+HTML Form</h2>
<form class="form-horizontal" action="/">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
"""
st.markdown(modal_code,unsafe_allow_html=True)
query_param = st.experimental_get_query_params()
if query_param:
st.write('We caputred these values from the experimental modal form using Javascript + HTML + Streamlit + Hydralit Components.')
st.write(query_param)
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Close
Hashes for hydralit_components-1.0.5.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | f0663b23471e1fb7dfdf98dc326e014657485e26a68eabda0f51b19ebf20dede |
|
MD5 | 9cfe732402f9a488243e0360c089e9b7 |
|
BLAKE2b-256 | 45b58ca17c4f5292af17cac2223f4212a31518d7bace6fc5798ba4d5224e0ac5 |