import { VerticalLayout } from "https://deno.land/x/tui@2.1.11/src/layout/vertical_layout.ts";
VerticalLayout allows you to position elements in rows
so that they occupy whole space (VerticalLayout's rectangle
)
Examples
Example 1
Example 1
const layout = new VerticalLayout({
// pattern defines how elements will be positioned
// This pattern tells us that we have elements of id's `"a"`, `"b"` and `"c"`
// Where `"a"` height spans over two units whereas `"b"` and `"c"` each height's span over 1 unit
//
// You can think of units as proportions:
// - This pattern is 4 unit wide (we defined 4 elements in array)
// - a is defined two times, this means it will be 2 unit wide (2/4, it will take 50% of the available space)
// - b and c are each defined one time, this means they will be 1 unit wide(1/4, they both will take 25% of remaining space)
pattern: [ "a", "a", "b", "c" ],
// gapX defines a horizontal gap (margin) between vertical layouts rectangle and elements
gapX: 0,
// gapY defines a vertical gap (margin) between every vertical layouts element
gapY: 0,
// Size of a VerticalLayout, `tui.rectangle` means we want to occupy the whole Tui's space
rectangle: tui.rectangle,
});
// To make elements use layout, you need to set their rectangle as VerticalLayout.element(layoutId)
const buttonA = new Button({
...properties,
rectangle: layout.element("a"),
});
const buttonB = new Button({
...properties,
rectangle: layout.element("b"),
});
const buttonC = new Button({
...properties,
rectangle: layout.element("c"),
});
Constructors
new
VerticalLayout(options: LayoutOptions<T>)