streamlit-shadcn-ui :施工中:

在streamlit中使用shadcn-ui组件

<img width="1453" alt="streamlit-shadcn" src="https://github.com/ObservedObserver/streamlit-shadcn-ui/assets/22167673/75620347-9e9c-454c-a7ce-381d7464c519">

安装

pip install streamlit-shadcn-ui

示例:

import streamlit_shadcn_ui as ui
trigger_btn = ui.button(text="触发按钮", key="trigger_btn")

ui.alert_dialog(show=trigger_btn, title="警告对话框", description="这是一个警告对话框", confirm_label="确定", cancel_label="取消", key="alert_dialog1")

组件

在中查看文档和组件示例

• 按钮
• 复选框
• 选择框
• 标签页
• 卡片
• 头像
• 日期选择器
• 日期范围选择器（日期选择器模式为"range"）
• 表格
• 输入框
• 滑块
• 文本区域
• 开关
• 单选组
• 警告对话框
• 悬停卡片
• 徽章
• 链接按钮

更多内容

目前正在测试一个新组件，它将允许您嵌套所有streamlit-shadcn-ui组件。 它不会将每个组件作为iframe中的独立streamlit自定义组件处理，而是将组件结构解析为数据，并在一个iframe中一次性渲染所有组件。

示例（在线演示):

with ui.card(key="card1"):
    with ui.card(key="card2"):
        ui.element("input", key="card2_input")
        ui.element("button", key="card2_btn", text="嵌套提交", variant="outline")
    ui.element("button", key="card1_btn", text="你好世界")

开发指南

scripts文件夹中有几个脚本可以帮助您开发此项目。

# 用于本地开发
./scripts/frontend.sh # 前端开发服务器
./scripts/dev.sh # streamlit开发服务器

本仓库遵循streamlit自定义组件结构。

• ./streamlit_shadcn_ui 是Python包
  • ./streamlit_shadcn_ui/components 是前端monorepo
    • ./streamlit_shadcn_ui/components/packages/frontend 是自定义组件集合。
    • ./streamlit_shadcn_ui/components/packages/streamlit-components-lib 是为React 18打补丁的streamlit-components-lib（目前只改变了react/react-dom版本）。
  • ./streamlit_shadcn_ui/py_components 是组件的Python级API。

参考

• streamlit-shadcn-ui示例和文档仓库
• Streamlit
• shadcn-ui

许可证

本仓库采用MIT许可证。详情请参阅LICENSE。 streamlit_shadcn_ui/components/packages/streamlit-components-lib遵循其原始的Apache-2.0许可证。这是streamlit-components-lib在React 18中的临时补丁。