Переключатель

элемент управления, который позволяет пользователю переключаться между отмеченным и не отмеченным.

❯buridan add переключатель

Error: Reference Target 'переключатель' not found

Примеры

Базовый

Простой переключатель, отображающий внутреннюю семантическую метку с помощью встроенного аргумента label_text.

Использованный реквизит: label_text в качестве первого аргумента в switch.root.

Strict Mode

Enable strict validation protocols across all incoming API payloads.

import reflex as rx

from components.ui.field import field
from components.ui.switch import switch


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.

Error: Reference Target 'переключатель_с_меткой' not found

Размеры

Доступны два варианта размера рядом: sm для плотных, компактных панелей инструментов или макетов, а также размер default для обычных элементов структурной формы.

Использованный реквизит: size на switch.root; orientation="horizontal" на field.root.

Small

Default

# импортировать рефлекс как rx
# из полей импорта компонентов.ui.field
# из компонента.ui.switch переключатель импорта

# защита switch_sizes() -> rx.Component:
# вернуть поле.группа(
# поле.корень(
# поле.метка(
# «Тестирование»,
# switch.root(id="тест-план"),
# html_for="тест-план",
#             ),
#         ),
# поле.корень(
# поле.метка(
#                 switch.root(id="size-sm", size="sm"),
# «Небольшая настройка», html_for="size-sm", class_name="text-xs w-full",
#             ),
# ориентация="горизонтально",
#         ),
# # поле.корень(
# # switch.root(id="size-default", size="default"),
# # field.label("Маштаб по умолчанию", html_for="size-default"),
# # ориентация="горизонтально",
#         # ),
#         class_name="w-full flex justify-center items-center"
#     )

import reflex as rx

from components.ui.field import field
from components.ui.switch import switch


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.

Accept terms and conditions

You must accept the terms and conditions to continue.

import reflex as rx

from components.ui.field import field
from components.ui.switch import switch


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.

Disabled

import reflex as rx

from components.ui.field import field
from components.ui.switch import switch


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

переключатель.корень

Компонент управления главным выключателем. Отображает доступный переключатель с нулевой задержкой, используя встроенный элемент ввода скрытого флажка, завернутый в интерактивный блок макета семантической метки.

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 <input type="checkbox"> (required, value и т. д.), будет передан напрямую внутреннему одноранговому элементу управления вводом.

External Tools

︲

On This Page