import { HorizontalLayout } from "https://deno.land/x/tui@2.1.11/src/layout/horizontal_layout.ts";
HorizontalLayout allows you to position elements in columns
so that they occupy whole space (HorizontalLayout's rectangle
)
Examples
Example 1
Example 1
const layout = new HorizontalLayout({
// 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 every horizontal layouts element
gapX: 0,
// gapY defines a vertical gap (margin) between horizontal layouts rectangle and elements
gapY: 0,
// Size of a HorizontalLayout, `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 HorizontalLayout.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
HorizontalLayout(options: LayoutOptions<T>)