▚TabSelect

1import { TabSelectRenderable, TabSelectRenderableEvents, createCliRenderer } from "@opentui/core"
2
3const renderer = await createCliRenderer()
4
5const tabs = new TabSelectRenderable(renderer, {
6id: "tabs",
7width: 60,
8options: [
9  { name: "Home", description: "Dashboard and overview" },
10  { name: "Files", description: "File management" },
11  { name: "Settings", description: "Application settings" },
12],
13tabWidth: 20,
14})
15
16tabs.on(TabSelectRenderableEvents.ITEM_SELECTED, (index, option) => {
17console.log("Tab:", option.name)
18})
19
20tabs.focus()
21renderer.root.add(tabs)

1import { TabSelect, createCliRenderer } from "@opentui/core"
2
3const renderer = await createCliRenderer()
4
5const tabs = TabSelect({
6width: 60,
7tabWidth: 15,
8options: [
9  { name: "Tab 1", description: "First tab" },
10  { name: "Tab 2", description: "Second tab" },
11  { name: "Tab 3", description: "Third tab" },
12],
13})
14
15tabs.focus()
16renderer.root.add(tabs)

1const container = Box({
2width: 60,
3height: 20,
4borderStyle: "rounded",
5})
6
7const tabs = TabSelect({
8width: 60,
9tabWidth: 20,
10options: [
11  { name: "Home", description: "Dashboard" },
12  { name: "Files", description: "Browse files" },
13  { name: "Settings", description: "Preferences" },
14],
15})
16
17tabs.on("itemSelected", (index, option) => {
18if (currentPanel) contentArea.remove(currentPanel)
19currentPanel = panels[option.name]
20contentArea.add(currentPanel)
21})
22
23container.add(tabs)
24container.add(contentArea)
25tabs.focus()
26renderer.root.add(container)