Reference Layout

The layout is needed to place widgets in the UI. It has different modes to provide control over how to place the widgets. Some properties are specific to one or more modes.

Properties

mode

Sets the layout mode, which controls how to place child widgets on the screen. See the tutorial for a full explanation of each mode.

Property type:

LayoutMode

Possible values:

• box
• stack
• table
• float
• tab
• screen

Default value:

box

Usage examples:

In EzLang files:

- Layout:
    mode: box

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

state.set_mode(LayoutMode::Box);

run(root_widget, state_tree, scheduler);

orientation

Sets the layout orientation, which controls how some layout modes behave. See the tutorial for a full explanation of each mode, which includes the available orientations. In short: Box mode support horizontal/vertical and stack/table mode supports the 8 bidirectional orientations (such as tb-lr).

Property type:

LayoutOrientation

Possible values:

• horizontal
• vertical
• tb-lr
• tb-rl
• bt-lr
• bt-rl
• lr-tb
• lr-bt
• rl-tb
• rl-bt

Default value:

For box mode default is 'horizontal'. For stack and table mode default is: 'tb-lr'.

Usage examples:

In EzLang files:

- Layout:
    orientation: horizontal

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

state.set_orientation(LayoutOrientation::Horizontal);

run(root_widget, state_tree, scheduler);

active_screen

Only works when the layout mode property is set to 'screen'. This property determines which child layout (i.e. screen) is shown to the user. By default the first screen is shown, so it is not required to set this property. If you want to set this property, use the ID of the child layout you want to show.

Property type:

String

Default value:

Empty string. When string is empty, active_screen will initially be set to first child layout.

Possible values:

The ID property of any of the child layouts (i.e. screens).

Usage examples:

In EzLang files:

- Layout:
    mode: screen
    active_screen: my_screen_2
    - Layout:
        id: my_screen_1
    - Layout:
        id: my_screen_2

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

state.set_active_screen("my_screen_2");

run(root_widget, state_tree, scheduler);

active_tab

Only works when the layout mode property is set to 'tab'. This property determines which child layout (i.e. tab) is shown to the user. By default the first tab is shown, so it is not required to set this property. If you want to set this property, use the ID of the child layout you want to show.

Property type:

String

Possible values:

The ID property of any of the child layouts (i.e. tabs).

Default value:

Empty string. When string is empty, active_tab is initially set to the first child layout.

Usage examples:

In EzLang files:

- Layout:
    mode: screen
    active_tab: my_tab_2
    - Layout:
        id: my_tab_1
    - Layout:
        id: my_tab_2

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

state.set_active_tab("my_tab_2");

run(root_widget, state_tree, scheduler);

tab_name

Only works when the parent layout mode property is set to 'tab'. This property determines the name displayed in the tab header, which when clicked, makes this layout the active tab in the parent. By default, this is set to the ID property, so it is not required to set.

Property type:

String

Possible values:

Any string. You might want to keep it somewhat short, otherwise the tab header buttons will be very wide.

Default value:

Empty string. When string is empty, ID of the layout is used as tab header name.

Usage examples:

In EzLang files:

- Layout:
    mode: tab
    - Layout:
        id: my_tab_1
        tab_name: My tab

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

state.set_tab_name("My tab");

run(root_widget, state_tree, scheduler);

tab_header_fg_color

Only works when the layout is in tab mode. Sets the fg_color of the tab header button. In other words, the color of the text on the tab header.

Property type:

Color

Possible values:

• RGB value: 0-255, 0-255, 0-255
• Color words:
  • black
  • blue
  • dark_blue
  • cyan
  • dark_cyan
  • green
  • dark_green
  • grey
  • dark_grey
  • magenta
  • dark_magenta
  • red
  • dark_red
  • white
  • yellow
  • dark_yellow

Default value:

white

Usage examples:

In EzLang files:

- Layout:
    mode: tab
    tab_header_fg_color: red

- Layout:
    mode: tab
    tab_header_fg_color: 255, 0, 0

In code:

use ez_term::*;
use ez_term::GenericState;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_color_config_mut().set_tab_header_fg_color(Color::Red);
state.get_color_config_mut().set_tab_header_fg_color(Color::from((255, 0, 0)));

run(root_widget, state_tree, scheduler);

tab_header_bg_color

Only works when the layout is in tab mode. Sets the background color of the tab header button.

Property type:

Color

Possible values:

• RGB value: 0-255, 0-255, 0-255
• Color words:
  • black
  • blue
  • dark_blue
  • cyan
  • dark_cyan
  • green
  • dark_green
  • grey
  • dark_grey
  • magenta
  • dark_magenta
  • red
  • dark_red
  • white
  • yellow
  • dark_yellow

Default value:

black

Usage examples:

In EzLang files:

- Layout:
    mode: tab
    tab_header_bg_color: blue

- Layout:
    mode: tab
    tab_header_bg_color: 0, 0, 255

In code:

use ez_term::*;
use ez_term::GenericState;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_color_config_mut().set_tab_header_bg_color(Color::Blue);
state.get_color_config_mut().set_tab_header_bg_color(Color::from((0, 0, 255)));

run(root_widget, state_tree, scheduler);

tab_header_border_fg_color

Only works when the layout is in tab mode. Sets the foreground color of the tab header button borders.

Property type:

Color

Possible values:

• RGB value: 0-255, 0-255, 0-255
• Color words:
  • black
  • blue
  • dark_blue
  • cyan
  • dark_cyan
  • green
  • dark_green
  • grey
  • dark_grey
  • magenta
  • dark_magenta
  • red
  • dark_red
  • white
  • yellow
  • dark_yellow

Default value:

white

Usage examples:

In EzLang files:

- Layout:
    mode: tab
    tab_header_border_fg_color: blue

- Layout:
    mode: tab
    tab_header_border_fg_color: 0, 0, 255

In code:

use ez_term::*;
use ez_term::GenericState;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_color_config_mut().set_tab_header_fg_color(Color::Blue);
state.get_color_config_mut().set_tab_header_fg_color(Color::from((0, 0, 255)));

run(root_widget, state_tree, scheduler);

tab_header_border_bg_color

Only works when the layout is in tab mode. Sets the background color of the tab header button borders.

Property type:

Color

Possible values:

• RGB value: 0-255, 0-255, 0-255
• Color words:
  • black
  • blue
  • dark_blue
  • cyan
  • dark_cyan
  • green
  • dark_green
  • grey
  • dark_grey
  • magenta
  • dark_magenta
  • red
  • dark_red
  • white
  • yellow
  • dark_yellow

Default value:

black

Usage examples:

In EzLang files:

- Layout:
    mode: tab
    tab_header_border_bg_color: blue

- Layout:
    mode: tab
    tab_header_border_bg_color: 0, 0, 255

In code:

use ez_term::*;
use ez_term::GenericState;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_color_config_mut().set_tab_header_bg_color(Color::Blue);
state.get_color_config_mut().set_tab_header_bg_color(Color::from((0, 0, 255)));

run(root_widget, state_tree, scheduler);

tab_header_active_fg_color

Foreground color used for the tab header button that is active (meaning the associated tab is currently displayed).

Property type:

Color

Possible values:

• RGB value: 0-255, 0-255, 0-255
• Color words:
  • black
  • blue
  • dark_blue
  • cyan
  • dark_cyan
  • green
  • dark_green
  • grey
  • dark_grey
  • magenta
  • dark_magenta
  • red
  • dark_red
  • white
  • yellow
  • dark_yellow

Default value:

white

Usage examples:

In EzLang files:

- Layout:
    - Label:
        tab_header_active_fg_color: red

- Layout:
    - Label:
        tab_header_active_fg_color: 255, 0, 0

In code:

use ez_term::*;
use ez_term::GenericState;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_color_config_mut().set_tab_header_active_fg_color(Color::Red);
state.get_color_config_mut().set_tab_header_active_fg_color(Color::from((255, 0, 0)));

run(root_widget, state_tree, scheduler);

tab_header_active_bg_color

Background color used for the tab header button that is active (meaning the associated tab is currently displayed).

Property type:

Color

Possible values:

• RGB value: 0-255, 0-255, 0-255
• Color words:
  • black
  • blue
  • dark_blue
  • cyan
  • dark_cyan
  • green
  • dark_green
  • grey
  • dark_grey
  • magenta
  • dark_magenta
  • red
  • dark_red
  • white
  • yellow
  • dark_yellow

Default value:

black

Usage examples:

In EzLang files:

- Layout:
    - Label:
        tab_header_active_bg_color: red

- Layout:
    - Label:
        tab_header_active_bg_color: 255, 0, 0

In code:

use ez_term::*;
use ez_term::GenericState;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_color_config_mut().set_tab_header_active_bg_color(Color::Red);
state.get_color_config_mut().set_tab_header_active_bg_color(Color::from((255, 0, 0)));

run(root_widget, state_tree, scheduler);

can_drag

Only works on a Layout template which is spawned as a modal (see tutorial). When can_drag is true, the modal can be dragged across the screen.

Property type:

Bool

Possible values:

• true
• false

Default value:

true

Usage examples:

In EzLang files:

- <MyPopup@Layout>:
    can_drag: false

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();

scheduler.open_modal("MyPopup", &mut state_tree);
let state = state_tree.get_mut("modal").as_layout_mut();

state.set_can_drag(false);

run(root_widget, state_tree, scheduler);

fill

A bool that determines whether fill is enabled. If enabled, all empty pixels in the layout will be filled with a symbol. The symbol is determined by the property 'filler_symbol' (see property below). The color of the filler is determined by properties 'filler_fg_color' and 'filler_bg_color'.

Property type:

bool

Possible values:

• true
• false

Default value:

false

Usage examples:

In EzLang files:

- Layout:
    fill: true

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

state.set_fill(true);

run(root_widget, state_tree, scheduler);

filler_symbol

The symbol that will be used to fill empty pixels in the layout if the 'fill' property is set to true.

Property type:

String (only 1st character is used)

Possible values:

Any String, but only first character is used. Unicode allowed.

Default value:

Empty string.

Usage examples:

In EzLang files:

- Layout:
    filler_symbol: ░

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

state.set_fill(true);

run(root_widget, state_tree, scheduler);

filler_fg_color

Only works when the layout is in box, stack, table or float mode, and the fill property is set to true. Determines the foreground color of the filler pixels (i.e. the color of the filler symbol).

Property type:

Color

Possible values:

• RGB value: 0-255, 0-255, 0-255
• Color words:
  • black
  • blue
  • dark_blue
  • cyan
  • dark_cyan
  • green
  • dark_green
  • grey
  • dark_grey
  • magenta
  • dark_magenta
  • red
  • dark_red
  • white
  • yellow
  • dark_yellow

Default value:

white

Usage examples:

In EzLang files:

- Layout:
    filler_fg_color: red

- Layout:
    filler_fg_color: 255, 0, 0

In code:

use ez_term::*;
use ez_term::GenericState;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_color_config_mut().set_filler_fg_color()Color::Blue);
state.get_color_config_mut().set_filler_fg_color(Color::from((0, 0, 255)));

run(root_widget, state_tree, scheduler);

filler_bg_color

Only works when the layout is in box, stack, table or float mode, and the fill property is set to true. Determines the background color of the filler pixels.

Property type:

Color

Possible values:

• RGB value: 0-255, 0-255, 0-255
• Color words:
  • black
  • blue
  • dark_blue
  • cyan
  • dark_cyan
  • green
  • dark_green
  • grey
  • dark_grey
  • magenta
  • dark_magenta
  • red
  • dark_red
  • white
  • yellow
  • dark_yellow

Default value:

black

Usage examples:

In EzLang files:

- Layout:
    mode: tab
    filler_bg_color: red

- Layout:
    mode: tab
    filler_bg_color: 255, 0, 0

In code:

use ez_term::*;
use ez_term::GenericState;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_color_config_mut().set_filler_bg_color(Color::Blue);
state.get_color_config_mut().set_filler_bg_color(Color::from((0, 0, 255)));

run(root_widget, state_tree, scheduler);

view_size

Only works when the layout mode is box, float, stack or table. Determines the max amount of children displayed at one time. Default is 0, which displays all children. If set to a value higher than 0, the children displayed are determined by the 'view_page' property (see below). If this layout has e.g. 30 children, view size is set to 10, and view_page is 2, then children 10-20 are displayed.

Property type:

usize

Possible values:

Any usize.

Default value:

0 (display all children).

Usage examples:

In EzLang files:

- Layout:
    view_size: 10

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

state.set_view_size(1);

run(root_widget, state_tree, scheduler);

view_page

Only works when the layout mode is box, float, stack or table, and view_size is set to a value higher than 0. Determines which children are displayed. If this layout has e.g. 30 children, view size is set to 10, and view_page is 2, then children 10-20 are displayed.

Property type:

usize

Possible values:

Any usize higher than 0.

Default value:

1 (first page).

Usage examples:

In EzLang files:

- Layout:
    view_page: 10

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

state.set_view_page(2);

run(root_widget, state_tree, scheduler);

scroll_x

Only works when the layout mode is 'box', 'table', 'stack' or 'float'. Makes the width of the layout infinite and adds a horizontal scrollbar to move through the content. In most cases the easiest way to implement scrolling is to enable it on a box layout.

Property type:

bool

Possible values:

• true
• false

Default value:

false

Usage examples:

In EzLang files:

- Layout:
    scroll_x: true

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Scrolling properties are wrapping into a ScrollingConfig object, which we have to retrieve
// first:
state.get_scrolling_config_mut().set_scroll_x(true);

run(root_widget, state_tree, scheduler);

scroll_y

Only works when the layout mode is 'box', 'table', 'stack' or 'float'. Makes the height of the layout infinite and adds a vertical scrollbar to move through the content. In most cases the easiest way to implement scrolling is to enable it on a box layout.

Property type:

bool

Possible values:

• true
• false

Default value:

false

Usage examples:

In EzLang files:

- Layout:
    scroll_y: true

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Scrolling properties are wrapping into a ScrollingConfig object, which we have to retrieve
// first:
state.get_scrolling_config_mut().set_scroll_y(true);

run(root_widget, state_tree, scheduler);

scroll_start_x

Only works when the layout is scrolling horizontally. Determines the view of the scroll by a value between 0 and 1. If the total content is 100 pixels wide, then a scroll_start_x of 0.5 will show content starting from pixel 50. A value of 0 means the beginning of the content, a value of 1 means show the tail end of the content. Use with EzLang to optionally set a custom initial view for the scrollbar. Use in code to programmatically control the scrollbar.

Property type:

f64

Possible values:

F64 value between 0 and 1.

Default value:

0.0

Usage examples:

In EzLang files:

- Layout:
    scroll_start_x: 1.0

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Scrolling properties are wrapping into a ScrollingConfig object, which we have to retrieve
// first:
state.get_scrolling_config_mut().set_scroll_start_x(1.0);

run(root_widget, state_tree, scheduler);

scroll_start_y

Only works when the layout is scrolling vertically. Determines the view of the scroll by a value between 0 and 1. If the total content is 100 pixels high, then a scroll_start_y of 0.5 will show content starting from pixel 50. A value of 0 means the beginning of the content, a value of 1 means show the tail end of the content. Use with EzLang to optionally set a custom initial view for the scrollbar. Use in code to programmatically control the scrollbar.

Property type:

f64

Possible values:

F64 value between 0 and 1.

Default value:

0.0

Usage examples:

In EzLang files:

- Layout:
    scroll_start_y: 1.0

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Scrolling properties are wrapping into a ScrollingConfig object, which we have to retrieve
// first:
state.get_scrolling_config_mut().set_scroll_start_y(1.0);

run(root_widget, state_tree, scheduler);

rows

Only works when the layout is in table mode. Fixes the amount of rows in the table. If you set only the amount of rows, the amount of columns will grow to fit all the content. If you set both, the table will be fixed in size. It is mandatory to set either rows or cols, because the table needs to know if it should grow, and if so, in which direction. By default rows is 0 (will grow) and cols is 4 (will not grow).

Property type:

usize

Possible values:

Any usize number

Default value:

0

Usage examples:

In EzLang files:

- Layout:
    mode: table
    rows: 10

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_table_config_mut().set_rows(10);

run(root_widget, state_tree, scheduler);

cols

Only works when the layout is in table mode. Fixes the amount of columns in the table. If you set only the amount of columns, the amount of rows will grow to fit all the content. If you set both, the table will be fixed in size. It is mandatory to set either rows or cols, because the table needs to know if it should grow, and if so, in which direction. By default rows is 0 (will grow) and cols is 4 (will not grow).

Property type:

usize

Possible values:

Any usize number

Default value:

4

Usage examples:

In EzLang files:

- Layout:
    mode: table
    cols: 3

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_table_config_mut().set_cols(3);

run(root_widget, state_tree, scheduler);

col_default_width

Only works when the layout is in table mode. Sets the default width for columns, meaning that columns will be at least that width, but can still grow to accommodate widgets wider than the default width. Without setting this property, each individual column will be the width of its widest widget. Setting this property is useful if you want all your columns to be at least a certain width, even if all its widgets are smaller. Another use case is using this property in combination wih 'force_default_col_width: true' (see property below). In this case, you are hard coding each column to be exactly the col_default_width, without the ability to grow.

Property type:

usize

Possible values:

Any usize number

Default value:

0 (each column grows to the widest widget).

Usage examples:

In EzLang files:

- Layout:
    mode: table
    col_default_width: 20

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_table_config_mut().set_col_default_width(20);

run(root_widget, state_tree, scheduler);

force_default_col_width

Only works when the layout is in table mode and the 'col_default_width' property is set to a value higher than 0. Ensures that each column is exactly the col_default_width, without any ability to grow.

Property type:

bool

Possible values:

• true
• false

Default value:

false

Usage examples:

In EzLang files:

- Layout:
    mode: table
    col_default_width: 20
    force_default_col_width: true

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_table_config_mut().set_col_default_width(20);
state.get_table_config_mut().set_force_default_col_width(true);

run(root_widget, state_tree, scheduler);

row_default_height

Only works when the layout is in table mode. Sets the default height for rows, meaning that rows will be at least that height, but can still grow to accommodate widgets higher than the default height. Without setting this property, each individual row will be the height of its highest widget. Setting this property is useful if you want all your rows to be at least a certain height, even if all its widgets are smaller. Another use case is using this property in combination wih 'force_default_row_height: true' (see property below). In this case, you are hard coding each row to be exactly the row_default_height, without the ability to grow.

Property type:

usize

Possible values:

Any usize number

Default value:

0 (each row grows to the highest widget).

Usage examples:

In EzLang files:

- Layout:
    mode: table
    row_default_height: 20

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_table_config_mut().set_row_default_height(20);

run(root_widget, state_tree, scheduler);

force_default_row_height

Only works when the layout is in table mode and the 'row_default_height' property is set to a value higher than 0. Ensures that each row is exactly the row_default_height, without any ability to grow.

Property type:

bool

Possible values:

• true
• false

Default value:

false

Usage examples:

In EzLang files:

- Layout:
    mode: table
    row_default_height: 20
    force_default_row_height: true

In code:

use ez_term::*;
let (root_widget, mut state_tree, mut scheduler) = load_ui();
let state = state_tree.get_mut("my_layout").as_layout_mut();

// Table properties are wrapping into a TableConfig object, which we have to retrieve
// first:
state.get_table_config_mut().set_row_default_height(20);
state.get_table_config_mut().set_force_default_row_height(true);

run(root_widget, state_tree, scheduler);

Default callback implementations

on_scroll_up

If the layout is scrolling horizontally, this scrolls the layout to the left. If the layout is scrolling vertically, this scrolls the layout up. If you implement your own callback, returns true to surpress this behavior, or false to supplement it.

on_scroll_down

If the layout is scrolling horizontally, this scrolls the layout to the right. If the layout is scrolling vertically, this scrolls the layout down. If you implement your own callback, returns true to surpress this behavior, or false to supplement it.

Available callbacks

• on_scroll_up
• on_scroll_down
• on_hover
• on_drag
• on_left_click
• on_right_click
• on_select (called when a scrollbar is selected)