PyPI - streamlit-toggle-diy - Versions diffs - 1.0.1__py3-none-any.whl → 1.1.4__py3-none-any.whl - Mend

streamlit-toggle-diy 1.0.1py3-none-any.whl → 1.1.4py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

streamlit_toggle_diy/frontend/public/index.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Streamlit Component</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Streamlit Component" />
+    <link rel="stylesheet" href="bootstrap.min.css" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

streamlit_toggle_diy/frontend/src/index.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import StreamlitToggleSwitch from "./streamlit_toggle"
+ReactDOM.render(
+  <React.StrictMode>
+    <StreamlitToggleSwitch />
+  </React.StrictMode>,
+  document.getElementById("root")
+)

streamlit_toggle_diy/frontend/src/react-app-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="react-scripts" />

streamlit_toggle_diy/frontend/src/streamlit_toggle.tsx ADDED Viewed

@@ -0,0 +1,170 @@
+import {
+  ComponentProps,
+  Streamlit,
+  withStreamlitConnection,
+} from "streamlit-component-lib";
+import React, { useEffect, useRef } from "react";
+import { createTheme } from "@material-ui/core/styles";
+import { Typography, Switch, Grid } from "@material-ui/core";
+import { ThemeProvider } from "@material-ui/styles";
+interface ToggleSwitchProps {
+  // 原有参数
+  default_value: boolean;
+  label_start?: string;
+  label_end?: string;
+  justify?: "flex-start" | "center" | "flex-end";
+  active_color?: string;
+  inactive_color?: string;
+  track_color?: string;
+  label_bg_color_start?: string;
+  label_bg_color_end?: string;
+  background_color_near_button_start?: string;
+  background_color_near_button_end?: string;
+  border_radius?: string;
+  label_start_color?: string; // 左侧标签文字颜色
+  label_end_color?: string;   // 右侧标签文字颜色
+  label_font_size?: string;   // 标签文字大小
+  label_font_weight?: string; // 标签文字粗细
+  switch_size?: "small" | "medium"; // Switch 尺寸
+}
+const StreamlitToggle = (props: ComponentProps) => {
+  // 1. 从 props.args 中解构所有参数
+  const {
+    // -- 基础必选 --
+    default_value,
+    // -- 已有可选 --
+    label_start,
+    label_end,
+    justify = "flex-start",
+    inactive_color='#CEE8FF',
+    active_color="#00668c",
+    track_color="#3D5A80",
+    label_bg_color_start="#FFFFFF",
+    label_bg_color_end="yellow",
+    background_color_near_button_start="#FFFFFF",
+    background_color_near_button_end="#FFFFFF",
+    border_radius='30px',
+    label_start_color="#333333",
+    label_end_color="red",
+    label_font_size="16px",
+    label_font_weight="bold",
+    switch_size="medium",
+  } = props.args as ToggleSwitchProps;
+  // 2. 引入容器引用，以便 setFrameHeight() 时保证内容高度正确
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    // 通知 Streamlit 调整 iframe 高度
+    Streamlit.setFrameHeight();
+  }, []);
+  // 3. 管理 Switch 状态
+  const [state, setState] = React.useState({
+    checkStatus: default_value,
+  });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [event.target.name]: event.target.checked });
+    // 将选中状态传回 Python
+    Streamlit.setComponentValue(event.target.checked);
+  };
+  // 4. Material-UI 主题：动态覆盖 Switch 的颜色
+  const snowflakeTheme = createTheme({
+    overrides: {
+      MuiSwitch: {
+        switchBase: {
+          color: inactive_color, // 未选中时的按钮颜色
+        },
+        colorSecondary: {
+          "&$checked": {
+            color: active_color, // 选中时按钮颜色
+          },
+        },
+        track: {
+          opacity: 0.1,
+          backgroundColor: track_color, // 轨道颜色
+          "$checked$checked + &": {
+            opacity: 1,
+            backgroundColor: track_color,
+          },
+        },
+      },
+    },
+  });
+  // 5. 样式：标签与背景
+  const labelStartStyle: React.CSSProperties = {
+    backgroundColor: label_bg_color_start,
+    color: label_start_color,
+    padding: "4px 8px",
+    borderRadius: border_radius,
+    display: "inline-block",
+    fontWeight: label_font_weight,
+    fontSize: label_font_size,
+  };
+  const labelEndStyle: React.CSSProperties = {
+    backgroundColor: label_bg_color_end,
+    color: label_end_color,
+    padding: "4px 8px",
+    borderRadius: border_radius,
+    display: "inline-block",
+    fontWeight: label_font_weight,
+    fontSize: label_font_size,
+  };
+  // 背景（左右渐变或单色）
+  const buttonBackgroundStyle: React.CSSProperties = {
+    background:
+      background_color_near_button_start && background_color_near_button_end
+        ? `linear-gradient(to right, ${background_color_near_button_start}, ${background_color_near_button_end})`
+        : background_color_near_button_start ||
+          background_color_near_button_end ||
+          "#ffffff",
+    padding: "10px",
+    borderRadius: border_radius,
+    display: "flex",
+    alignItems: "center",
+  };
+  // 6. 组件 JSX
+  return (
+    <ThemeProvider theme={snowflakeTheme}>
+      <Typography
+        component="div"
+        variant="subtitle1"
+        paragraph={false}
+        gutterBottom={false}
+      >
+        <div ref={containerRef} style={buttonBackgroundStyle}>
+          <Grid container justifyContent={justify} alignItems="center" spacing={1}>
+            {label_start && (
+              <Grid item>
+                <span style={labelStartStyle}>{label_start}</span>
+              </Grid>
+            )}
+            <Grid item>
+              <Switch
+                checked={state.checkStatus}
+                onChange={handleChange}
+                name="checkStatus"
+                size={switch_size} // 新增：Switch 尺寸
+              />
+            </Grid>
+            {label_end && (
+              <Grid item>
+                <span style={labelEndStyle}>{label_end}</span>
+              </Grid>
+            )}
+          </Grid>
+        </div>
+      </Typography>
+    </ThemeProvider>
+  );
+};
+export default withStreamlitConnection(StreamlitToggle);

streamlit_toggle_diy/frontend/src/style.css ADDED Viewed

@@ -0,0 +1,6 @@
+.afterText, .beforeText{
+    margin-top: 4px!important;
+}
+.MuiGrid-justify-content-xs-flex-end {
+    justify-content: flex-start!important;
+}

streamlit_toggle_diy-1.1.4.dist-info/METADATA ADDED Viewed

@@ -0,0 +1,88 @@
+Metadata-Version: 2.1
+Name: streamlit_toggle_diy
+Version: 1.1.4
+Summary: A customized Streamlit toggle switch component with customizable labels, colors, and border radius
+Home-page: https://github.com/flowing-water1/streamlit-toggle-switch-diy
+Author: Flow Water
+Author-email: 1665526933@qq.com
+Requires-Python: >=3.6
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: streamlit>=0.63
+# streamlit-toggle-diy
+Creates a toggle switch with color and placement customizations, and you can change the label's color, radius, font size, and more.
+## Function
+- Customize label background color
+- Customize the text color, font size, and font weight for both labels
+- Customize the Switch size (small or medium)
+- Customize the background color near the button
+- Custom rounded corners
+- Support multiple layout methods
+## Installation
+```shell
+pip install streamlit-toggle-diy
+```
+## Usage
+```python
+import streamlit as st
+import streamlit-toggle-diy as tog
+tog.st_toggle_switch(
+    key=None,
+    label_start="111",
+    label_end="",
+    justify='flex-start',
+    default_value=False,
+    inactive_color='#D3D3D3',
+    active_color="#11567f",
+    track_color="#29B5E8",
+    label_bg_color_start=None,
+    label_bg_color_end=None,
+    background_color_near_button_start=None,
+    background_color_near_button_end=None,
+    border_radius=None,
+)
+```
+## Parameters
+| **Parameter Name**                         | **Type**                             | **Default**    | **Description**                                                                                                                         |
+| ------------------------------------------ | ------------------------------------ | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| **key**                                    | `str`                                | None           | The unique identifier for each component instance.<br />Used to distinguish different component instances in the Streamlit application. |
+| **label\_start**                           | `str`                                | `""`           | The text content of the label before the switch. If a preceding label is not needed, pass an empty string`""`.                          |
+| **label\_end**                             | `str`                                | `""`           | The text content of the label after the switch. If a following label is not needed, pass an empty string`""`.                           |
+| **justify**                                | `{'flex-start','center','flex-end'}` | `'flex-start'` | Controls alignment of labels and the switch within the container.                                                                       |
+| **default\_value**                         | `bool`                               | `False`        | The initial state of the toggle switch.`True`= On,`False`= Off.                                                                         |
+| **inactive\_color**                        | `str`                                | `'#D3D3D3'`    | The color of the slider when the switch is inactive (off).                                                                              |
+| **active\_color**                          | `str`                                | `'#11567f'`    | The color of the slider when the switch is active (on).                                                                                 |
+| **track\_color**                           | `str`                                | `'#29B5E8'`    | The color of the switch track (background).                                                                                             |
+| **label\_bg\_color\_start**                | `str`                                | `None`         | The starting value of the label background color, used to create a gradient effect.                                                     |
+| **label\_bg\_color\_end**                  | `str`                                | `None`         | The ending value of the label background color, used to create a gradient effect.                                                       |
+| **background\_color\_near\_button\_start** | `str`                                | `None`         | The starting value of the background color near the switch, used to create a gradient effect behind the component.                      |
+| **background\_color\_near\_button\_end**   | `str`                                | `None`         | The ending value of the background color near the switch, used to create a gradient effect behind the component.                        |
+| **border\_radius**                         | `str`                                | `None`         | The border-radius of the component, such as`'4px'`,`'8px'`,`'50%'`, etc.                                                                |
+| **label\_start\_color**                    | `str`                                | `"#7f1916"`    | Text color for the left (start) label.                                                                                                  |
+| **label\_end\_color**                      | `str`                                | `"#FFFFFF"`    | Text color for the right (end) label.                                                                                                   |
+| **label\_font\_size**                      | `str`                                | `"14px"`       | Font size for both labels (e.g.`"14px"`,`"12pt"`).                                                                                      |
+| **label\_font\_weight**                    | `str`                                | `"bold"`       | Font weight for both labels (e.g.`"bold"`,`"normal"`,`"500"`).                                                                          |
+| **switch\_size**                           | `{'small','medium'}`                 | `"medium"`     | The size of the Switch component.                                                                                                       |
+> **Note**:
+>
+> * If both `label_bg_color_start` and `label_bg_color_end` are set, a gradient background for the label(s) will be created.
+> * If both `background_color_near_button_start` and `background_color_near_button_end` are provided, a gradient behind the switch is created.
+> * If you only provide one color, it will be used as a solid background.
+> * `label_start_color` and `label_end_color` control the text color of labels, while `label_bg_color_start` and `label_bg_color_end` control the background of those labels.
+## Operation
+![streamlit.gif](assets/streamlit.gif)

streamlit_toggle_diy-1.1.4.dist-info/RECORD ADDED Viewed

@@ -0,0 +1,35 @@
+streamlit_toggle_diy/__init__.py,sha256=RPo0LyCPihcZW7V9RhqsJrXFM4w0PN53kcmQt643PEY,11071
+streamlit_toggle_diy/frontend/build/asset-manifest.json,sha256=6Ohohv0eSXbiFZBQsSRZl_Eo_uBKqqWzU4G6Eri2FWs,859
+streamlit_toggle_diy/frontend/build/bootstrap.min.css,sha256=hTwg6axJ8dAPmGVJmYTrsQS3JhKWA0skJ-td54UbEOk,197459
+streamlit_toggle_diy/frontend/build/index.html,sha256=BIhpXUjrxMC2l33tpBlXAC2z0hy9k2Dh4QRI6qQDAhE,2085
+streamlit_toggle_diy/frontend/build/precache-manifest.208239bd31634c912148876425127f2c.js,sha256=g6l3wTxp-Gx7vsm9HU7MBv8N2sKIZIRwBdQKXe6RODY,564
+streamlit_toggle_diy/frontend/build/precache-manifest.669f85f994ea2c0d193915faa9d91f97.js,sha256=VF6vnplDuDYws7J5o5iGyIuSEjBVqVcmH8f606xJrUI,564
+streamlit_toggle_diy/frontend/build/precache-manifest.b7df6085566f07f8f27b94ee8ed2d302.js,sha256=yZ0E8cubRljI8p1lsAIc-YN-pjVJ2BNRma4cfp188X0,564
+streamlit_toggle_diy/frontend/build/service-worker.js,sha256=6vBxp1L5jl8JuSD5gcMBGukv1xb3TC1xtzAvxMkUfyE,1183
+streamlit_toggle_diy/frontend/build/static/js/2.82cd69ef.chunk.js,sha256=iI-6zSaFjHrVMDs5IcvYU1OVxSf5qJwlHURziuCP4co,668310
+streamlit_toggle_diy/frontend/build/static/js/2.82cd69ef.chunk.js.LICENSE.txt,sha256=H626T6BMSwnq-XFGfmNj9boRuONWUwScDJGw74vRftQ,1969
+streamlit_toggle_diy/frontend/build/static/js/2.82cd69ef.chunk.js.map,sha256=IPAfUQsdk-MV69vDWwKG_Tq8Dqpk0cduCSCB12dUaOE,2233103
+streamlit_toggle_diy/frontend/build/static/js/2.9720bf9e.chunk.js,sha256=r76t4pKFSxrC1oZik1WSzsTSOp7zq8IwG5uP0MK8a4w,668294
+streamlit_toggle_diy/frontend/build/static/js/2.9720bf9e.chunk.js.LICENSE.txt,sha256=H626T6BMSwnq-XFGfmNj9boRuONWUwScDJGw74vRftQ,1969
+streamlit_toggle_diy/frontend/build/static/js/2.9720bf9e.chunk.js.map,sha256=eg3P-Yc3hNnGUKLxbInAWkAlnYVVFFlcuKFJo_pO6jc,2233103
+streamlit_toggle_diy/frontend/build/static/js/main.72a874a0.chunk.js,sha256=FfaycPp6qqpxt5qXQOUc13WUXoxjvb4ZTHUVAqpfYRs,2576
+streamlit_toggle_diy/frontend/build/static/js/main.72a874a0.chunk.js.map,sha256=uE6oOalTF-b3DAJtwIpJWT4W-6aho3tCZISCA-3TCLk,9422
+streamlit_toggle_diy/frontend/build/static/js/main.93eb9d37.chunk.js,sha256=qttewDTdClUb3ry99Ih9ewLMJ0nK5o7eBDovTFBGklE,1991
+streamlit_toggle_diy/frontend/build/static/js/main.93eb9d37.chunk.js.map,sha256=pX-qmkWFUOetjQ6xFBMpzMeKg9ahFUeKSDBjY_LzZew,7043
+streamlit_toggle_diy/frontend/build/static/js/main.9f3c3eed.chunk.js,sha256=AOoAHvlJ2UV7b7sGV47sR_2HzrH6Z6kq3htwTNYtQyE,2560
+streamlit_toggle_diy/frontend/build/static/js/main.9f3c3eed.chunk.js.map,sha256=Gt-uI9COnfMQ1Paax2xND0EMJn_T5VZzHEq_DLk9BkM,9422
+streamlit_toggle_diy/frontend/build/static/js/runtime-main.cc20bba3.js,sha256=fPgOCYqsGvWhMaPhVkWzyIXu18b1ZAEHcnlEaehuFxE,1582
+streamlit_toggle_diy/frontend/build/static/js/runtime-main.cc20bba3.js.map,sha256=nD-RhUp2C-J8HxxejdeZMOdN6H6pijIzkaZo_l52vvQ,8301
+streamlit_toggle_diy/frontend/build/static/js/runtime-main.d76c522e.js,sha256=NsBmq9EdX8DFZR9QBem8uQTt0h6WvnZ__cvfU49ghbo,1598
+streamlit_toggle_diy/frontend/build/static/js/runtime-main.d76c522e.js.map,sha256=8hiL7qtk5WZTEu5Xt6x712cQci8myG_9wM_hc4HDZNU,8317
+streamlit_toggle_diy/frontend/public/bootstrap.min.css,sha256=hTwg6axJ8dAPmGVJmYTrsQS3JhKWA0skJ-td54UbEOk,197459
+streamlit_toggle_diy/frontend/public/index.html,sha256=pd7UG_FaSF9p3dPQLDghzAmcNX2pYgJjxC4y2fzPCCA,894
+streamlit_toggle_diy/frontend/src/index.tsx,sha256=X_k1aZGH_KKCQnhoxvBtBG_r09zqaLbtIXnuCMId3i8,243
+streamlit_toggle_diy/frontend/src/react-app-env.d.ts,sha256=V-2kxMBKHcpFxihXMmiCzpzJSMS1KXPA48O35MP6OZA,40
+streamlit_toggle_diy/frontend/src/streamlit_toggle.tsx,sha256=4wVPf_La5KBGtZwwcSodKv0vyOHsyHYP6DLvp0oIiDs,5115
+streamlit_toggle_diy/frontend/src/style.css,sha256=Dv1altORNXSycHo4hYEtekgCYJQNNJ_FmqvkZCwmwpA,142
+streamlit_toggle_diy-1.1.4.dist-info/LICENSE,sha256=NjPmumOMFSp_Jkk0GC961Ie0-R4mbAV6POCovLzRQJk,1061
+streamlit_toggle_diy-1.1.4.dist-info/METADATA,sha256=H9D0X6riVzu8Dg42WWqJIa6I4rn1dNlklRrAXOPYzS8,6888
+streamlit_toggle_diy-1.1.4.dist-info/WHEEL,sha256=GV9aMThwP_4oNCtvEC2ec3qUYutgWeAzklro_0m4WJQ,91
+streamlit_toggle_diy-1.1.4.dist-info/top_level.txt,sha256=nFI-mEsztmjsHXlvV0MpfzhT-2ovmY270y2Ulm--D3I,21
+streamlit_toggle_diy-1.1.4.dist-info/RECORD,,

{streamlit_toggle_diy-1.0.1.dist-info → streamlit_toggle_diy-1.1.4.dist-info}/WHEEL RENAMED Viewed

@@ -1,5 +1,5 @@
 Wheel-Version: 1.0
-Generator: setuptools (75.6.0)
+Generator: setuptools (75.1.0)
 Root-Is-Purelib: true
 Tag: py3-none-any

streamlit_toggle_diy-1.0.1.dist-info/METADATA DELETED Viewed

@@ -1,10 +0,0 @@
-Metadata-Version: 2.1
-Name: streamlit_toggle_diy
-Version: 1.0.1
-Summary: Creates a customizable toggle, and you can switch the background color of label
-Home-page: https://github.com/sqlinsights/streamlit-toggle-switch
-Author: Flow_Water
-Author-email: 1665526933@qq.com
-Requires-Python: >=3.6
-License-File: LICENSE
-Requires-Dist: streamlit>=0.63

streamlit_toggle_diy-1.0.1.dist-info/RECORD DELETED Viewed

@@ -1,6 +0,0 @@
-streamlit_toggle_diy/__init__.py,sha256=AGRjNeZsgLF4783MjB7feh-FBzcczvz_yozCyZSbuME,5237
-streamlit_toggle_diy-1.0.1.dist-info/LICENSE,sha256=NjPmumOMFSp_Jkk0GC961Ie0-R4mbAV6POCovLzRQJk,1061
-streamlit_toggle_diy-1.0.1.dist-info/METADATA,sha256=-GUgPeZ_K1pi_afw2Z7RlgfEloKrAwGLNPEO_dOWc6c,356
-streamlit_toggle_diy-1.0.1.dist-info/WHEEL,sha256=PZUExdf71Ui_so67QXpySuHtCi3-J3wvF4ORK6k_S8U,91
-streamlit_toggle_diy-1.0.1.dist-info/top_level.txt,sha256=nFI-mEsztmjsHXlvV0MpfzhT-2ovmY270y2Ulm--D3I,21
-streamlit_toggle_diy-1.0.1.dist-info/RECORD,,

{streamlit_toggle_diy-1.0.1.dist-info → streamlit_toggle_diy-1.1.4.dist-info}/LICENSE RENAMED Viewed

File without changes

{streamlit_toggle_diy-1.0.1.dist-info → streamlit_toggle_diy-1.1.4.dist-info}/top_level.txt RENAMED Viewed

File without changes

streamlit-toggle-diy 1.0.1__py3-none-any.whl → 1.1.4__py3-none-any.whl

streamlit-toggle-diy 1.0.1py3-none-any.whl → 1.1.4py3-none-any.whl