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!")
])

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?

how did you try it with HTML component. It would be simpler if you would create minimal working code which we could simply copy and test. As for me `B()` may need to convert it to HTML and laster use it with HTML component - but it would need to see it in action and it would need to create minimal working code (but we are too lazy for this) — furas, Jul 30 '22 at 16:34
I tried calling the class object directly in HTML components without converting it to HTML. — Ailurophile, Jul 31 '22 at 04:41

furas · Accepted Answer · 2022-07-30T18:05:13.823

1

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)

edited Jul 30 '22 at 18:05

answered Jul 30 '22 at 17:57

furas

134,197
12
106
148

Is there a way to autofit the HTML render? I mean the height and width. – Ailurophile Jul 31 '22 at 04:43
it may need to use some CSS or JavaScript. See [javascript - Make iframe automatically adjust height according to the contents without using scrollbar? - Stack Overflow](https://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using) – furas Jul 31 '22 at 15:34
1

BTW: in [doumentation](https://docs.streamlit.io/library/components/components-api) you can see it use default height 150px but width is `"Defaults to the app's default element width."` so it shoult automatically set width to external/parent tag - and this is how most CSS frameworks work (they have predefined widths for different devices and all objects use this width) – furas Jul 31 '22 at 15:40

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

1 Answers1