Docs / Components
SensePanelComponent
Bordered layout surface from @artificialsenselabs/ui with header, optional collapse, and footer projection slots.
Live demo: run nx serve showcase and open /components/panel (port 4202).
Overview
Category: Layout. Selector: sense-panel. Import: import { SensePanelComponent } from '@artificialsenselabs/ui';
<sense-panel header="Notifications" [toggleable]="true">
<p>Alert preferences</p>
</sense-panel>Content slots
| Selector | Region |
|---|---|
[panelHeader] | Custom header markup (alternative to header input). |
[panelIcons] | Header action icons (e.g. badges, icon buttons). |
(default) | Main panel body content. |
[panelFooter] | Footer region below the body. |
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
header | string | '' | Header label text. |
toggleable | boolean | false | Enables collapsible content via header toggle button. |
collapsed | boolean | false | Two-way bindable collapse state. |
toggleLabel | string | null | null | Accessible name override for the toggle button. |
styleClass | string | null | null | Extra CSS classes on the host. |
Accessibility
- Host exposes
role="region"witharia-labelledbywhen a header is shown. - Toggle button sets
aria-expandedandaria-controlson the content region. - Collapsed content is
aria-hidden="true". - Collapse animation pauses under
prefers-reduced-motion: reduce.