Layout
Line, Text, List, Bar, Border, and Gauge are renderable elements; others need to be placed within any of them.
Rectβ
A Rect is represented an area within the terminal by four attributes:
ui.Rect {
x = 10, -- x position
y = 10, -- y position
w = 20, -- width
h = 30, -- height
}
ui.Rect.default -- Equal to `ui.Rect { x = 0, y = 0, w = 0, h = 0 }`
You can get a pre-computed Rect through ui.Layout().
Note that if you intend to create a Rect yourself, ensure these values are calculated accurately; otherwise, it may cause Yazi to crash!
xβ
X position of the rect.
| Type | integer |
yβ
Y position of the rect.
| Type | integer |
wβ
Width of the rect.
| Type | integer |
hβ
Height of the rect.
| Type | integer |
leftβ
Left position of the rect.
| Type | integer |
rightβ
Right position of the rect.
| Type | integer |
topβ
Top position of the rect.
| Type | integer |
bottomβ
Bottom position of the rect.
| Type | integer |
pad(self, padding)β
Apply a padding to the rect.
| In/Out | Type |
|---|---|
self | Self |
padding | Pad |
| Return | self |
__new(value)β
Make a new rect.
| In/Out | Type |
|---|---|
value | { x: integer?, y: integer?, w: integer?, h: integer? } |
| Return | Self |
Padβ
Pad represents a padding, and all of its parameters are integers:
ui.Pad(top, right, bottom, left)
topβ
Top padding.
| Type | integer |
rightβ
Right padding.
| Type | integer |
bottomβ
Bottom padding.
| Type | integer |
leftβ
Left padding.
| Type | integer |
top(top)β
Create a padding with only top value, which is equal to ui.Pad(top, 0, 0, 0).
| In/Out | Type |
|---|---|
top | integer |
| Return | Self |
right(right)β
Create a padding with only right value, which is equal to ui.Pad(0, right, 0, 0).
| In/Out | Type |
|---|---|
right | integer |
| Return | Self |
bottom(bottom)β
Create a padding with only bottom value, which is equal to ui.Pad(0, 0, bottom, 0).
| In/Out | Type |
|---|---|
bottom | integer |
| Return | Self |
left(left)β
Create a padding with only left value, which is equal to ui.Pad(0, 0, 0, left).
| In/Out | Type |
|---|---|
left | integer |
| Return | Self |
x(x)β
Create a padding on both x-axis, which is equal to ui.Pad(0, x, 0, x).
| In/Out | Type |
|---|---|
x | integer |
| Return | Self |
y(y)β
Create a padding on both y-axis, which is equal to ui.Pad(y, 0, y, 0).
| In/Out | Type |
|---|---|
y | integer |
| Return | Self |
xy(x, y)β
Create a padding on both x and y-axis, which is equal to ui.Pad(y, x, y, x).
| In/Out | Type |
|---|---|
x | integer |
y | integer |
| Return | Self |
__new(top, right, bottom, left)β
Make a new padding.
| In/Out | Type |
|---|---|
top | integer |
right | integer |
bottom | integer |
left | integer |
| Return | Self |
Posβ
Pos represents a position, which is composed of an origin and an offset relative to that origin:
ui.Pos { "center", x = 5, y = 3, w = 20, h = 10 }
Its only parameter is a table containing the following keys:
[1]: Origin of the position.x: X-offset relative to the origin, default is 0.y: Y-offset relative to the origin, default is 0.w: Width, default is 0.h: Height, default is 0.
[1]β
Origin of the position.
| Type | Origin |
xβ
X-offset relative to the origin.
| Type | integer |
yβ
Y-offset relative to the origin.
| Type | integer |
wβ
Width of the position.
| Type | integer |
hβ
Height of the position.
| Type | integer |
__new(value)β
Make a new position.
| In/Out | Type |
|---|---|
value | { [1]: Origin, x?: integer, y?: integer, w?: integer, h?: integer } |
| Return | Self |
Styleβ
Create a style:
ui.Style()
fg(self, color)β
Apply a foreground color.
| In/Out | Type |
|---|---|
self | Self |
color | AsColor |
| Return | self |
bg(self, color)β
Apply a background color.
| In/Out | Type |
|---|---|
self | Self |
color | AsColor |
| Return | self |
bold(self)β
Apply a bold style.
| In/Out | Type |
|---|---|
self | Self |
| Return | self |
dim(self)β
Apply a dim style.
| In/Out | Type |
|---|---|
self | Self |
| Return | self |
italic(self)β
Apply an italic style.
| In/Out | Type |
|---|---|
self | Self |
| Return | self |
underline(self)β
Apply an underline style.
| In/Out | Type |
|---|---|
self | Self |
| Return | self |
blink(self)β
Apply a blink style.
Note that this style may not be supported by all terminals.
| In/Out | Type |
|---|---|
self | Self |
| Return | self |
blink_rapid(self)β
Apply a rapid blink style.
Note that this style may not be supported by all terminals.
| In/Out | Type |
|---|---|
self | Self |
| Return | self |
reverse(self)β
Apply a reverse style.
| In/Out | Type |
|---|---|
self | Self |
| Return | self |
hidden(self)β
Apply a hidden style.
| In/Out | Type |
|---|---|
self | Self |
| Return | self |
crossed(self)β
Apply a crossed style.
| In/Out | Type |
|---|---|
self | Self |
| Return | self |
reset(self)β
Apply a reset style.
| In/Out | Type |
|---|---|
self | Self |
| Return | self |
patch(self, another)β
Patch the style with another.
| In/Out | Type |
|---|---|
self | Self |
another | Self |
| Return | self |
| Private | This method can't be inherited. |
__new()β
Make a new style.
| In/Out | Type |
|---|---|
| Return | Self |
Spanβ
ui.Span is the smallest unit of text, yet a component of ui.Line. Create a span:
ui.Span("foo")
For convenience, ui.Span can also accept itself as a argument:
ui.Span(ui.Span("bar"))
| Inherit | Style | To call Style methods on it directly |
visible(self)β
Whether the span is visible, i.e. includes any printable characters.
| In/Out | Type |
|---|---|
self | Self |
| Return | boolean |
style(self, style)β
Set the style of the span.
| In/Out | Type |
|---|---|
self | Self |
style | Style |
| Return | self |
Span inherits from Style, besides applying a whole Style, you can also call those methods of Style directly on it, which means:
local style = ui.Style():fg("white"):bg("black"):bold()
ui.Span("Hello world"):style(style)
can be also written as:
ui.Span("Hello world"):fg("white"):bg("black"):bold()
__new(value)β
Make a new span.
| In/Out | Type |
|---|---|
value | AsSpan |
| Return | Self |
Lineβ
ui.Line represents a line, consisting of multiple ui.Spans, and it accepts a table of them:
ui.Line { ui.Span("foo"), ui.Span("bar") }
For convenience, the following types are also supported:
-- string
ui.Line("foo")
-- ui.Span
ui.Line(ui.Span("bar"))
-- ui.Line itself
ui.Line(ui.Line("baz"))
-- Mixed table of string, ui.Span, ui.Line
ui.Line { "foo", ui.Span("bar"), ui.Line("baz") }
| Inherit | Style | To call Style methods on it directly |
area(self, rect)β
Set the area of the line.
| In/Out | Type |
|---|---|
self | Self |
rect | Rect? |
| Return | self | Rect |
If rect is not specified, it returns the current area.
width(self)β
Calculate the width of the line.
| In/Out | Type |
|---|---|
self | Self |
| Return | integer |
align(self, align)β
Set the alignment of the line.
| In/Out | Type |
|---|---|
self | Self |
align | Align |
| Return | self |
visible(self)β
Whether the line is visible, i.e. includes any printable characters.
| In/Out | Type |
|---|---|
self | Self |
| Return | boolean |
style(self, style)β
Set the style of the line.
| In/Out | Type |
|---|---|
self | Self |
style | Style |
| Return | self |
Like with Span, you can also call the Style methods on it directly:
ui.Line("Hello world"):fg("white"):bg("black"):bold()
__new(value)β
Make a new line.
| In/Out | Type |
|---|---|
value | AsLine |
| Return | Self |
Textβ
ui.Text is used to represent multi-line text, it takes a table of ui.Line:
ui.Text { ui.Line("foo"), ui.Line("bar") }
For convenience, the following types are also supported:
-- string
ui.Text("foo\nbar")
-- ui.Line
ui.Text(ui.Line("foo"))
-- ui.Span
ui.Text(ui.Span("bar"))
-- Mixed table of string, ui.Line, ui.Span
ui.Text { "foo", ui.Line("bar"), ui.Span("baz") }
You can also use ui.Text.parse(code) to parse an ANSI escape sequence string into a text.
| Inherit | Style | To call Style methods on it directly |
area(self, rect)β
Set the area of the text.
| In/Out | Type |
|---|---|
self | Self |
rect | Rect? |
| Return | self | Rect |
If rect is not specified, it returns the current area.
align(self, align)β
Set the alignment of the text.
| In/Out | Type |
|---|---|
self | Self |
align | Align |
| Return | self |
wrap(self, wrap)β
Set the wrap of the text.
| In/Out | Type |
|---|---|
self | Self |
wrap | Wrap |
| Return | self |
max_width(self)β
Calculate the maximum width of the text across all lines.
| In/Out | Type |
|---|---|
self | Self |
| Return | integer |
style(self, style)β
Set the style of the text.
| In/Out | Type |
|---|---|
self | Self |
style | Style |
| Return | self |
Like with Span, you can also call the Style methods on it directly:
ui.Text("Hello world"):fg("white"):bg("black"):bold()
__new(value)β
Make a new text.
| In/Out | Type |
|---|---|
value | AsText |
| Return | Self |
Layoutβ
Create a layout:
local areas = ui.Layout()
:direction(ui.Layout.HORIZONTAL)
:constraints({ ui.Constraint.Percentage(50), ui.Constraint.Percentage(50) })
:split(area)
local left = areas[1] -- The first rect
local right = areas[2] -- The second rect
direction(self, direction)β
Set the direction of the layout.
| In/Out | Type |
|---|---|
self | Self |
direction | Direction |
| Return | self |
The direction accepts the following constants:
ui.Layout.HORIZONTALui.Layout.VERTICAL
margin(self, margin)β
Set the margin of the layout.
| In/Out | Type | Note |
|---|---|---|
self | Self | - |
margin | integer | Positive integer |
| Return | self | - |
margin_h(self, margin)β
Set the horizontal margin of the layout.
| In/Out | Type | Note |
|---|---|---|
self | Self | - |
margin | integer | Positive integer |
| Return | self | - |
margin_v(self, margin)β
Set the vertical margin of the layout.
| In/Out | Type | Note |
|---|---|---|
self | Self | - |
margin | integer | Positive integer |
| Return | self | - |
constraints(self, constraints)β
Set the constraints of the layout.
| In/Out | Type |
|---|---|
self | Self |
constraints | Constraint[] |
| Return | self |
split(self, rect)β
Split the layout into multiple Rects according to the constraints.
| In/Out | Type |
|---|---|
self | Self |
rect | Rect |
| Return | Rect[] |
__new()β
Make a new layout.
| In/Out | Type |
|---|---|
| Return | Self |
Constraintβ
A constraint that defines the size of a layout element.
Constraints can be used to specify a fixed size, a percentage of the available space, a ratio of the available space, a minimum or maximum size or a fill proportional value for a layout element.
Relative constraints (percentage, ratio) are calculated relative to the entire space being divided, rather than the space available after applying more fixed constraints (min, max, length).
Constraints are prioritized in the following order:
ui.Constraint.Min(min)ui.Constraint.Max(max)ui.Constraint.Length(len)ui.Constraint.Percentage(p)ui.Constraint.Ratio(num, den)ui.Constraint.Fill(scale)
Min(min)β
Applies a minimum size constraint to the element.
| In/Out | Type |
|---|---|
min | integer |
| Return | Self |
The element size is set to at least the specified amount.
-- { Percentage(100), Min(20) }
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- β 30 px ββ 20 px β
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- { Percentage(100), Min(10) }
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- β 40 px ββ 10 px β
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
Max(max)β
Applies a maximum size constraint to the element.
| In/Out | Type |
|---|---|
max | integer |
| Return | Self |
The element size is set to at most the specified amount.
-- { Percentage(0), Max(20) }
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- β 30 px ββ 20 px β
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- { Percentage(0), Max(10) }
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- β 40 px ββ 10 px β
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
Length(len)β
Applies a length constraint to the element.
| In/Out | Type |
|---|---|
len | integer |
| Return | Self |
The element size is set to the specified amount:
-- { Length(20), Length(20) }
-- ββββββββββββββββββββββββββββββββββββββββ
-- β 20 px ββ 20 px β
-- ββββββββββββββββββββββββββββββββββββββββ
-- { Length(20), Length(30) }
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- β 20 px ββ 30 px β
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
Percentage(p)β
Applies a percentage of the available space to the element.
| In/Out | Type |
|---|---|
p | integer |
| Return | Self |
Converts the given percentage to a floating-point value and multiplies that with area. This value is rounded back to an integer as part of the layout split calculation.
-- { Percentage(75), Fill(1) }
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- β 38 px ββ 12 px β
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- { Percentage(50), Fill(1) }
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- β 25 px ββ 25 px β
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
Ratio(num, den)β
Applies a ratio of the available space to the element.
| In/Out | Type |
|---|---|
num | integer |
den | integer |
| Return | Self |
Converts the given ratio to a floating-point value and multiplies that with area. This value is rounded back to an integer as part of the layout split calculation.
-- { Ratio(1, 2), Ratio(1, 2) }
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- β 25 px ββ 25 px β
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- { Ratio(1, 4), Ratio(1, 4), Ratio(1, 4), Ratio(1, 4) }
-- βββββββββββββββββββββββββββββββββββββββββββββ βββββ
-- β 13 px ββ 12 px ββ 13 px ββ 12 px β
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
Fill(scale)β
Applies the scaling factor proportional to all other Fill elements
to fill excess space.
| In/Out | Type |
|---|---|
scale | integer |
| Return | Self |
The element will only expand or fill into excess available space, proportionally matching
other Fill elements while satisfying all other constraints.
-- { Fill(1), Fill(2), Fill(3) }
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- β 8 px ββ 17 px ββ 25 px β
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- { Fill(1), Percentage(50), Fill(1) }
-- ββββββββββββββββββββββββββββββββββββββββββββββββββ
-- β 13 px ββ 25 px ββ 12 px β
-- ββββββββββββββββββββ ββββββββββββββββββββββββββββββ
See https://docs.rs/ratatui/latest/ratatui/layout/enum.Constraint.html for more information.
Listβ
Create a List that takes a table of ui.Text:
ui.List { ui.Text("foo"), ui.Text("bar") }
For convenience, the following types are also supported:
-- Table of string
ui.List { "foo", "bar" }
-- Table of ui.Line
ui.List { ui.Line("foo"), ui.Line("bar") }
-- Table of ui.Span
ui.List { ui.Span("foo"), ui.Span("bar") }
-- Mixed table of string, ui.Line, ui.Span
ui.List { "foo", ui.Line("bar"), ui.Span("baz") }
area(self, rect)β
Set the area of the list.
| In/Out | Type |
|---|---|
self | Self |
rect | Rect? |
| Return | self | Rect |
If rect is not specified, it returns the current area.
style(self, style)β
Set the style of the list.
| In/Out | Type |
|---|---|
self | Self |
style | Style |
| Return | self |
__new(value)β
Make a new list.
| In/Out | Type |
|---|---|
value | string | Span | Line | Text | (string|Span|Line|Text)[] |
| Return | Self |
Barβ
Create a bar:
ui.Bar(edge)
The first attribute denotes the direction of the bar and accepts an Edge constant.
area(self, rect)β
Set the area of the bar.
| In/Out | Type |
|---|---|
self | Self |
rect | Rect? |
| Return | self | Rect |
If rect is not specified, it returns the current area.
symbol(self, symbol)β
Set the symbol of the bar.
| In/Out | Type |
|---|---|
self | Self |
symbol | string |
| Return | self |
style(self, style)β
Set the style of the bar.
| In/Out | Type |
|---|---|
self | Self |
style | Style |
| Return | self |
__new(edge)β
Make a new bar.
| In/Out | Type |
|---|---|
edge | Edge |
| Return | Self |
Borderβ
Create a border:
ui.Border(edge)
The first attribute denotes the edge of the border and accepts an Edge constant.
area(self, rect)β
Set the area of the border.
| In/Out | Type |
|---|---|
self | Self |
rect | Rect? |
| Return | self | Rect |
If rect is not specified, it returns the current area.
type(self, type)β
Set the type of the border.
| In/Out | Type |
|---|---|
self | Self |
type | integer |
| Return | self |
The type accepts the following constants:
ui.Border.PLAINui.Border.ROUNDEDui.Border.DOUBLEui.Border.THICKui.Border.QUADRANT_INSIDEui.Border.QUADRANT_OUTSIDE
style(self, style)β
Set the style of the border.
| In/Out | Type |
|---|---|
self | Self |
style | Style |
| Return | self |
__new(edge)β
Make a new border.
| In/Out | Type |
|---|---|
edge | Edge |
| Return | Self |
Gaugeβ
Create a gauge:
ui.Gauge()
area(self, rect)β
Set the area of the gauge.
| In/Out | Type |
|---|---|
self | Self |
rect | Rect? |
| Return | self | Rect |
If rect is not specified, it returns the current area.
percent(self, percent)β
Set the percentage of the gauge.
| In/Out | Type |
|---|---|
self | Self |
percent | integer |
| Return | self |
ratio(self, ratio)β
Set the ratio of the gauge.
| In/Out | Type | Note |
|---|---|---|
self | Self | - |
ratio | number | Between 0 and 1 |
| Return | self | - |
label(self, label)β
Set the label of the gauge.
| In/Out | Type |
|---|---|
self | Self |
label | string |
| Return | self |
style(self, style)β
Set the style of everything except the gauge itself.
| In/Out | Type |
|---|---|
self | Self |
style | Style |
| Return | self |
gauge_style(self, style)β
Set the style of the gauge itself.
| In/Out | Type |
|---|---|
self | Self |
style | Style |
| Return | self |
__new()β
Make a new gauge.
| In/Out | Type |
|---|---|
| Return | Self |
Clearβ
Clear the content of a specific area, which is a Rect. Place it followed by the component that you want to clear:
local components = {
ui.Text("..."):area(rect),
-- ...
ui.Clear(rect),
}
area(self, rect)β
Set the area of the clear.
| In/Out | Type |
|---|---|
self | Self |
rect | Rect? |
| Return | self | Rect |
If rect is not specified, it returns the current area.
__new(rect)β
Make a new clear.
| In/Out | Type |
|---|---|
rect | Rect |
| Return | Self |
Alignβ
Alignment of an element such as Text or Line.
LEFTβ
Align to the left.
| Type | Self |
CENTERβ
Align to the center.
| Type | Self |
RIGHTβ
Align to the right.
| Type | Self |
Wrapβ
Wrapping behavior of a Text.
NOβ
Disables wrapping.
| Type | Self |
YESβ
Enables wrapping.
| Type | Self |
TRIMβ
Enables wrapping and trims the leading whitespace.
| Type | Self |
Edgeβ
Which edges of elements such as Bar or Border should be applied.
NONEβ
No edge is applied.
| Type | Self |
TOPβ
Applies the top edge.
| Type | Self |
RIGHTβ
Applies the right edge.
| Type | Self |
BOTTOMβ
Applies the bottom edge.
| Type | Self |
LEFTβ
Applies the left edge.
| Type | Self |
ALLβ
Applies all edges.
| Type | Self |