Sash

The handle between two panes that the person drags, or moves with the arrow keys, to resize them. It reports how far it moved; the owner resizes the panes, keeps them within their limits and positions the sash. It is a focusable separator whose highlight shows after the pointer rests on it for 300 milliseconds and while it is dragged.

Examples

Loading…

States

Loading…

API

Selector nol-sash

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`orientation`	`SashOrientation`	Required	Which way the sash runs: a vertical sash stands between panes side by side and moves left and right, with the left and right arrow keys; a horizontal sash lies between stacked panes and moves up and down, with the up and down arrow keys.
`label`	`string`	Required	The accessible name, such as "Resize the sidebar".
`value`	`number \| undefined`	`undefined`	The size of the pane the sash resizes, in pixels, which assistive technology announces; none when not bound. The sash does not limit itself by it.
`minimum`	`number \| undefined`	`undefined`	The smallest size of `SashComponent.value`, in pixels, which assistive technology announces; none when not bound.
`maximum`	`number \| undefined`	`undefined`	The largest size of `SashComponent.value`, in pixels, which assistive technology announces; none when not bound.
`step`	`number`	`SashResources.sashKeyboardStep`	How far one arrow key moves the sash, in pixels; 8 when not bound.

Outputs

Name	Type	Description
`resize`	`number`	Emits each move in pixels: positive toward the right for a vertical sash and downward for a horizontal one, negative the other way. A drag emits the distance the pointer moved since the last emission, never 0; an arrow key emits plus or minus `SashComponent.step`.

Accessibility

Key	Action
`Tab`	Moves the focus to the sash, one Tab stop, which shows its in-use bar while it has the keyboard focus.
`Arrow Left`	On a vertical sash, reports a move of one step to the left, 8px unless its owner sets another step; the owner resizes the panes.
`Arrow Right`	On a vertical sash, reports a move of one step to the right.
`Arrow Up`	On a horizontal sash, reports a move of one step upward.
`Arrow Down`	On a horizontal sash, reports a move of one step downward.

It is a focusable separator named by its label, which names the pane it resizes, with its orientation: vertical between panes side by side, horizontal between stacked panes.

The value, minimum and maximum its owner binds are the pane's size and limits in pixels, which assistive technology announces; the sash keeps to no limit itself, so its owner clamps the size.

Its grip and its in-use bar are hidden from assistive technology.

Specification

Loading…