Based on what you’re saying, I think when we add support for horizontal layouts we should probably also support grid layouts. So I created a feature request here: https://github.com/streamlit/streamlit/issues/309 .
Please follow the feature there to be notified when we implement it. And help us come up with a nice API for it too!
def video_youtube(src: str, width="100%", height=315):
"""An extension of the video widget
Arguments:
src {str} -- A youtube url like https://www.youtube.com/embed/B2iAodr0fOo
Keyword Arguments:
width {str} -- The width of the video (default: {"100%"})
height {int} -- The height of the video (default: {315})
"""
st.write(
f'<iframe width="{width}" height="{height}" src="{src}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
unsafe_allow_html=True,
)
I guess I will be developing more extensions using html as I continue. You can find them in for inspiration
I would like to create a tooltip to provide more info related to an item on my app. So, once a user hovers over it, the tooltip should be displayed. Is there a way to achieve this at the moment?
One more question that is related to HTML:
Is there a way to customize the HTML of the default index page and add custom CSS styling as well, etc.?
Thanks for the amazing app. It’s really amazing, and speeds up everything. Thanks a million!
Hi. The use case that came to my mind (and actually how I found this page) is embedding an interactive code/text editor like this one: https://ace.c9.io/
I would like to embed graph visualisations based on d3js (e.g. based on this library https://github.com/vasturiano/force-graph) in my streamlit app. Is this even possible?
Thanks @thiago for the fast response! I’ll track the feature request
I am still wondering about a temporary workaround. So far, I need to run a separate local python server to access the visualisation htmls (because of the browser’s same-origin policy). Would it be possible for me to copy the vis-htmls to the local streamlit folder, in order to access them from the same port as streamlit (8501 for instance)?
EDIT: Found the static html folder, I’ll just symlink my generated htmls inside it for the time being. It’s a bit of a sketchy workaround, but it’s okay for now! Being able to embed js in streamlit at some point would be awesome!
Sorry to disturb you again. Could you please help me with how to import material-icons as you mentioned in the following line?
st.markdown(‘face’, unsafe_allow_html=True)
That’s a cool idea, but we’ll have to think a bit about how it fits with the rest of the API. For example, should icons be clickable? How would st.css interop with our planned horizontal/grid layout APIs? etc.
In the meantime, you could always create your own library and share with the community through Github
Something like:
(NOTE: This code is untested!)
import streamlit as st
def local_css(file_name):
with open(file_name) as f:
st.markdown('<style>{}</style>'.format(f.read()), unsafe_allow_html=True)
def remote_css(url):
st.markdown('<style src="{}"></style>'.format(url), unsafe_allow_html=True)
def icon_css(icone_name):
remote_css('https://fonts.googleapis.com/icon?family=Material+Icons')
def icon(icon_name):
st.markdown('<i class="material-icons">{}</i>'.format(icon_name), unsafe_allow_html=True)
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.