splitViewToggle
Collapses or restores a pane from a button.
import { splitViewToggle } from "@sdxc/ui/app";Usage
Collapses or restores a pane from a button. For the sidebar below the wide breakpoint
the button's own popovertarget opens the sidebar as a sheet instead.
Signature
splitViewToggle(viewId: string, pane: SplitViewPane): MixinDescriptor<HTMLButtonElement>Returns a mixin descriptor for the toggle button.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
viewId | string | Yes | The split view's id. |
pane | SplitViewPane | Yes | The pane the button collapses. |
Examples
<button data-pane="sidebar" mix={[splitViewToggle("inbox", "sidebar")]} />Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/app too.
Constant
SPLIT_VIEW_ITEM_ATTRIBUTE
Attribute an app puts on each list link j/k steps through, in list order.
const SPLIT_VIEW_ITEM_ATTRIBUTE = "data-split-view-item"Function
setSplitViewCollapsed
Collapses or restores pane and remembers it. The list and the detail never both
collapse: collapsing one brings the other back, so the view always shows a record.
setSplitViewCollapsed(root: HTMLElement, pane: SplitViewPane, collapsed: boolean): void| Parameter | Type | Required | Description |
|---|---|---|---|
root | HTMLElement | Yes | The split view. |
pane | SplitViewPane | Yes | The pane to change. |
collapsed | boolean | Yes | Whether it ends collapsed. |
Type
SplitViewKeyScope
Where a split view's j/k answer: "page" anywhere in the document, "view" only while
focus is inside the view, for a view shown on a page whose own keys come first.
type SplitViewKeyScope = "page" | "view"