TabSelect

带有描述和滚动支持的水平标签式选择组件。组件必须获得焦点才能接收键盘输入。

基本用法

Renderable API

import { TabSelectRenderable, TabSelectRenderableEvents, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

const tabs = new TabSelectRenderable(renderer, {
  id: "tabs",
  width: 60,
  options: [
    { name: "Home", description: "Dashboard and overview" },
    { name: "Files", description: "File management" },
    { name: "Settings", description: "Application settings" },
  ],
  tabWidth: 20,
})

tabs.on(TabSelectRenderableEvents.ITEM_SELECTED, (index, option) => {
  console.log("Tab selected:", option.name)
})

tabs.focus()
renderer.root.add(tabs)

Construct API

import { TabSelect, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

const tabs = TabSelect({
  width: 60,
  tabWidth: 15,
  options: [
    { name: "Tab 1", description: "First tab" },
    { name: "Tab 2", description: "Second tab" },
    { name: "Tab 3", description: "Third tab" },
  ],
})

tabs.focus()
renderer.root.add(tabs)

键盘导航

当获得焦点时，TabSelect 响应以下按键：

按键	操作
`Left` / `[`	移动到上一个标签
`Right` / `]`	移动到下一个标签
`Enter`	选择当前标签

事件

选项选中

当用户在某个标签上按下 Enter 时触发：

import { TabSelectRenderableEvents, type TabSelectOption } from "@opentui/core"

tabs.on(TabSelectRenderableEvents.ITEM_SELECTED, (index: number, option: TabSelectOption) => {
  console.log(`Selected tab ${index}: ${option.name}`)
  // Switch to the corresponding panel
})

选择变更

当高亮标签发生变化时触发：

import { TabSelectRenderableEvents, type TabSelectOption } from "@opentui/core"

tabs.on(TabSelectRenderableEvents.SELECTION_CHANGED, (index: number, option: TabSelectOption) => {
  console.log(`Hovering: ${option.name}`)
})

属性

属性	类型	默认值	描述
`width`	`number`	-	组件总宽度
`options`	`TabSelectOption[]`	`[]`	可用标签
`tabWidth`	`number`	`20`	每个标签的宽度
`backgroundColor`	`string \| RGBA`	`transparent`	背景颜色
`textColor`	`string \| RGBA`	`#FFFFFF`	普通标签文本颜色
`focusedBackgroundColor`	`string \| RGBA`	`#1a1a1a`	聚焦时的背景颜色
`focusedTextColor`	`string \| RGBA`	`#FFFFFF`	聚焦时的文本颜色
`selectedBackgroundColor`	`string \| RGBA`	`#334455`	选中标签的背景颜色
`selectedTextColor`	`string \| RGBA`	`#FFFF00`	选中标签的文本颜色
`selectedDescriptionColor`	`string \| RGBA`	`#CCCCCC`	描述文本颜色
`showScrollArrows`	`boolean`	`true`	显示滚动指示器
`showDescription`	`boolean`	`true`	显示标签描述
`showUnderline`	`boolean`	`true`	在选中标签上显示下划线
`wrapSelection`	`boolean`	`false`	导航时循环选择
`keyBindings`	`TabSelectKeyBinding[]`	-	自定义按键绑定
`keyAliasMap`	`Record<string, string>`	-	按键别名映射

示例：标签页界面

import { Box, Text, TabSelect, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

// Create content panels
const panels = {
  home: Box({ padding: 1 }, Text({ content: "Home content here" })),
  files: Box({ padding: 1 }, Text({ content: "File browser here" })),
  settings: Box({ padding: 1 }, Text({ content: "Settings form here" })),
}

// Create the tabbed container
const container = Box({
  width: 60,
  height: 20,
  borderStyle: "rounded",
})

const tabs = TabSelect({
  width: 60,
  tabWidth: 20,
  options: [
    { name: "Home", description: "Dashboard" },
    { name: "Files", description: "Browse files" },
    { name: "Settings", description: "Preferences" },
  ],
})

// Content area
let currentPanel = panels.home
const contentArea = Box({
  flexGrow: 1,
  padding: 1,
})
contentArea.add(currentPanel)

// Handle tab changes
tabs.on("itemSelected", (index, option) => {
  // Remove current panel
  if (currentPanel) {
    contentArea.remove(currentPanel.id)
  }
  // Add new panel based on selection
  switch (option.name) {
    case "Home":
      currentPanel = panels.home
      break
    case "Files":
      currentPanel = panels.files
      break
    case "Settings":
      currentPanel = panels.settings
      break
  }
  contentArea.add(currentPanel)
})

container.add(tabs)
container.add(contentArea)

tabs.focus()
renderer.root.add(container)

编程控制

// Get current tab index
const currentIndex = tabs.getSelectedIndex()

// Set tab programmatically
tabs.setSelectedIndex(1)

// Update tabs dynamically
tabs.setOptions([
  { name: "New Tab 1", description: "Updated" },
  { name: "New Tab 2", description: "Also updated" },
])

滚动行为

当标签数量超出组件宽度时，组件会在你使用键盘导航时自动处理水平滚动。