Panel
Panel is the titled card a dashboard is built from: a heading and an optional action at either end of one row, an optional subtitle, and your content below. Pass `headerRule` for a hairline under the header when the body is a ruled list or a table, `bodyScroll` when it holds a table that is wider than the card, and `bodyFill` when the card is stretched by a taller neighbour and the body should fill it.
Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/panel.tsx@viliha/vui-react/panelThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import { Panel, PANEL, PanelTitle } from "@viliha/vui-react/panel";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| Panel | component | — |
| PANEL | component | — |
| PanelTitle | component | — |
Panel props
| Prop | Type | Default | What it does |
|---|---|---|---|
| title? | React.ReactNode | — | |
| subtitle? | React.ReactNode | — | |
| action? | React.ReactNode | — | The header's trailing control. Nothing is rendered when it is absent. |
| children | React.ReactNode | — | |
| className? | string | — | |
| bodyClassName? | string | — | An override on the body, for a panel whose content draws its own frame. |
| bodyScroll? | boolean | — | The body scrolls sideways, for a panel holding a table. |
| bodyFill? | boolean | — | The body is a column that fills the card, for a panel stretched by a taller neighbour. |
| headerRule? | boolean | — | Draw a hairline under the header. |
PanelTitle props
| Prop | Type | Default |
|---|---|---|
| title? | React.ReactNode | — |
| subtitle? | React.ReactNode | — |
Customize
Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.