streamlit 展示自定义 html 以及 css

发布时间 2023-12-03 15:33:21作者: BuckyI

目前探索出来的有效方法:

style = """
        <style>
        .memo-box {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
        }

        .tag {
            font-size: 12px;
            color: #888;
        }
        </style>
        """
html = """
<div class="memo-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra mauris sit amet neque ullamcorper, sed rhoncus tortor dapibus. Fusce auctor nisi nec nisi rutrum, vitae rutrum lacus tincidunt.</p>
    <span class="tag">#tag</span>
  </div>
"""
st.components.v1.html(style + html)

style 和 html 要放在一起,如果分开的话,style 可能不会生效。

参考链接:
discuss.streamlit.io/t/applying-custom-css-to-manually-created-containers/33428/2
Components API - Streamlit Docs