How to use the layout function from blessed

Find comprehensive JavaScript blessed.layout code examples handpicked from public code repositorys.

blessed.layout is a function that creates a layout manager for blessed widgets. It is used to arrange and resize child elements within a container.

index.js

GitHub: trxcllnt/docker-compose-command-center

79
80
81
82
83
84
85
86
87
88
    dockBorders: true, autoPadding: true, ignoreDockContrast: true,
    input: ttys.stdin, output: ttys.stdout, cursor: { shape: 'line', color: 'white' },
    ...props,
});

const containerGrid = (props = {}) => blessed.layout({
    layout: 'grid', padding: 0,
    top: '5%', left: '0%', width: '100%', height: `90%`,
    key: true, mouse: true, scrollable: false, alwaysScroll: false,
    ...props

branch.js

GitHub: golbin/git-commander

7
8
9
10
11
12
13
14
15
    prompt  = null;

var init = function (screen) {
  styles.layout.parent = screen;

  layout = blessed.layout(styles.layout);

  styles.list.parent    = layout;
  styles.menubar.parent = layout;

+ 3 other calls in file

How does blessed.layout work?

blessed.layout is a module in the Blessed library that allows for the creation of complex, nested layouts for terminal applications, including both absolute positioning and flexible, relative layouts. It provides a variety of functions for configuring and manipulating layout elements, such as split panes, grids, and boxes, and supports a range of formatting options for customizing the appearance of layout components. The layout manager also includes features such as dynamic resizing and responsive layout behavior.

widgets.ts

GitHub: typon/gudb-obsolete

33
34
35
36
37
38
39
40
41
42
    autoPadding: true,
    fullUnicode: true,
    dockBorders: true,
    warnings: true,
});
this._layout = blessed.layout({
    parent: this._screen,
    top: 0,
    left: 0,
    width: '100%',

+ 8 other calls in file

help.js

GitHub: BenWagner69/BitVision

24
25
26
27
28
29
30
31
32
33
34
35


// MAIN //


module.exports.createHelpScreen = (screen, version, callback) => {
  let helpMenuLayout = null;
  helpMenuLayout = blessed.layout({
    parent: screen,
    top: "center",
    left: "center",
    width: 80,

+ 6 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const blessed = require("blessed");

// Create a screen object
const screen = blessed.screen({
  smartCSR: true,
});

// Create a layout
const layout = blessed.layout({
  parent: screen,
  width: "100%",
  height: "100%",
  layout: "grid",
  rows: [1, 1, 1],
  cols: [1, 1, 1],
});

// Add boxes to the layout
const box1 = blessed.box({
  parent: layout,
  top: "center",
  left: "center",
  content: "Box 1",
  style: {
    fg: "white",
    bg: "blue",
  },
});

const box2 = blessed.box({
  parent: layout,
  top: "center",
  left: "center",
  content: "Box 2",
  style: {
    fg: "white",
    bg: "red",
  },
});

const box3 = blessed.box({
  parent: layout,
  top: "center",
  left: "center",
  content: "Box 3",
  style: {
    fg: "white",
    bg: "green",
  },
});

// Render the screen
screen.render();

This creates a layout with a 3x3 grid of cells, and adds three boxes to it. The layout component is used to manage the placement of child elements in the grid.

layout.js

GitHub: jussikan/rats

21
22
23
24
25
26
27
28
29
30
31
32
  shrink: false,
  clickable: true,
  width: "100%",
  height: "100%",
};
var rootLayout = blessed.layout(RootLayoutDefinition);




var environments = sortBy([
  {

+ 10 other calls in file

UI.js

GitHub: jussikan/rats

75
76
77
78
79
80
81
82
83
84
85
function UI(screen, program) {
	this.screen = screen;
	this.program = program;


	/* TODO abstract */
	this.layout = blessed.layout({
		...RootLayoutDefinition,
		parent: this.screen
	});

+ 4 other calls in file

index.js

GitHub: charlesyiu/spotlighttui

45
46
47
48
49
50
51
52
53
54
55
    }
}


if (validConfig) {
    // shortcuts
    const shortcuts = blessed.layout({
        top: "25%",
        left: "center",
        width: "75%",
        height: 8,

Other functions in blessed

Sorted by popularity

blessed.box is the most popular function in blessed (4356 examples)

Other popular packages:

Home

About