Tutorial EzLang Layout Modes Tab

Tab mode creates tabs for you based on child layouts. This means that in tab mode, you can only add other layouts, not individual widgets. The root layout cannot be tab mode. A tab header button will automatically be created for each child layout using the 'tab_name' property of the child layout as a tab name. If the 'tab_name' property is not set, the child ID is used. Here is an example with three tabs:

- Layout:
    mode: box
    orientation: vertical
    - Label:
        text: Tabs example:
        auto_scale: true, true
        halign: center
    - Layout:
        mode: tab
        active_tab: tab_one
        tab_header_fg_color: white
        tab_header_bg_color: black
        tab_header_border_fg_color: white
        tab_header_border_bg_color: black
        tab_header_active_fg_color: yellow
        tab_header_active_bg_color: black
        selection_order: 4
        border: true
        - Layout:
            id: tab_one
            tab_name: Tab one
            mode: box
            - Label:
                text: Hello tab one!
        - Layout:
            id: tab_two
            tab_name: Tab two
            mode: box
            - Label:
                text: Hello tab two!
        - Layout:
            id: tab_three
            tab_name: Tab three
            mode: box
            - Label:
                text: Hello tab three!

Note that the active_tab property is optional, by default the first tab is active. Users can then switch tabs using the tab header buttons that are created automatically. This example also showed all tab related color properties, but because all default foreground colors are white and all default background colors are black, most could have been left out in this example.

Keep in mind that tab header buttons are three pixels high, so the effective height of your layout will be three pixels smaller.

It is possible to change the active tab from code. Although callbacks will be discussed in a later chapter, we'll look at an example just for reference:

use ez_term::*;
fn change_tab_callback(context: Context) {
    let state = context.state_tree.get_mut("my_tab_layout").as_layout_mut();
    state.set_active_tab("tab_two");
    state.update(context.scheduler);
}

Continue

The general tutorial continues with: EzLang Screen mode layouts.