type

SashBox

src @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

src Dir dir := Dir.right

Direction to layout child elements:

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

div

src static Elem div()

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

make

src new make()

minSize

src Str minSize := "10%"

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

onAdd

src protected virtual override Void onAdd(Elem c)

onRemove

src protected virtual override Void onRemove(Elem c)

onSashResize

src Void onSashResize(|This| f)

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

resizable

src Bool resizable := false

Allow user to resize sash positions. See div.

sizes

src 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.