splitViewKeys
Binds j/k to step through the list's items while the list keeps its scroll, keeps the list's scroll offset across full page loads.
import { splitViewKeys } from "@sdxc/ui/app";Signature
splitViewKeys(listId: string, sidebarId: string | undefined, scope: SplitViewKeyScope): MixinDescriptor<HTMLElement>Returns a mixin descriptor for the view's key marker.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
listId | string | Yes | The list pane's id. |
sidebarId | string | undefined | Yes | The sidebar pane's id, when the view has one. |
scope | "page" | "view" | Yes | "page" answers j/k anywhere; "view" only while focus is inside the view. |
Examples
<span hidden mix={[splitViewKeys("inbox-list", "inbox-sidebar", "page")]} />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"