Style and React to Pane States

An example of how to style and use JS commands with the pane states.

The pane component goes through different states when programmatically resized or collapsed: collapsing, expanding, collapsed, and expanded. These states are used to dynamically update a specific attribute: data-pane-state.

You can attach your own styling to the pane using the data-[pane-state=state]:myclass (in Tailwind) in order to style depending on the state. In the example below, we add a transition animation to the pane when it is collapsing or expanding by using the data-[pane-state=collapsing]:transition-[flex-grow] and data-[pane-state=expanding]:transition-[flex-grow] classes (among other things).

In addition, the Elixir components also have a on_collapse and on_expand attributes which can be used to trigger JS commands when the pane is collapsed or gets expanded.

In the example, we have: 

        
on_collapse={JS.push("collapsed", value: %{pane: "demo_pane_1"}) |> JS.add_class(...)}
on_expand={JS.push("expanded", value: %{pane: "demo_pane_1"}) |> JS.remove_class(...)}

We send an event to the LiveView when the pane is collapsed or expanded with a payload containing the id so we can identify which pane was collapsed or expanded. We react to this event by updating the button text to the correct action.

I collapse!
I don't.
I do.

The collapsible panes (first and third) have a min_size of 15% and a collapsed size of 5%. You can find the example code here.