Has a 'flow collapse' button
Description
Specify if this Panel has a button that collapses or expands (i.e. 'docks' or 'hides') all Panels that are 'before' this Panel in the parent PanelLayout. The meaning of 'before' depends on the parent PanelLayout's 'flow direction'. For example, if the flow direction is LTR, then 'before' means Panels to the left of this Panel. Note that you only need to specify a single button which acts as a toggle, either collapsing or expanding Panels.
Discussion
For a video explanation of 'flow collapse' buttons watch this video. Below is an example of two expanded 'flow collapse' buttons, one in Panel 2 and one in Panel 3. By default each button is denoted by two blue angle brackets '<<' but could be any HTML or icon. In this case Panel 1 does not require a flow collapse button. Because it is the first Panel in the flow, collapsing Panel 2 will hide Panel 1.
When a 'flow collapse' button is clicked on, the panel before it in the 'flow' is hidden or docked. Here Panel 2's 'flow collapse' button has been clicked.
Adding a Flow Collapse Button
In order to add a flow collapse button to a UX, it is first necessary to define a Panel Layout containing at least two Panels. The button to use for the flow collapse also needs defined inside a PanelHeader inside a Panel.
In the UX Builder's UX Controls page check the 'Mobile' option in the toolbar.
Open the Panels menu. Choose the [Panel Layout] option to add a panel layout to the control.
Highlight the Panel Layout. In the Panels menu click on [Panel Card] and click 'Insert After'. The Panel Card should appear inside the Panel Layout.
Highlight [Panel Card End: PANELCARD_1] and click on [Panel Card] again in the Panels menu to add PANELCARD_2 to the component.
Add a third [Panel Card] underneath PANELCARD_2.
Highlight PANELCARD_1. Open the Containers menu and click on [Container].
From the Container Type list select the 'PanelHeader' option. Click 'Insert After'.
Highlight the Panel Header. Open the 'Other Controls' menu and add a 'Spacer' control to the Panel Header. Highlight the Spacer. In the Spacer Properties on the right set the Height to 32px.
Highlight the PanelHeader End. Click on [Static Text] option to add some static text underneath the panel header.
Highlight the Static Text control. In the Static Text Properties set the 'Static text' proeprty to be 'Panel 1'.
Highlight PANELCARD_2. Open the Containers menu. Click on the [Container] option and again select 'PanelHeader' from the Container Type list, then click 'Insert After'.
Highlight PANELHEADER_2. Open the Other Controls menu and click on [Button] to add a button to PANELHEADER_2.
Highlight [PanelHeader End:PANELHEADER_2] and from the Other Controls menu click on the [Static Text] option.
Highlight the Static Text control. In the 'Static text' property, in the properties list, type 'Panel 2'.
Highlight PANELCARD_3 and add a Panel Header to this panel.
Place a [Button control] inside PANELHEADER_3.
Add another [Static Text] Control underneath PANELHEADER_3, give this control a 'Static text' property of 'Panel 3'.
Highlight PANELCARD_2.
In the properties list in the 'Flow Collapse Button' section check the "Has a 'flow collapse' button" checkbox.
From the 'Button id' property dropdown select BUTTON_1.
Highlight PANELCARD_3
Check the 'Has a 'flow collapse' button property
From the 'Button id' property dropdown select BUTTON_2.
Run the component in Live Preview.
Click on the 'flow collapse' button to collapse one of the panels.
