--- title: "Выключатель" description: "Элемент управления, который позволяет пользователю переключаться между отмеченным и не отмеченным флажком." order: 0 --- ## Переключатель, элемент управления, который позволяет пользователю переключаться между отмеченным и не отмеченным флажком. > Компонент `switch` не найден ```python from typing import Any from reflex.components.component import Component from reflex.utils.imports import ImportVar from reflex.vars import FunctionVar, Var from reflex.vars.base import VarData PACKAGE_CN = "clsx-for-tailwind@1.0.0" CN = Var( "cn", _var_data=VarData( imports={ PACKAGE_CN: ImportVar(tag="cn"), }, ), ).to(FunctionVar) class CoreComponent(Component): unstyled: Var[bool] @classmethod def set_class_name( cls, default_class_name: str | Var[str], props: dict[str, Any] ) -> None: if "render_" in props: return props_class_name = props.get("class_name", "") if props.pop("unstyled", False): props["class_name"] = props_class_name return props["class_name"] = cn(default_class_name, props_class_name) def _exclude_props(self) -> list[str]: return [ *super()._exclude_props(), "unstyled", ] def cn(*classes: Var | str | tuple | list | None) -> Var: return CN.call(*classes).to(str) ``` ```python import reflex as rx from reflex.components.component import ComponentNamespace from ..core.core import CoreComponent, cn class ClassNames: ROOT = "inline-flex items-center gap-3 cursor-pointer select-none group/switch" INPUT = "peer sr-only" TRACK = ( "relative rounded-full bg-muted " "outline-none " "group-data-[size=default]/switch:h-[18.4px] group-data-[size=default]/switch:w-[32px] " "group-data-[size=sm]/switch:h-[14px] group-data-[size=sm]/switch:w-[24px] " "group-has-[input:checked]/switch:bg-primary " "peer-focus-visible:ring-3 peer-focus-visible:ring-ring/50 peer-focus-visible:outline-1 peer-focus-visible:outline-ring " "group-aria-[invalid=true]/switch:border-destructive group-aria-[invalid=true]/switch:ring-3 group-aria-[invalid=true]/switch:ring-destructive/20 " "group-has-[:disabled]/switch:opacity-50 group-has-[:disabled]/switch:pointer-events-none group-has-[:disabled]/switch:cursor-not-allowed" ) THUMB = ( "pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform duration-200 " "group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 " "translate-x-0.5 " "group-has-[input:checked]/switch:group-data-[size=default]/switch:translate-x-[14px] " "group-has-[input:checked]/switch:group-data-[size=sm]/switch:translate-x-[10px] " "group-has-[input:checked]/switch:dark:bg-primary-foreground " "dark:bg-foreground" ) LABEL = "text-sm font-medium leading-none text-foreground" class NativeSwitch(CoreComponent): @classmethod def create(cls, label_text: str = "", **props) -> rx.Component: props["data-slot"] = "switch" size = props.pop("size", "default") props["data-size"] = size invalid = props.pop("invalid", False) if invalid: props["aria-invalid"] = "true" track_class_name = props.pop("track_class_name", "") thumb_class_name = props.pop("thumb_class_name", "") input_props = {} for key in ( "id", "checked", "default_checked", "disabled", "required", "name", "value", "on_change", "custom_attrs", ): if key in props: input_props[key] = props.pop(key) cls.set_class_name(ClassNames.ROOT, props) return rx.el.label( rx.el.input(type="checkbox", class_name=ClassNames.INPUT, **input_props), rx.el.div( rx.el.span( # Dynamically merge custom thumb classes class_name=cn(ClassNames.THUMB, thumb_class_name) ), # Dynamically merge custom track classes class_name=cn(ClassNames.TRACK, track_class_name), ), rx.el.span(label_text, class_name=ClassNames.LABEL) if label_text else rx.fragment(), **props, ) class SwitchNamespace(ComponentNamespace): root = staticmethod(NativeSwitch.create) class_names = ClassNames switch = SwitchNamespace() ``` # Примеры ## Базовый Простой переключатель, отображающий внутреннюю семантическую метку с помощью встроенного аргумента `label_text`. **Использованный реквизит:** `label_text` в качестве первого аргумента в `switch.root`. ```python def switch_basic() -> rx.Component: return field.root( field.content( field.title("Strict Mode"), field.description( "Enable strict validation protocols across all incoming API payloads." ), ), switch.root(id="strict-mode"), orientation="horizontal", class_name="justify-between items-center border rounded-lg p-4 w-full max-w-md", ) ``` ## Карта выбора Премиум-выбор в карточном стиле, где `field.label` охватывает весь блок макета. Щелчок в любом месте контейнера карты автоматически активирует вложенный флажок переключателя. **Использованный реквизит:** `id` на `switch.root`; `html_for` на `field.label`. ```python def switch_with_label() -> rx.Component: return field.label( rx.el.div( field.content( field.title("Enterprise Pipeline"), field.description( "Deploy dedicated runners, isolated networks, and unlimited concurrency." ), ), switch.root(id="enterprise-plan"), class_name="flex items-start justify-between gap-4 max-w-sm", ), html_for="enterprise-plan", ) ``` ## Размеры Доступны два варианта размера рядом: `sm` для плотных, компактных панелей инструментов или макетов, а также размер `default` для обычных элементов структурной формы. **Использованный реквизит:** `size` на `switch.root`; `orientation="horizontal"` на `field.root`. ```python def switch_sizes() -> rx.Component: return field.group( field.root( switch.root( id="switch-size-sm", size="sm", ), field.label( "Small", html_for="switch-size-sm", ), orientation="horizontal", ), field.root( switch.root( id="switch-size-default", size="default", ), field.label( "Default", html_for="switch-size-default", ), orientation="horizontal", ), class_name="w-full max-w-[10rem]", ) ``` ## Неверно Недействительное состояние или состояние ошибки, сигнализирующее о сбоях проверки формы. Дорожка переключения выявляет структурные ошибки посредством `aria-invalid`, а родительский `field.root` динамически обновляет стиль текста в соответствии с деструктивным состоянием системы. **Использованный реквизит:** `invalid` на `switch.root`; `data-invalid="true"` на `field.root`. ```python def switch_invalid() -> rx.Component: return field.root( field.content( field.label( "Accept terms and conditions", html_for="switch-terms", ), field.description("You must accept the terms and conditions to continue."), ), switch.root( id="switch-terms", aria_invalid="true", ), orientation="horizontal", data_invalid="true", class_name="max-w-sm", ) ``` ## Отключено Отключенный переключатель управления с ограничениями взаимодействия. Отключение каскадов визуально и функционально вплоть до элемента управления с помощью структурных селекторов `group-has-[:disabled]`, снижение непрозрачности элемента управления и блокировка всех пользовательских вводов. **Использованный реквизит:** `disabled` на `switch.root`; `data-disabled="true"` на `field.root`. ```python def switch_disabled() -> rx.Component: return field.root( switch.root( id="switch-disabled-unchecked", disabled=True, ), field.label( "Disabled", html_for="switch-disabled-unchecked", ), orientation="horizontal", data_disabled="true", class_name="w-full max-w-[10rem]", ) ``` # Справочник по API ## переключатель.корень Компонент управления главным выключателем. Отображает доступный переключатель с нулевой задержкой, используя встроенный элемент ввода скрытого флажка, завернутый в интерактивный блок макета семантической метки. ```python switch.root("Enable notifications", id="notify", size="default") ``` | Опора | Тип | По умолчанию | Описание | | --- | --- | --- | --- | | `label_text` | `str` | `""` | Дополнительная строка описательной метки, вставленная непосредственно рядом с переключателем. | | `size` | `Literal["default", "sm"]` | `"default"` | Устанавливает физическое масштабирование ширины/высоты элементов дорожки и ползунка. | | `invalid` | `bool` | `False` | Устанавливает `aria-invalid="true"` для запуска оформления ошибок. | | `disabled` | `bool` | `False` | Отключает взаимодействие и снижает непрозрачность. | | `checked` | `bool` | | Привязка состояния управляемого компонента. | | `default_checked` | `bool` | | Неконтролируемая настройка исходного состояния по умолчанию. | | `track_class_name` | `str` | `""` | Детализированные пользовательские переопределения класса Tailwind, вносимые непосредственно в трассу. | | `thumb_class_name` | `str` | `""` | Детально настроенный класс Tailwind переопределяется непосредственно в большой палец. | | `id` | `str` | | Уникальный идентификатор, назначенный непосредственно внутреннему скрытому входному узлу. | | `name` | `str` | | Идентификатор параметра отправки формы. | | `on_change` | `EventHandler` | | Срабатывает мгновенно, как только переключатель меняет состояние. | Любой другой атрибут, принятый стандартом HTML `` (`required`, `value` и т. д.), будет передан напрямую внутреннему одноранговому элементу управления вводом.