Шаблоны ClientStateVar

Общие шаблоны реализации для адаптивных и производительных компонентов пользовательского интерфейса.

Переключить шаблон

Используйте логическое значение ClientStateVar для мгновенного управления видимостью пользовательского интерфейса или изменениями стиля.

is_expanded = ClientStateVar.create("is_expanded", False)

def toggle_component():
    return rx.vstack(
        rx.button(
            "Toggle Content",
            on_click=is_expanded.set_value(not is_expanded.value)
        ),
        rx.cond(
            is_expanded.value,
            rx.text("Hidden content is now visible!"),
            rx.text("Content is hidden.")
        )
    )

Образец состояния формы

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

draft_input = ClientStateVar.create("draft_input", "")

def form_component():
    return rx.vstack(
        rx.input(
            value=draft_input.value,
            on_change=draft_input.set_value
        ),
        rx.button(
            "Submit",
            # Send the client-side draft to the backend for processing
            on_click=draft_input.retrieve(BackendState.process_input)
        )
    )

Условный рендеринг

Управляйте потоком состояний пользовательского интерфейса, не запуская повторную отрисовку серверной части, что идеально подходит для навигации с вкладками или пошаговых интерфейсов.

active_tab = ClientStateVar.create("active_tab", "home")

def tab_system():
    return rx.vstack(
        rx.hstack(
            rx.button("Home", on_click=active_tab.set_value("home")),
            rx.button("Profile", on_click=active_tab.set_value("profile")),
        ),
        rx.match(
            active_tab.value,
            ("home", rx.text("Welcome to the home page.")),
            ("profile", rx.text("User profile settings.")),
            rx.text("404 - Unknown Tab")
        )
    )

Управление сеансами

Этот расширенный шаблон показывает, как обрабатывать редактируемые состояния пользовательского интерфейса во внешнем интерфейсе при синхронизации изменений с серверной частью.

EditSessionName = ClientStateVar.create("EditSessionName", False)

class SessionState(rx.State):
    def save_name(self, session_id: str, new_name: str):
        # Backend logic to persist the change
        print(f"Session {session_id} renamed to {new_name}")

    def trigger_save(self, session_id: str):
        # Retrieve client-side text content via JS and pass to backend
        return rx.call_script(
            f'document.getElementById("{session_id}").innerText',
            callback=lambda val: self.save_name(session_id, val)
        )

def session_editor(session_id: str, name: str):
    return rx.text(
        name,
        id=session_id,
        content_editable=EditSessionName.value,
        on_double_click=EditSessionName.set_value(True),
        on_blur=[
            EditSessionName.set_value(False),
            SessionState.trigger_save(session_id),
        ],
    )

Справочник по API

В этом разделе описаны доступные методы взаимодействия с состоянием внешнего и внутреннего интерфейса.