A collection of custom components and helper functions for Streamlit that are focused on providing advanced styling functionality.
Project description
st_stylish
A collection of custom components and helper functions for Streamlit that are focused on providing advanced styling functionality.
The primary functionality in this repo is in the /st_stylish/helpers.py
module. This module provides functions that inject css via the st.markdown
hack that target elements in a more reliable way than the typical generated ids approach. Readable class names that should change much less frequently, DOM structure, and tag attribute names are used to target elements.
Setup
Local
- Create a virtual environment
- Activate your virtual environment
pip install -r requirements.txt
Helper functions
Use cases
- Full page component
Note: Make sure to set
layout='wide'
withst.set_page_config(layout='wide')
Examples
Full page component
-
Single page - full page iframe
/examples/singlepage.py
Run it:
streamlit run ./examples/singlepage.py
-
Multi page - full page iframe
/examples/multipage/__init__.py
Run it:
streamlit run ./examples/multipage/home.py
-
Full page component using convenience function
/examples/fullpage_component.py
Run it:
streamlit run ./examples/fullpage_component.py
-
Using the StyleInjector context manager
/examples/with_StyleInjector.py
Run it:
streamlit run ./examples/with_StyleInjector.py
Custom components
-
iframe The only added functionality here is the loading indicator while the iframe content loads.
To run this custom component's frontend locally:
cd st_stylish/iframe/frontend npm install npm start
Then you can use it in a streamlit file. From project root:
streamlit run examples/stylish_iframe.py
Using the StyleInjector
If you want to style multiple components (i.e. .element-container
s) you can use the StyleInjector class as a context manager like so:
with StyleInjector() as injector:
injector.set_appview_padding(0)
The StyleInjector will keep track of the components.markdown
calls. When you call the StyleInjector's set_n_component_height_width
the index of the streamlit component will be offset by the number of previously injected markdown components.
So to style the first streamlit component that you call in the script, call set_n_component_height_width
with an index
argument of 0.
See /examples/with_StyleInjector.py
for example code.
Enhancements
StylesManager class(Done) I want to create a StylesManager class that controls the injection of<style>
tags viast.markdown
and keeps an index of.element-container
s so we can target specific.element-container
s to style independently. Right now theset_component_height_width
function just targets the last streamlit element. This works great for a full page iframe, for example, but you then cannot add any more components below that iframe.
TODO
- convenience function for a full page component
- add docstrings to all helper functions
- implement StylesManager concept
- deploy to PyPi
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
Built Distribution
Hashes for st_stylish-1.0.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | e83d8ef9793adbc558d24bec6e0eea1ea753e01285ea06d5e6e9fcff3282ba12 |
|
MD5 | 9aa56b7322ffcd64821b80708a21bb79 |
|
BLAKE2b-256 | c8b2d264606bf5bda92d0dc9a2968c4f46a36f4ae56ce1475a7073d3312c2dae |