type BorderLayoutState = 'default' | 'collapsed' - `setState(name, config)` takes the config of the state it names (`BorderLayoutStateConfigs[name]`).
| State | Description |
|---|---|
| `default` | Every region open at its authored size. No config. |
| `collapsed` | One or more regions folded away (their dividers stay). config | Field | Type | Description |
|---|---|---|
regions? | BorderLayoutSide[] | the regions to fold |
region? | BorderLayoutSide | one region to fold (when regions is not given) |
el.api.setState<S extends BorderLayoutState>(name: S, config?: BorderLayoutStateConfigs[S]): unknown | Enter a state: the DOM work runs (also when it is the current state), the store records it. | Argument | Type | Description |
|---|---|---|
name | S | a declared state (an unknown name throws) |
config? | BorderLayoutStateConfigs[S] | that state's config (merged into the stored one when the component merges) |
unknown - what the state's DOM work returned - a Promise for an async state (or await settled()) |
| el.api.getState(): { name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState]; model?: ElementModel } | The state the element shows now - read back from the DOM, so it includes what the user changed. Returns { name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState]; model?: ElementModel } - the state's name, its config and the authored markup model render() starts from |
| el.api.render(state?: { name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState]; model?: ElementModel }): string | The element's markup in a state - the authored markup with that state applied; a pure function of the state. | Argument | Type | Description |
|---|---|---|
state? | { name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState]; model?: ElementModel } | a state as getState() returns it (default: the current one) |
string - the element's outer HTML in that state |
| el.api.settled(): Promise<void> | Wait for the last state's DOM work (async states: a diagram rendering, a chart mounting). Returns Promise<void> - resolves when nothing is pending |
| el.store: Store<{ name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState] }> | A defuss-store store of the element's state - subscribe to follow every change (also the user's), set it to drive the component. |
### Registry
| Member | Description |
|---|---|
| df$.shadcn.borderLayoutApi.setState<S extends BorderLayoutState>(el: HTMLElement, name: S, config?: BorderLayoutStateConfigs[S]): unknown | Enter a state: the DOM work runs (also when it is the current state), the store records it. | Argument | Type | Description |
|---|---|---|
el | HTMLElement | the component's element |
name | S | a declared state (an unknown name throws) |
config? | BorderLayoutStateConfigs[S] | that state's config (merged into the stored one when the component merges) |
unknown - what the state's DOM work returned - a Promise for an async state (await it, or el.api.settled()) |
| df$.shadcn.borderLayoutApi.getState(el: HTMLElement): { name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState]; model?: ElementModel } | The state the element shows now - read back from the DOM, so it includes what the user changed. | Argument | Type | Description |
|---|---|---|
el | HTMLElement | the component's element |
{ name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState]; model?: ElementModel } - the state's name, its config and the authored markup model render() starts from |
| df$.shadcn.borderLayoutApi.render(state: { name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState]; model?: ElementModel }): string | The element's markup in a state - the authored markup with that state applied; a pure function of the state. | Argument | Type | Description |
|---|---|---|
state | { name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState]; model?: ElementModel } | a state as getState() returns it (with its model) |
string - the element's outer HTML in that state |
| df$.shadcn.borderLayoutApi.store(el: HTMLElement): Store<{ name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState] }> | The element's store (bindComponent made it). | Argument | Type | Description |
|---|---|---|
el | HTMLElement | the component's element |
Store<{ name: BorderLayoutState; config: BorderLayoutStateConfigs[BorderLayoutState] }> - a defuss-store store of { name, config } - subscribe to follow every change, set it to drive the component |
| df$.shadcn.borderLayoutApi.commit<S extends BorderLayoutState>(el: HTMLElement, name: S, config?: BorderLayoutStateConfigs[S]): void | Record a state the element reached on its own (no DOM work) - for a component's own handlers. | Argument | Type | Description |
|---|---|---|
el | HTMLElement | the component's element |
name | S | the state it is in |
config? | BorderLayoutStateConfigs[S] | its config |
df$.shadcn.borderLayoutStates: BorderLayoutState[] | The declared states, 'default' first: default, collapsed. |
### `df$.shadcn.borderLayout`
| Member | Description |
|---|---|
| collapse(target: string \| HTMLElement, side: BorderLayoutSide): void | Folds a region away (its divider stays). | Argument | Type | Description |
|---|---|---|
target | string \| HTMLElement | the .border-layout element, its id or a selector |
side | BorderLayoutSide | the region |
expand(target: string \| HTMLElement, side: BorderLayoutSide): void | Brings a folded region back. | Argument | Type | Description |
|---|---|---|
target | string \| HTMLElement | the .border-layout element, its id or a selector |
side | BorderLayoutSide | the region |
toggle(target: string \| HTMLElement, side: BorderLayoutSide): boolean | Folds or unfolds a region. | Argument | Type | Description |
|---|---|---|
target | string \| HTMLElement | the .border-layout element, its id or a selector |
side | BorderLayoutSide | the region |
boolean - true when the region is collapsed now (false also when the layout has no such region) |
| resize(target: string \| HTMLElement, side: BorderLayoutSide, px: number): void | Sets a region's size (clamped by the resizer's limits). | Argument | Type | Description |
|---|---|---|
target | string \| HTMLElement | the .border-layout element, its id or a selector |
side | BorderLayoutSide | the region |
px | number | the width (west / east) or height (north / south) in px |
sizes(target: string \| HTMLElement): Partial<Record<BorderLayoutSide, number>> | The current sizes: { west: 240, east: 0 (collapsed), ... }. | Argument | Type | Description |
|---|---|---|
target | string \| HTMLElement | the .border-layout element, its id or a selector |
Partial<Record<BorderLayoutSide, number>> - px per region the layout has - 0 for a collapsed one |
### Events
| Event | Description |
|---|---|
| `border-layout-collapse` | Fires when a region folds away or comes back - which region, and whether it is collapsed now. detail: BorderLayoutCollapseDetail | Field | Type | Description |
|---|---|---|
region | BorderLayoutSide | the region that folded or came back |
collapsed | boolean | whether it is collapsed now |
| Field | Type | Description |
|---|---|---|
region | BorderLayoutSide | the region that folded or came back |
collapsed | boolean | whether it is collapsed now |
'north' \| 'south' \| 'west' \| 'east' |
---
## ARIA
| Element | Attribute | Notes |
|---------|-----------|-------|
| divider | `role="separator"`, `aria-label="Resize {region}"`, `aria-controls` naming the pane, `aria-valuenow` / `-min` / `-max` | The window-splitter pattern; set by the runtime (the name comes from the region's `aria-label`) |
| panes | landmarks (`