Skip to content

Commit

Permalink
Add the ui.panel spec
Browse files Browse the repository at this point in the history
- Just added some args about tab color, description, etc
  • Loading branch information
mofojed committed Oct 16, 2023
1 parent 6a721bc commit 79d29f6
Showing 1 changed file with 29 additions and 6 deletions.
35 changes: 29 additions & 6 deletions plugins/ui/DESIGN.md
Original file line number Diff line number Diff line change
Expand Up @@ -805,18 +805,41 @@ We should be able to map these by using `ui.panel`, `ui.row`, `ui.column`, `ui.s

##### ui.panel

By default, the top level `@ui.component` will automatically be wrapped in a panel, so no need to define it unless you want custom panel functionality, such as giving the tab a custom name, e.g.:

```python
import deephaven.ui as ui
By default, the top level `@ui.component` will automatically be wrapped in a panel, so no need to define it unless you want custom panel functionality, such as giving the tab a custom name or color, e.g.:

```py
# The only difference between this and `p = my_component()` is that the title of the panel will be set to `My Title`
p = ui.panel(my_component(), title="My Title")
```

Note that a panel can only have one root component, and cannot be nested within other components (other than the layout ones `ui.row`, `ui.column`, `ui.stack`, `ui.dashboard`)
A panel cannot be nested within other components (other than the layout ones such as `ui.row`, `ui.column`, `ui.stack`, `ui.dashboard`). The basic syntax for creating a `UIPanel` is:

```py
import deephaven.ui as ui
ui_panel = ui.panel(
component: Element,
title: str | Element | None = None,
description: str | None = None,
background_color: Color | None = None,
color: Color | None = None,
tab_background_color: Color | None = None,
tab_color: Color | None = None,
is_closable: bool = True,
) -> UIPanel
```

###### Parameters

TBD: How do you specify a title and/or tooltip for your panel? How do panels get a title or tooltip by default?
| Parameter | Type | Description |
| ---------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `component` | `Element` | The component(s) to render within the panel. |
| `title` | `str \| Element \| None` | The title of the panel. If not provided, a name will be created based on the variable name the top-level component is assigned to. You can also include an element here that has an icon in it. |
| `description` | `str \| Element \| None` | A description of the panel. Will appear in the tooltip when hovering the panel tab. Can also include an element here. |
| `background_color` | `Color \| None` | Custom background color of the panel. |
| `color` | `Color \| None` | Custom text color of the panel. |
| `tab_background_color` | `Color \| None` | Custom background color of the tab for the panel. |
| `tab_color` | `Color \| None` | Custom text color of the tab for the panel. |
| `is_closable` | `bool` | Whether the panel can be closed. |

##### ui.row, ui.column, ui.stack, ui.dashboard

Expand Down

0 comments on commit 79d29f6

Please sign in to comment.