Panel
The panel component is a versatile flex container designed to group and organize elements within a layout. Panels are presented as individual tabs that can be moved to different positions by dragging the tabs around. By default, the top-level return of a @ui.component is automatically wrapped in a panel, so you only need to define a panel explicitly if you want to customize it. Customizations can include setting a custom tab title, background color or customizing the flex layout.
Example
from deephaven import ui
@ui.component
def ui_panel():
text = ui.text_field()
return ui.panel(text, title="Text Field")
my_panel = ui_panel()
Nesting
Panels can only be nested within ui.row, ui.column, ui.stack or ui.dashboard.
from deephaven import ui
my_nested_panel = ui.dashboard([ui.panel("A"), ui.panel("B")])
API Reference
A panel is a container that can be used to group elements.
Returns: Element The rendered panel element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | Any | Elements to render in the panel. | |
| title | str | None | None | Title of the panel. |
| direction | Literal['row', 'column', 'row-reverse', 'column-reverse'] | None | 'column' | The direction in which to layout children. |
| wrap | Literal['wrap', 'nowrap', 'wrap-reverse'] | None | None | Whether children should wrap when they exceed the panel's width. |
| justify_content | Literal['start', 'end', 'center', 'left', 'right', 'space-between', 'space-around', 'space-evenly', 'stretch', 'baseline', 'first baseline', 'last baseline', 'safe center', 'unsafe center'] | None | None | The distribution of space around items along the main axis. |
| align_content | Literal['start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'baseline', 'first baseline', 'last baseline', 'safe center', 'unsafe center'] | None | None | The distribution of space between and around items along the cross axis. |
| align_items | Literal['start', 'end', 'center', 'stretch', 'self-start', 'self-end', 'baseline', 'first baseline', 'last baseline', 'safe center', 'unsafe center'] | None | 'start' | The alignment of children within their container. |
| gap | str | float | None | 'size-100' | The space to display between both rows and columns of children. |
| column_gap | str | float | None | None | The space to display between columns of children. |
| row_gap | str | float | None | None | The space to display between rows of children. |
| key | str | None | None | A unique identifier used by React to render elements in a list. |