Implementing "Card Reveal" using ipyvuetify

[sheffier]

Hi,

I'm trying to figure out how to implement a Card Reveal component (using ipyvuetify/reacton/solara), similar to the example shown on vuetify docs.

Thanks

[iisakkirotko]

Hey @sheffier!

This should do the trick:

import solara


show = solara.reactive(False)


@solara.component
def Page():
    with solara.v.Html(tag="div", style_="position: relative; top: 50px; left: calc(50% - 250px); width: 500px;"):
        with solara.Card(style={"height": "500px"}):
            solara.Markdown("# Content 1")
            solara.v.Spacer(vertical=True)
            solara.Button("Click me", color="primary", on_click=lambda: show.set(True))
            with solara.v.ExpandTransition():
                if show.value:
                    with solara.Card(style={"height": '500px' if show.value else '0', "width": "100%", "position": "absolute", "bottom": "0", "left": "0", "margin": "0 !important"}, classes=["transition-fast-in-fast-out", "v-card--reveal"]):
                            solara.Markdown("# Content 2")
                            solara.Button("click me", color="secondary", on_click=lambda: show.set(False))

Run and edit this code at PyCafe

Where did you get stuck on your first try? Is there something we could improve about the documentation that would have helped you?

[sheffier]

Yep, this did the trick!

Where did you get stuck on your first try?

I am a data scientists with no WEB development skills.

Is there something we could improve about the documentation that would have helped you?

I don't know if any improvement to the docs would have helped me. However, a more programmatically way to implement this would have helped. For example:

with ExpandTransition():
    with Card():
        ...
    with Card():
       ....

Thanks!

[sheffier]

BTW @iisakkirotko,

The following code snippet worked even better:

import solara


show = solara.reactive(False)


@solara.component
def Page():
    with solara.Card(style="min-height: 230px; height: 100%"):
        solara.Markdown("# Content 1")
        with solara.v.ExpandTransition():
            if show.value:
                with solara.Card(
                    style={
                        "height": "100%" if show.value else "0",
                        "width": "100%",
                        "position": "absolute",
                        "bottom": "0",
                        "left": "0",
                        "margin": "0 !important",
                    },
                    classes=["transition-fast-in-fast-out", "v-card--reveal"],
                ):
                    solara.Markdown("# Content 2")

        with solara.v.CardActions(style_="position: absolute; bottom: 0; left: 0;"):
            if not show.value:
                solara.Button("Options", color="primary", on_click=lambda: show.set(True))
            else:
                solara.Button("Close", color="secondary", on_click=lambda: show.set(False))