TabsLayout

Table of contents

A container that arranges its child views as tabs, each taking up the full width or height of the container. Only one tab at a time can be visible to the user. To control title, icon or close button of a single tab use "title", "icon" or "tab-close-button" properties of the children. In case of close button it can be set also on TabsLayout and will affect behavior of all tabs

Create from source

func NewTabsLayout(session Session, params Params) TabsLayout

Create new tabs layout object and returns its interface

Create from resource

TabsLayout {
    id = tabsLayout,
    width = 100%,
    height = 100%,
    content = [],
}

Interface description

Inherit methods, properties and events from ListAdapter, ViewsContainer

Properties

"content"

An array of child views

Constant: Content

Types: View, []View, string, []string, []any containing elements of View or string

Internal type is []View, other types converted to it during assignment

Conversion rules

View - converted to []View containing one element

[]View - nil-elements are prohibited, if the array contains nil, then the property will not be set, and the Set function will return false and an error message will be written to the log

string - if the string is a text representation of the View, then the corresponding view is created, otherwise a TextView is created, to which the given string is passed as a text. Then a []View is created containing the resulting view

[]string - each element of an array is converted to View as described above

[]any - this array must contain only View and a string. Each string element is converted to a view as described above. If array contains invalid values, the "content" property will not be set, and the Set function will return false and an error message will be written to the log

Examples

TabsLayout {
    width = 100%,
    height = 100%,
    content = [
        ListLayout{
            title = "Tab 1",
            background-color = lightblue,
        },
        ListLayout{
            title = "Tab 2",
            background-color = lightseagreen,
        },
    ]
}

tabs := rui.NewTabsLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Content: []rui.View{
        rui.NewListLayout(session, rui.Params{
            rui.Title:           "Tab 1",
            rui.BackgroundColor: rui.LightBlue,
        }),
        rui.NewListLayout(session, rui.Params{
            rui.Title:           "Tab 2",
            rui.BackgroundColor: rui.LightSeaGreen,
        }),
    },
})

"current"

Defines index of the current active child view

Constant: Current

Types: int, string

Values

int string Description
-1 "-1" No visible tab
>= 0 >= "0" Index of visible tab

"current-tab-style"

Set the style for the display of the current(selected) tab. The default value is "ruiCurrentTab" or "ruiCurrentVerticalTab"

Constant: CurrentTabStyle

Types: string

Examples

Description of theme with style listed

theme {
    colors = _{
        ruiCurrentTabColor = #FFFFFFFF,
        ruiCurrentTabTextColor = #FF000000,
        ruiHighlightColor = #FF1A74E8,
    },
    colors:dark = _{
        ruiCurrentTabColor = #FF000000,
        ruiCurrentTabTextColor = #FFFFFFFF,
        ruiHighlightColor = #FF1A74E8,
    },
    constants = _{
        ruiTabMargin = 1px,
        ruiTabHeight = 32px,
        ruiTabBarPadding = 2px,
        ruiTabRadius = 2px,
    }
    styles [
        ruiCurrentTab {
            min-height = @ruiTabHeight,
            background-color = @ruiCurrentTabColor,
            text-color = @ruiCurrentTabTextColor,
            padding-left = 4px,
            padding-top = 2px,
            padding-right = 4px,
            padding-bottom = 2px,
            margin = @ruiTabMargin,
            radius = @ruiTabRadius,
        },
        ruiCurrentTab:focus {
            padding-left = 2px,
            padding-top = 0px,
            padding-right = 2px,
            padding-bottom = 0px,
            border = _{style = solid, color = @ruiHighlightColor, width = 2px },
        },
    ]
}

TabsLayout {
    width = 100%,
    height = 100%,
    current-tab-style = ruiCurrentTab
    content = [
        ListLayout{
            title = "Tab 1",
            background-color = lightblue,
        },
        ListLayout{
            title = "Tab 2",
            background-color = lightseagreen,
        },
    ]
}

tabs := rui.NewTabsLayout(session, rui.Params{
    rui.Width:           rui.Percent(100),
    rui.Height:          rui.Percent(100),
    rui.CurrentTabStyle: "ruiCurrentTab",
    rui.Content: []rui.View{
        rui.NewListLayout(session, rui.Params{
            rui.Title:           "Tab 1",
            rui.BackgroundColor: rui.LightBlue,
        }),
        rui.NewListLayout(session, rui.Params{
            rui.Title:           "Tab 2",
            rui.BackgroundColor: rui.LightSeaGreen,
        }),
    },
})

"icon"

Defines the icon name that is displayed in the tab. The property is set for the child view of TabsLayout

Constant: Icon

Types: string

Examples

TabsLayout {
    width = 100%,
    height = 100%,
    content = [
        ListLayout{
            icon = "news.svg",
        },
        ListLayout{
            icon = "forum.svg",
        },
    ]
}

tabs := rui.NewTabsLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Content: []rui.View{
        rui.NewListLayout(session, rui.Params{
            rui.Icon: "news.svg",
        }),
        rui.NewListLayout(session, rui.Params{
            rui.Icon: "forum.svg",
        }),
    },
})

"tab-bar-style"

Set the style for the display of the tab bar. The default value is "ruiTabBar"

Constant: TabBarStyle

Types: string

Examples

Description of theme with style listed

theme {
    colors = _{
        ruiTabBarBackgroundColor = #FFEEEEEE,
    },
    colors:dark = _{
        ruiTabBarBackgroundColor = #FF303030,
    },
    constants = _{
        ruiTabMargin = 1px,
        ruiTabHeight = 32px,
        ruiTabBarPadding = 2px,
        ruiTabRadius = 2px,
    }
    styles [
        ruiTabBar {
            background-color = @ruiTabBarBackgroundColor,
        }
    ]
}

TabsLayout {
    width = 100%,
    height = 100%,
    tab-bar-style = ruiTabBar
    content = [
        ListLayout{
            title = "Tab 1",
        },
        ListLayout{
            title = "Tab 2",
        },
    ]
}

tabs := rui.NewTabsLayout(session, rui.Params{
    rui.Width:           rui.Percent(100),
    rui.Height:          rui.Percent(100),
    rui.TabBarStyle:     "ruiTabBar",
    rui.Content: []rui.View{
        rui.NewListLayout(session, rui.Params{
            rui.Title:           "Tab 1",
        }),
        rui.NewListLayout(session, rui.Params{
            rui.Title:           "Tab 2",
        }),
    },
})

"tab-close-button"

Controls whether to add close button to a tab(s). This property can be set separately for each child view or for tabs layout itself. Property set for child view takes precedence over the value set for tabs layout. Default value is false

Constant: TabCloseButton

Types: bool, int, string

Values

bool int string Description
true 1 "true", "yes", "on", "1" Tab(s) has close button
false 0 "false", "no", "off", "0" No close button in tab(s)

"tab-style"

Set the style for the display of the tab. The default value is "ruiTab" or "ruiVerticalTab"

Constant: TabStyle

Types: string

Examples

Description of theme with style listed

theme {
    colors = _{
        ruiTabBarBackgroundColor = #FFEEEEEE,
        ruiTabColor = #FFD0D0D0,
        ruiTabTextColor = #FF404040,
        ruiHighlightColor = #FF1A74E8,
    },
    colors:dark = _{
        ruiTabBarBackgroundColor = #FF303030,
        ruiTabColor = #FF606060,
        ruiTabTextColor = #FFE0E0E0,
        ruiHighlightColor = #FF1A74E8,
    },
    constants = _{
        ruiTabMargin = 1px,
        ruiTabHeight = 32px,
        ruiTabRadius = 2px,
    }
    styles [
        ruiTab {
            min-height = @ruiTabHeight,
            background-color = @ruiTabColor,
            text-color = @ruiTabTextColor,
            padding-left = 4px,
            padding-top = 2px,
            padding-right = 4px,
            padding-bottom = 2px,
            margin = @ruiTabMargin,
            radius = @ruiTabRadius,
        },
        ruiTab:focus {
            padding-left = 2px,
            padding-top = 0px,
            padding-right = 2px,
            padding-bottom = 0px,
            border = _{style = solid, color = @ruiHighlightColor, width = 2px },
        },
    ]
}

TabsLayout {
    width = 100%,
    height = 100%,
    tab-style = ruiTab
    content = [
        ListLayout{
            title = "Tab 1",
        },
        ListLayout{
            title = "Tab 2",
        },
    ]
}

tabs := rui.NewTabsLayout(session, rui.Params{
    rui.Width:    rui.Percent(100),
    rui.Height:   rui.Percent(100),
    rui.TabStyle: "ruiTab",
    rui.Content: []rui.View{
        rui.NewListLayout(session, rui.Params{
            rui.Title: "Tab 1",
        }),
        rui.NewListLayout(session, rui.Params{
            rui.Title: "Tab 2",
        }),
    },
})

"tabs"

Sets where the tabs are located. Default value is "top"

Constant: Tabs

Types: int, string

Values

int string Description
0(TopTabs) "top" Tabs on the top
1(BottomTabs) "bottom" Tabs on the bottom
2(LeftTabs) "left" Tabs on the left. Each tab is rotated 90° counterclockwise
3(RightTabs) "right" Tabs located on the right. Each tab is rotated 90° clockwise
4(LeftListTabs) "left-list" Tabs on the left. The tabs are displayed as a list
5(RightListTabs) "right-list" Tabs on the right. The tabs are displayed as a list
6(HiddenTabs) "hidden" Tabs are hidden

"title"

Set the title of the tab. The property is set for the child view of TabsLayout

Constant: Title

Types: string

Examples

TabsLayout {
    width = 100%,
    height = 100%,
    content = [
        ListLayout{
            title = "Tab 1",
        },
        ListLayout{
            title = "Tab 2",
        },
    ]
}

tabs := rui.NewTabsLayout(session, rui.Params{
    rui.Width:           rui.Percent(100),
    rui.Height:          rui.Percent(100),
    rui.Content: []rui.View{
        rui.NewListLayout(session, rui.Params{
            rui.Title:           "Tab 1",
        }),
        rui.NewListLayout(session, rui.Params{
            rui.Title:           "Tab 2",
        }),
    },
})

Events

"current-tab-changed"

Occur when the new tab becomes active

Constant: CurrentTabChangedEvent

General listener format:

func(tabsLayout rui.TabsLayout, newTab, oldTab int)

where: * tabsLayout - Interface of a tabs layout which generated this event * newTab - Index of a new active tab * oldTab - Index of an old active tab

Allowed listener formats:

func(tabsLayout rui.TabsLayout, newTab int)

func(newTab, oldTab int)

func(newTab int)

func()

"tab-close-event"

Occurs when the user clicks on the tab close button

Constant: TabCloseEvent

General listener format:

func(tabsLayout rui.TabsLayout, tab int)

where: * tabsLayout - Interface of a tabs layout which generated this event * tab - Index of the tab

Allowed listener formats:

func(tab int)

func(tabsLayout rui.TabsLayout)

func()

func TabsLayoutByID(rootView View, id string) TabsLayout

Return a TabsLayout with id equal to the argument of the function or nil if there is no such View or View is not TabsLayout

© Alxanosoft inc.