Working on nice Streamlit app with Columns and Metrics. I noticed the streamlit doc website appears to be a streamlit app with columns? If so, how can I format my metric in similar way? thank you
Well, you can achieve this effect in part with html & st.markdown, but you have to inspect elements, isolate them and then colour them. Refer the pix for the effect I tried to produce and the colours can be changed as required.
Or you can just create your own components and layouts so it looks exactly how you want.
A page from a credit assessment system I created for a client, all Streamlit with custom components for the widgets not available from the standard offering.
Wow, how does one make your own components (like you did with metrics and adding the icon in upper right corner)? I’d love to see a code example to start with.
Does anyone know if the stream doc website is actually written in streamlit? https://docs.streamlit.io/
Here is an example with fontawesome icons and different colours.
But components are a better way to go.
Cheers.
Hi @saxon11,
Just to clarify: The Streamlit documentation is not a Streamlit app. We use Next.js, React, and Markdown to build the site and Netlify to host it. The code is public: GitHub - streamlit/docs: Source code for the Streamlit Python library documentation
Best,
Snehan
I don’t have the earlier code as that was written just for a temporary purpose.
I have re-written the following code only for 1 kpi metric. You can do:
a. put the code in a function, so you can all it many times
b. change the parameters & variables to suit your purpose
c. use st.columns for multiple kpi metrics, etc.
# variables wch_colour_box = (0, 204, 102) # green wch_colour_font = (0, 0, 0) # blackfont fontsize = 18 valign = "left" iconname = "fas fa-asterisk" sline = "Users" # kpi name lnk = '' i = 1000 # kpi value htmlstr = f"""{i}
<span style='font-size: 18px; margin-top: 0;'>{sline}</style> </span></p>"""
st.markdown(lnk + htmlstr, unsafe_allow_html=True)
Also, pasting a snapshot of the code here, as my copy-paste makes some of my text disappear.
Cheers
Maybe it’s late but how can i get like these customized metrics?
Just try out the code given in the picture above, and then modify it for your use, as needed.
Cheers