Scroll Area

rx.scroll_area(
    rx.flex(
        rx.text(
            "Three fundamental aspects of typography are legibility, readability, and aesthetics. "
            "Although in a non-technical sense legible and readable are often used synonymously, "
            "typographically they are separate but related concepts."
        ),
        rx.text(
            "Legibility describes how easily individual characters can be distinguished from one another. "
            "For instance, if a b and an h, or a 3 and an 8, are difficult to distinguish at small sizes, "
            "this is a problem of legibility."
        ),
        rx.text(
            "Typographers are concerned with legibility insofar as it is their job to select the correct font to use. "
            "Using only uppercase letters reduces legibility."
        ),
        direction="column",
        spacing="4",
        padding_right="16px",
    ),
    type="always",
    scrollbars="vertical",
    height="180px",
)

rx.grid(
    rx.scroll_area(
        rx.text("Vertical. " * 40, size="2", padding="8px", padding_right="24px"),
        type="always",
        scrollbars="vertical",
        height="150px",
    ),
    rx.scroll_area(
        rx.text("Horizontal. " * 40, size="2", padding="8px", width="700px"),
        type="always",
        scrollbars="horizontal",
        height="150px",
    ),
    rx.scroll_area(
        rx.text("Both ways. " * 60, size="2", padding="8px", width="400px"),
        type="always",
        scrollbars="both",
        height="150px",
    ),
    columns="3",
    spacing="3",
)

rx.grid(
    *[
        rx.scroll_area(
            rx.flex(
                rx.text("type = '" + t + "'", weight="bold"),
                rx.text("Legibility describes how easily individual characters can be distinguished. " * 4, size="2"),
                direction="column",
                spacing="2",
                padding="8px",
                padding_right="20px",
            ),
            type=t,
            scrollbars="vertical",
            height="150px",
        )
        for t in ["auto", "always", "scroll", "hover"]
    ],
    columns="4",
    spacing="3",
)

rx.grid(
    rx.scroll_area(
        rx.text("Hides fast. " * 50, size="2", padding="8px", padding_right="20px"),
        type="scroll",
        scroll_hide_delay=200,
        height="120px",
    ),
    rx.scroll_area(
        rx.text("Stays for 3 seconds. " * 40, size="2", padding="8px", padding_right="20px"),
        type="scroll",
        scroll_hide_delay=3000,
        height="120px",
    ),
    columns="2",
    spacing="3",
)

rx.card(
    rx.text("Notifications", weight="bold", margin_bottom="2"),
    rx.scroll_area(
        rx.vstack(
            *[
                rx.hstack(
                    rx.avatar(fallback=str(i), size="2", radius="full"),
                    rx.text("Order #" + str(1000 + i) + " has shipped.", size="2"),
                    align="center",
                    padding_right="16px",
                )
                for i in range(1, 16)
            ],
            spacing="3",
        ),
        type="hover",
        scrollbars="vertical",
        height="220px",
    ),
    max_width="340px",
)