streamlit-toggle-diy 1.0.1__tar.gz → 1.1.4__tar.gz

streamlit_toggle_diy-1.1.4/MANIFEST.in

@@ -0,0 +1,3 @@
+recursive-include streamlit_toggle_diy/frontend/build *
+recursive-include streamlit_toggle_diy/frontend/src *
+recursive-include streamlit_toggle_diy/frontend/public *

streamlit_toggle_diy-1.1.4/PKG-INFO

@@ -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/README.md

@@ -0,0 +1,76 @@
+# 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/setup.py

@@ -0,0 +1,30 @@
+import setuptools
+import os
+
+# 读取 README.md 内容
+with open("README.md", "r", encoding="utf-8") as fh:
+    long_description = fh.read()
+
+setuptools.setup(
+    name="streamlit_toggle_diy",
+    version="1.1.4",
+    author="Flow Water",
+    author_email="1665526933@qq.com",
+    description="A customized Streamlit toggle switch component with customizable labels, colors, and border radius",
+    long_description=long_description,  # 设置长描述
+    long_description_content_type="text/markdown",  # 指定内容类型为 Markdown
+    url="https://github.com/flowing-water1/streamlit-toggle-switch-diy",
+    packages=setuptools.find_packages(),
+    include_package_data=True,
+    package_data={
+        "streamlit_toggle_diy": [
+            "frontend/build/**/*",
+            "frontend/public/**/*",
+        ],
+    },
+    classifiers=[],
+    python_requires=">=3.6",
+    install_requires=[
+        "streamlit >= 0.63",
+    ],
+)

streamlit_toggle_diy-1.1.4/streamlit_toggle_diy/__init__.py

@@ -0,0 +1,295 @@
+import os
+import streamlit.components.v1 as components
+import streamlit as st
+
+_RELEASE = True
+
+if not _RELEASE:
+    _component_func = components.declare_component(
+        "streamlit_toggle_diy",
+        url="http://localhost:3001",  # 本地开发时的地址
+    )
+else:
+    parent_dir = os.path.dirname(os.path.abspath(__file__))
+    build_dir = os.path.join(parent_dir, "frontend/build")
+    _component_func = components.declare_component("streamlit_toggle_diy", path=build_dir)
+
+
+def st_toggle_switch(
+    key=None,
+    label_start="",          # 前标签文字
+    label_end="",            # 后标签文字
+    justify='flex-start',    # 对齐方式
+    default_value=False,     # 默认开关状态
+    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",
+):
+    """
+    在 Streamlit 中创建一个可自定义颜色、大小的切换开关组件。
+
+    Parameters
+    ----------
+    key: str
+        组件在 session_state 中的 key，用于区分多个组件实例。
+    label_start: str
+        开关左侧标签文字。
+    label_end: str
+        开关右侧标签文字。
+    justify: {'flex-start', 'center', 'flex-end'}
+        标签和开关在容器中的对齐方式。
+    default_value: bool
+        开关的默认状态，True 为打开，False 为关闭。
+    inactive_color: str
+        开关未激活时的按钮颜色。
+    active_color: str
+        开关激活时的按钮颜色。
+    track_color: str
+        开关轨道（背景）的颜色。
+    label_bg_color_start: str
+        左 / 上方标签背景色（如果需要渐变，可与 label_bg_color_end 联合使用）。
+    label_bg_color_end: str
+        右 / 下方标签背景色（如果需要渐变，可与 label_bg_color_start 联合使用）。
+    background_color_near_button_start: str
+        开关附近背景的起始颜色（可配合 background_color_near_button_end 做渐变）。
+    background_color_near_button_end: str
+        开关附近背景的结束颜色（可配合 background_color_near_button_start 做渐变）。
+    border_radius: str
+        组件的圆角，如 '4px', '8px', '50%' 等。
+
+    label_start_color: str
+        前标签文字颜色（默认为 #7f1916）。
+    label_end_color: str
+        后标签文字颜色（默认为 #FFFFFF）。
+    label_font_size: str
+        标签文字的字体大小（如 '14px' 等）。
+    label_font_weight: str
+        标签文字的粗细（如 'bold', 'normal', '500' 等）。
+    switch_size: {'small', 'medium'}
+        切换开关本身的尺寸。
+
+    Returns
+    -------
+    bool
+        返回切换后的状态。如果无法获取，则返回 default_value。
+    """
+
+    toggle_value = _component_func(
+        key=key,
+        default_value=default_value,
+        label_start=label_start,
+        label_end=label_end,
+        justify=justify,
+        inactive_color=inactive_color,
+        active_color=active_color,
+        track_color=track_color,
+        label_bg_color_start=label_bg_color_start,
+        label_bg_color_end=label_bg_color_end,
+        background_color_near_button_start=background_color_near_button_start,
+        background_color_near_button_end=background_color_near_button_end,
+        border_radius=border_radius,
+        label_start_color=label_start_color,
+        label_end_color=label_end_color,
+        label_font_size=label_font_size,
+        label_font_weight=label_font_weight,
+        switch_size=switch_size,
+    )
+    return toggle_value if toggle_value is not None else default_value
+
+
+# 仅在开发环境时演示组件效果
+if not _RELEASE:
+    st.header('Streamlit Toggle Switch - Dev Mode')
+    st.write('---')
+
+    # 使用 color_picker 选择不同颜色
+    color1_start = st.color_picker('选择 Question 1 标签起始背景颜色', '#FFD700')
+    color1_end = st.color_picker('选择 Question 1 标签结束背景颜色', '#FF8C00')
+
+    color2_start = st.color_picker('选择 Question 2 标签起始背景颜色', '#ADFF2F')
+    color2_end = st.color_picker('选择 Question 2 标签结束背景颜色', '#32CD32')
+
+    color3_start = st.color_picker('选择 Question 3 标签起始背景颜色', '#1E90FF')
+    color3_end = st.color_picker('选择 Question 3 标签结束背景颜色', '#0000FF')
+
+    color4_start = st.color_picker('选择 Question 4 标签起始背景颜色', '#FF69B4')
+    color4_end = st.color_picker('选择 Question 4 标签结束背景颜色', '#FF1493')
+
+    color5_start = st.color_picker('选择 Disable Filter 标签起始背景颜色', '#00FA9A')
+    color5_end = st.color_picker('选择 Disable Filter 标签结束背景颜色', '#00FF7F')
+
+    # 新增颜色选择器用于按钮附近的背景颜色
+    button_bg_start = st.color_picker('按钮附近的起始背景颜色', '#FFFFFF')
+    button_bg_end = st.color_picker('按钮附近的结束背景颜色', '#FFFFFF')
+
+    # 新增圆角选择器
+    border_radius = st.text_input('组件圆角（如：4px, 8px, 50%）', '8px')
+
+    # 新增对齐方式选择器
+    justify = st.selectbox(
+        '标签与开关的对齐方式',
+        ('flex-start', 'center', 'flex-end')
+    )
+
+    # 新增标签文字颜色选择
+    label_start_color = st.color_picker("左侧标签文字颜色", "#7f1916")
+    label_end_color = st.color_picker("右侧标签文字颜色", "#FFFFFF")
+
+    # 标签字体大小与粗细
+    label_font_size = st.text_input("标签字体大小", "14px")
+    label_font_weight = st.text_input("标签字体粗细", "bold")
+
+    # Switch 尺寸选择器
+    switch_size = st.selectbox(
+        "Switch 尺寸",
+        ("small", "medium")
+    )
+
+    columns = st.columns(3)
+    with columns[0]:
+        st_toggle_switch(
+            key='c1',
+            label_start="Question 1",
+            label_end="",  # 不显示后标签
+            justify=justify,
+            default_value=True,
+            inactive_color='#D3D3D3',
+            active_color="#11567f",
+            track_color="#29B5E8",
+            label_bg_color_start=color1_start,
+            label_bg_color_end=color1_end,
+            background_color_near_button_start=button_bg_start,
+            background_color_near_button_end=button_bg_end,
+            border_radius=border_radius,
+            label_start_color=label_start_color,
+            label_end_color=label_end_color,
+            label_font_size=label_font_size,
+            label_font_weight=label_font_weight,
+            switch_size=switch_size,
+        )
+
+        st_toggle_switch(
+            key="input_toggle",
+            label_start="",
+            label_end="Question 2",
+            justify='flex-start',
+            default_value=True,
+            inactive_color='#95e1d3',
+            active_color="#f38181",
+            track_color="#f38181",
+            label_bg_color_start='white',
+            label_bg_color_end='black',
+            background_color_near_button_start='blue',
+            background_color_near_button_end='black',
+            border_radius='10px',
+            label_start_color="#000000",
+            label_end_color="#FFFFFF",
+            label_font_size="12px",
+            label_font_weight="normal",
+            switch_size="small",
+        )
+
+    with columns[1]:
+        st_toggle_switch(
+            key='q2',
+            label_start="",  # 不显示前标签
+            label_end="Question 3",
+            justify=justify,
+            default_value=True,
+            inactive_color='#DDA0DD',
+            active_color="#9400D3",
+            track_color="#BA55D3",
+            label_bg_color_start=color3_start,
+            label_bg_color_end=color3_end,
+            background_color_near_button_start=button_bg_start,
+            background_color_near_button_end=button_bg_end,
+            border_radius=border_radius,
+            label_start_color=label_start_color,
+            label_end_color=label_end_color,
+            label_font_size=label_font_size,
+            label_font_weight=label_font_weight,
+            switch_size=switch_size,
+        )
+        st_toggle_switch(
+            key='q3',
+            label_start="",  # 不显示前标签
+            label_end="Question 4",
+            justify=justify,
+            default_value=False,
+            inactive_color='#FFA07A',
+            active_color="#FF4500",
+            track_color="#FF6347",
+            label_bg_color_start=color4_start,
+            label_bg_color_end=color4_end,
+            background_color_near_button_start=button_bg_start,
+            background_color_near_button_end=button_bg_end,
+            border_radius=border_radius,
+            label_start_color=label_start_color,
+            label_end_color=label_end_color,
+            label_font_size=label_font_size,
+            label_font_weight=label_font_weight,
+            switch_size=switch_size,
+        )
+
+    with columns[2]:
+        st_toggle_switch(
+            key='q1',
+            label_start="Disable Filter",
+            label_end="",  # 不显示后标签
+            justify=justify,
+            default_value=True,
+            inactive_color='#98FB98',
+            active_color="#00FF7F",
+            track_color="#00FA9A",
+            label_bg_color_start=color5_start,
+            label_bg_color_end=color5_end,
+            background_color_near_button_start=button_bg_start,
+            background_color_near_button_end=button_bg_end,
+            border_radius=border_radius,
+            label_start_color=label_start_color,
+            label_end_color=label_end_color,
+            label_font_size=label_font_size,
+            label_font_weight=label_font_weight,
+            switch_size=switch_size,
+        )
+        range_slider_toggle = st_toggle_switch(
+            key='ql',
+            label_start="Disable Filter",
+            label_end="",  # 不显示后标签
+            justify=justify,
+            default_value=True,
+            inactive_color='#98FB98',
+            active_color="#00FF7F",
+            track_color="#00FA9A",
+            label_bg_color_start=color5_start,
+            label_bg_color_end=color5_end,
+            background_color_near_button_start=button_bg_start,
+            background_color_near_button_end=button_bg_end,
+            border_radius=border_radius,
+            label_start_color=label_start_color,
+            label_end_color=label_end_color,
+            label_font_size=label_font_size,
+            label_font_weight=label_font_weight,
+            switch_size=switch_size,
+        )
+        range_slider = st.slider(
+            label="Filter Range",
+            min_value=0,
+            max_value=100,
+            disabled=range_slider_toggle,
+        )
+
+st_toggle_switch(
+        key='q4',
+label_start="Disable Filter",
+label_end="Disable Filter",)

streamlit_toggle_diy-1.1.4/streamlit_toggle_diy/frontend/build/asset-manifest.json

@@ -0,0 +1,19 @@
+{
+  "files": {
+    "main.js": "./static/js/main.9f3c3eed.chunk.js",
+    "main.js.map": "./static/js/main.9f3c3eed.chunk.js.map",
+    "runtime-main.js": "./static/js/runtime-main.cc20bba3.js",
+    "runtime-main.js.map": "./static/js/runtime-main.cc20bba3.js.map",
+    "static/js/2.9720bf9e.chunk.js": "./static/js/2.9720bf9e.chunk.js",
+    "static/js/2.9720bf9e.chunk.js.map": "./static/js/2.9720bf9e.chunk.js.map",
+    "index.html": "./index.html",
+    "precache-manifest.b7df6085566f07f8f27b94ee8ed2d302.js": "./precache-manifest.b7df6085566f07f8f27b94ee8ed2d302.js",
+    "service-worker.js": "./service-worker.js",
+    "static/js/2.9720bf9e.chunk.js.LICENSE.txt": "./static/js/2.9720bf9e.chunk.js.LICENSE.txt"
+  },
+  "entrypoints": [
+    "static/js/runtime-main.cc20bba3.js",
+    "static/js/2.9720bf9e.chunk.js",
+    "static/js/main.9f3c3eed.chunk.js"
+  ]
+}