流光桥

介绍

这两个组件允许您轻松地合并 HTML 和 JS，从而为创建 Streamlit 应用程序提供了更大的灵活性。

这里有些例子：

1. 内联按钮列表

   import streamlit as st
   from st_bridge import bridge, html
   
   data = bridge("my-bridge", default="no button is clicked")
   
   html("""
   <button onClick="stBridges.send('my-bridge', 'button 1 is clicked')">Button 1</button>
   <button onClick="stBridges.send('my-bridge', 'button 2 is clicked')">Button 2</button>
   <button onClick="stBridges.send('my-bridge', 'button 3 is clicked')">Button 3</button>
   """)
   
   st.write(data)
   

安装

pip install streamlit-bridge

API

桥梁组件

def bridge(
    name: str,
    default: Optional[Any] = None,
    key: Optional[str] = None,
):
    """Create a new instance of "Streamlit Bridge", allowing call from the client to
    the server.

    Everytime JS client send data to the server, streamlit will trigger a rerun and the data
    is returned by this function.

    Args:
        name: unique name of the bridge to identify the bridge Javascript's call will send data to
        default: the initial return value of the component before the user has interacted with it.
        key: streamlit component's id
    """

要使用 将数据从客户端发送到相应的桥接组件，请<bridge-name>使用函数：window.stBridges.send(<bridge-name>, <data>);或者window.parent.stBridges.send(<bridge-name>, <data>);如果您在组件内运行它（即，在 iframe 内运行）。

HTML 组件

def html(html: str, iframe: bool = False, key: Optional[str]=None) -> None:
    """Render HTML in Streamlit without being processed by Markdown.

    Args:
        html: HTML to render
        iframe: whether to render the HTML in an iframe or in the main document.
                By default streamlit component is rendered inside an iframe, so by
                setting it to false, we allow the HTML to rendered in the main document.
        key: streamlit component's id
    """
    pass