Accordion

[Alek99]

"""Welcome to Reflex! This file outlines the steps to create a basic app."""
from rxconfig import config

import reflex as rx
import reflex.components.radix.themes as rdxt
import reflex.components.radix.primitives as rdxp



class State(rx.State):
    """The app state."""

    value: str = 'a'
    variant = 'classic'

    items: list[tuple[str, str]] = [
        ("Is it accessible?", "Yes. It's built with accessibility in mind."),
        ("Is it unstyled?", "Yes. It's unstyled by default, giving you freedom over the look and feel."),
        ("Is it finished?", "It's still in beta, but it's ready to use in production."),
    ]

items = [
    rdxp.accordion_item("Is it accessible?", rdxt.button("Test button"), disabled=True, font_size="3em"),
    rdxp.accordion_item("Is it unstyled?", "Yes. It's unstyled by default, giving you freedom over the look and feel."),
    rdxp.accordion_item("Is it finished?", "It's still in beta, but it's ready to use in production."),
]
 
 
 
def accordion_row(variant: str) -> rx.Component:
    return  rdxt.flex(
                     rdxp.accordion(
                        *items,
                        collapsible=True,
                        width="300px",
                        variant=variant,
                        color_scheme="primary"
                    ),
                     rdxp.accordion(
                        *items,
                        collapsible=True,
                        width="300px",
                        variant=variant,
                        color_scheme="accent"
                    ),
                    direction="row",
                    padding_x="2em",
                    gap="1", 
                ) 
 
  
  

def index() -> rx.Component:
    return rdxt.theme(
        rdxt.container(
            rx.cond(
            State.value,
            rx.text('first value'),
            rx.text("fourth value"),
        ),
            rdxt.flex(
                accordion_row(variant=State.variant),
                 accordion_row(variant="surface"),
                 accordion_row(variant="soft"), 
                 accordion_row(variant="outline"), 
                 accordion_row(variant="ghost"),
                direction="column",
                gap="2"
            ), 
            padding="2em",
            font_size="2em", 
            text_align="center",
            background = "var(--accent-2)",
            height="100vh",
        )
    )     
    
# Add state and page to the app.
app = rx.App(
    theme=rdxt.theme(
        appearance="dark", has_background=True, radius="none", accent_color="grass" 
    ), 
) 

app.add_page(index) 
app.compile()          

[Alek99]

My root renders as so

 <RadixAccordionRoot collapsible={true} color={`accent`} css={{...{"width": "300px"}, ...(() => { switch (JSON.stringify(state__state.variant)) {case JSON.stringify(`classic`):  return ({"border_radius": "6px", "background_color": isTrue(false) ? `var(--accent-9)` : `var(--slate-9)`, "box_shadow": "0 2px 10px var(--black-a4)"});  break;case JSON.stringify(`soft`):  return ({"border_radius": "6px", "background_color": isTrue(false) ? `var(--accent-3)` : `var(--slate-3)`, "box_shadow": "0 2px 10px var(--black-a1)"});  break;default:  return ({});  break;};})()}} variant={state__state.variant}>

[Alek99]

Problem thus far conds inside match doesn't work and match doesn't seem to work as a style prop

[Alek99]

Code doesn't seem to work for me can you provide example for code that you used to test

"""Welcome to Reflex! This file outlines the steps to create a basic app."""
from rxconfig import config

import reflex as rx
import reflex.components.radix.themes as rdxt
import reflex.components.radix.primitives as rdxp



class State(rx.State):
    """The app state."""

    value: str = 'a'
    variant = 'classic'

    items: list[tuple[str, str]] = [
        ("Is it accessible?", "Yes. It's built with accessibility in mind."),
        ("Is it unstyled?", "Yes. It's unstyled by default, giving you freedom over the look and feel."),
        ("Is it finished?", "It's still in beta, but it's ready to use in production."),
    ]

items = [
    rdxp.accordion_item("Is it accessible?", rdxt.button("Test button"), disabled=True, font_size="3em"),
    rdxp.accordion_item("Is it unstyled?", "Yes. It's unstyled by default, giving you freedom over the look and feel."),
    rdxp.accordion_item("Is it finished?", "It's still in beta, but it's ready to use in production."),
]
 
 
 
def accordion_row(variant: str) -> rx.Component:
    return  rdxt.flex(
                     rdxp.accordion(
                        *items,
                        collapsible=True,
                        width="300px",
                        variant=variant,
                        color_scheme="primary"
                    ),
                     rdxp.accordion(
                        *items,
                        collapsible=True,
                        width="300px",
                        variant=variant,
                        color_scheme="accent"
                    ),
                    direction="row",
                    padding_x="2em",
                    gap="1", 
                ) 
 
  
  

def index() -> rx.Component:
    return rdxt.theme(
        rdxt.container(
            rx.cond(
            State.value,
            rx.text('first value'),
            rx.text("fourth value"),
        ),
            rdxt.flex(
                accordion_row(variant=State.variant),
                direction="column",
                gap="2"
            ), 
            padding="2em",
            font_size="2em", 
            text_align="center",
            background = "var(--accent-2)",
            height="100vh",
        )
    )     
    
# Add state and page to the app.
app = rx.App(
    theme=rdxt.theme(
        appearance="dark", has_background=True, radius="none", accent_color="grass" 
    ), 
) 

app.add_page(index) 

[ElijahAhianyo]

Code doesn't seem to work for me can you provide example for code that you used to test

"""Welcome to Reflex! This file outlines the steps to create a basic app."""
from rxconfig import config

import reflex as rx
import reflex.components.radix.themes as rdxt
import reflex.components.radix.primitives as rdxp



class State(rx.State):
    """The app state."""

    value: str = 'a'
    variant = 'classic'

    items: list[tuple[str, str]] = [
        ("Is it accessible?", "Yes. It's built with accessibility in mind."),
        ("Is it unstyled?", "Yes. It's unstyled by default, giving you freedom over the look and feel."),
        ("Is it finished?", "It's still in beta, but it's ready to use in production."),
    ]

items = [
    rdxp.accordion_item("Is it accessible?", rdxt.button("Test button"), disabled=True, font_size="3em"),
    rdxp.accordion_item("Is it unstyled?", "Yes. It's unstyled by default, giving you freedom over the look and feel."),
    rdxp.accordion_item("Is it finished?", "It's still in beta, but it's ready to use in production."),
]
 
 
 
def accordion_row(variant: str) -> rx.Component:
    return  rdxt.flex(
                     rdxp.accordion(
                        *items,
                        collapsible=True,
                        width="300px",
                        variant=variant,
                        color_scheme="primary"
                    ),
                     rdxp.accordion(
                        *items,
                        collapsible=True,
                        width="300px",
                        variant=variant,
                        color_scheme="accent"
                    ),
                    direction="row",
                    padding_x="2em",
                    gap="1", 
                ) 
 
  
  

def index() -> rx.Component:
    return rdxt.theme(
        rdxt.container(
            rx.cond(
            State.value,
            rx.text('first value'),
            rx.text("fourth value"),
        ),
            rdxt.flex(
                accordion_row(variant=State.variant),
                direction="column",
                gap="2"
            ), 
            padding="2em",
            font_size="2em", 
            text_align="center",
            background = "var(--accent-2)",
            height="100vh",
        )
    )     
    
# Add state and page to the app.
app = rx.App(
    theme=rdxt.theme(
        appearance="dark", has_background=True, radius="none", accent_color="grass" 
    ), 
) 

app.add_page(index) 

This exact code works for me when I test it locally.

[Alek99]

My bad problem with my environment, resolved