Tabs – Bellui

Tabs

Tab containers show one of several pages, with a bar of tab buttons to switch between them. Each page is a container.TabItem: a title, an optional icon, and the content to show.

Container	Use it for
`container.AppTabs`	The main areas of your app, such as Home, Documents and Settings. A fixed set.
`container.DocTabs`	Open documents. Each tab has a close button, and the bar can have a button to add a tab.

AppTabs

tabs := container.NewAppTabs(
	container.NewTabItemWithIcon("Home", theme.HomeIcon(), widget.NewLabel("Welcome")),
	container.NewTabItem("Documents", docs),
	container.NewTabItemWithIcon("Settings", theme.SettingsIcon(), widget.NewLabel("Settings")),
)
tabs.SetTabLocation(container.TabLocationLeading)
tabs.OnSelected = func(item *container.TabItem) {
	w.SetTitle("Tabs - " + item.Text)
}

container.NewTabItem(text, content) and container.NewTabItemWithIcon(text, icon, content) create the pages.
SetTabLocation moves the tab bar: container.TabLocationTop (the default), TabLocationBottom, or one of the sides with TabLocationLeading and TabLocationTrailing.
OnSelected and OnUnselected are called when the current tab changes.

To change tabs from code, use Select(item) or SelectIndex(i); Selected() and SelectedIndex() tell you which one is showing. Append, Remove, RemoveIndex and SetItems change the list of tabs. DisableIndex(i) and DisableItem(item) grey out a tab so it cannot be chosen, and EnableIndex and EnableItem undo that.

On mobile devices, the tab bar does not go along a long edge of the screen. In portrait, TabLocationLeading becomes TabLocationTop and TabLocationTrailing becomes TabLocationBottom. In landscape, top becomes leading and bottom becomes trailing.

DocTabs

docs := container.NewDocTabs(
	container.NewTabItem("untitled-1", widget.NewMultiLineEntry()),
)
n := 1
// Setting CreateTab adds a "+" button to the tab bar.
docs.CreateTab = func() *container.TabItem {
	n++
	return container.NewTabItem(fmt.Sprintf("untitled-%d", n), widget.NewMultiLineEntry())
}
docs.OnClosed = func(item *container.TabItem) {
	fmt.Println("closed", item.Text)
}

DocTabs has the same methods as AppTabs, plus:

CreateTab: when set, a + button appears in the tab bar. Your function returns the new item; the container appends it and selects it. Return nil to add nothing.
OnClosed: called after the user closes a tab and it has been removed.
CloseIntercept: when set, closing a tab calls this function instead. The tab stays open until you call Remove(item) yourself, and OnClosed is not called. Use it to ask about unsaved changes before closing.

The whole program

The example puts a DocTabs inside one page of an AppTabs.

// App tabs for top-level navigation, with document tabs the user can open
// and close inside one of them.
package main

import (
	"fmt"

	"github.com/belluikit/bellui"
	"github.com/belluikit/bellui/app"
	"github.com/belluikit/bellui/container"
	"github.com/belluikit/bellui/geo"
	"github.com/belluikit/bellui/theme"
	"github.com/belluikit/bellui/widget"
)

func main() {
	a := app.NewWithID("com.example.tabs")
	w := a.NewWindow("Tabs")

	docs := container.NewDocTabs(
		container.NewTabItem("untitled-1", widget.NewMultiLineEntry()),
	)
	n := 1
	// Setting CreateTab adds a "+" button to the tab bar.
	docs.CreateTab = func() *container.TabItem {
		n++
		return container.NewTabItem(fmt.Sprintf("untitled-%d", n), widget.NewMultiLineEntry())
	}
	docs.OnClosed = func(item *container.TabItem) {
		fmt.Println("closed", item.Text)
	}

	tabs := container.NewAppTabs(
		container.NewTabItemWithIcon("Home", theme.HomeIcon(), widget.NewLabel("Welcome")),
		container.NewTabItem("Documents", docs),
		container.NewTabItemWithIcon("Settings", theme.SettingsIcon(), widget.NewLabel("Settings")),
	)
	tabs.SetTabLocation(container.TabLocationLeading)
	tabs.OnSelected = func(item *container.TabItem) {
		w.SetTitle("Tabs - " + item.Text)
	}

	w.SetContent(tabs)
	w.Resize(geo.NewSize(640, 420))
	bellui.ShowAndRun(w)
}

Split containers Responsive layouts