reflex-ui/shared/reflex_ui_shared/components/blocks/collapsible.py at 36cfe7b8ffde44425aa795d9defddc7d62099458 · reflex-dev/reflex-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
"""Collapsible accordion box used by alert and video blocks."""

from collections.abc import Sequence

import reflex as rx
from reflex_base.constants.colors import ColorType


def collapsible_box(
    trigger_children: Sequence[rx.Component],
    body: rx.Component,
    color: ColorType,
    *,
    item_border_radius: str = "12px",
) -> rx.Component:
    """Collapsible accordion wrapper shared by alert and video directives."""
    return rx.box(
        rx.accordion.root(
            rx.accordion.item(
                rx.accordion.header(
                    rx.accordion.trigger(
                        rx.hstack(
                            *trigger_children,
                            rx.spacer(),
                            rx.accordion.icon(color=f"{rx.color(color, 11)}"),
                            align_items="center",
                            justify_content="left",
                            text_align="left",
                            spacing="2",
                            width="100%",
                        ),
                        padding="0px",
                        color=f"{rx.color(color, 11)} !important",
                        background_color="transparent !important",
                        border_radius="12px",
                        _hover={},
                    ),
                ),
                body,
                border_radius=item_border_radius,
                padding=["16px", "24px"],
                background_color=f"{rx.color(color, 3)}",
                border="none",
            ),
            background="transparent !important",
            border_radius="12px",
            box_shadow="none !important",
            collapsible=True,
            width="100%",
        ),
        border=f"1px solid {rx.color(color, 4)}",
        border_radius="12px",
        background_color=f"{rx.color(color, 3)} !important",
        width="100%",
        margin_bottom="16px",
        margin_top="16px",
        overflow="hidden",
    )