Resolved: Is there a way to add/display bloxs in streamlit?

Question:

Bloxs is a simple python package that helps you display information in an attractive way (formed in blocks). Perfect for building dashboards, reports and apps in the notebook. It works with: Jupyter Notebook, Google Colab, Deepnote, Kaggle Notebook


B([
    B(1999, "Percent change!", percent_change=10),
    B("🎉🎉🎉", "Works with emojis"),
    B("68%", "Loading progress", progress=68),
    B(1234, "Bloxs in notebook!")
])
enter image description here
How to use the bloxes in streamlit?
I have tried with st.pyplot, and with streamlit HTML component but not able to add in streamlit app.
Is there a way to add these bloxs in Streamlit?

Answer:

Use B(...)._repr_html_() to get it as HTML and put it in streamlit using HTML component.
But HTML component can’t detect its height and you have to set it manually.
import streamlit as st
import streamlit.components.v1 as components
from bloxs import B

st.title('Bloxs example in Streamlit')

item = B([
    B(1999, "Percent change!", percent_change=10),
    B("🎉🎉🎉", "Works with emojis"),
    B("68%", "Loading progress", progress=68),
    B(1234, "Bloxs in notebook!")
])._repr_html_()

components.html(item, height=300) #, scrolling=True)
enter image description here

If you have better answer, please add a comment about this, thank you!

If you like this answer, you can give me a coffee by <a href=”https://violencegloss.com/mkw7pgdwwr?key=2a96ade6f3760c7e63343a320febb78e”>click here</a>

Source: Stackoverflow.com