✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
DocsBlogChangelog

Search documentation...

/

Star

12k+

[ Learn ]

[ Concepts ]

[ Reference ]

Cond

This component is used to conditionally render components.
The cond component takes a condition and two components. If the condition is true, the first component is rendered, otherwise the second component is rendered.

Text 1

class CondState(rx.State):
    show: bool = True

    def change(self):
        self.show = not (self.show)


rx.vstack(
    rx.button("Toggle", on_click=CondState.change),
    rx.cond(
        CondState.show,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
)
The second component is optional and can be omitted. If it is omitted, nothing is rendered if the condition is false.

Negation

You can use the logical operator ~ to negate a condition.

Text 1

Text 2

class CondState(rx.State):
    show: bool = True

    def change(self):
        self.show = not (self.show)


rx.vstack(
    rx.button("Toggle", on_click=CondState.change),
    rx.cond(
        CondState.show,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
    rx.cond(
        ~CondState.show,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
)

Multiple Conditions

You can also use the logical operator & and | to make up complex conditions

True & True => True

True & False => False

True | False => True

class MultiCondState(rx.State):
    cond1: bool = True
    cond2: bool = False
    cond3: bool = True

    def change(self):
        self.cond1 = not (self.cond1)


rx.vstack(
    rx.button("Toggle", on_click=MultiCondState.change),
    rx.text(
        rx.cond(MultiCondState.cond1, "True", "False"),
        " & True => ",
        rx.cond(
            MultiCondState.cond1 & MultiCondState.cond3,
            "True",
            "False",
        ),
    ),
    rx.text(
        rx.cond(MultiCondState.cond1, "True", "False"),
        " & False => ",
        rx.cond(
            MultiCondState.cond1 & MultiCondState.cond2,
            "True",
            "False",
        ),
    ),
    rx.text(
        rx.cond(MultiCondState.cond1, "True", "False"),
        " | False => ",
        rx.cond(
            MultiCondState.cond1 | MultiCondState.cond2,
            "True",
            "False",
        ),
    ),
)

Cond

Render one of two components based on a condition.

  • Base Event Triggers

← CenterContainer →

Copyright © 2023 Pynecone, Inc.