type

SashBox

@Js class SashBox : Box

SashBox lays out children in a single direction allowing both fixed and pertange sizes that can fill the parent container.

constructors

make

fields

dir	Direction to layout child elements
minSize	Minimum size a child can be resized to if `resizable` is `true`.
resizable	Allow user to resize sash positions.
sizes	Size to apply to each child, width or height based on `dir`.

methods

div	Create a new divider element for resizing children.
onAdd
onRemove
onSashResize	Callback when user resizes a sash pane if `resizable` is `true`.

Slot Details

dir

Dir dir := Dir.right

Direction to layout child elements:

Dir.right: layout children left to right
Dir.down: layout childrent top to bottom

div

static Elem div()

Create a new divider element for resizing children. Dividers are required between children when resizable is true.

make

new make()

minSize

Str minSize := "10%"

Minimum size a child can be resized to if resizable is true. Only percentage sizes allowed.

onAdd

protected virtual override Void onAdd(Elem c)

onRemove

protected virtual override Void onRemove(Elem c)

onSashResize

Void onSashResize(|This| f)

Callback when user resizes a sash pane if resizable is true.

resizable

Bool resizable := false

Allow user to resize sash positions. See div.

sizes

Str[] sizes := Str[,]

Size to apply to each child, width or height based on dir. Fixed px and percentage sizes are allowed. Percentage sizes will be subtracted from total fixed size using CSS calc() method.