Panel Stack
Introduction
PanelStack manages a stack of panels and displays only the topmost panel.
Each panel appears with a header containing a "back" button to return to the
previous panel. The bottom-most initialPanel cannot be closed or removed from
the stack. Panels use CSSTransition
for seamless transitions.
Examples
Panel 1This is my panel
Usage
PanelStack
Panels are supplied as IPanel
objects like { component, props, title }
, where
component
and props
are used to render the panel element and title will appear
in the header and back button. This breakdown allows the component to avoid cloning
elements. Note that each panel is only mounted when it is atop the stack and is
unmounted when it is closed or when a panel opens above it.
PanelStack
injects its own IPanelProps
into each panel (in addition to the props
defined alongside the component), providing methods to imperatively close the
current panel or open a new one on top of it.
API Reference
PanelStack
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
initialPanel | true | IPanel<any> | The initial panel to show on mount. This panel cannot be removed from the stack and will appear when the stack is empty. |
onClose | false | (removedPanel: IPanel) => void | Callback invoked when the user presses the back button or a panel invokes the `closePanel()` injected prop method. |
onOpen | false | (addedPanel: IPanel) => void | Callback invoked when a panel invokes the `openPanel(panel)` injected prop method. |
Panel
Include this interface in your panel component's props type to access these two
functions which are injected by PanelStack
.
Prop Name | Required? | Type | Description |
---|---|---|---|
closePanel | false | () => void | Call this method to programmatically close this panel. If this is the only panel on the stack then this method will do nothing. Remember that the panel header always contains a "back" button that closes this panel on click (unless there is only one panel on the stack). |
openPanel | false | (panel: IPanel) => void | Call this method to open a new panel on the top of the stack. |