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

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