Preview Updated 2026-05-10

Terminal pane

Terminal pane shell with three tabs — Terminal / Output / Command line.

Basic usage

Three predefined tabs (ids: terminal, output, commandline). Each tab body is provided by the consumer through named slots #panel-{tabId} (Vue) / slots["panel-{tabId}"] (React). The default list can be replaced via the tabs prop.

Source: terminal.html.

完整终端面板槽，可对接 xterm.js。

src/App.vue vue

<CfTerminalPane>
<template #panel-terminal>...</template>
<template #panel-output>...</template>
</CfTerminalPane>

src/App.tsx tsx

<CfTerminalPane slots={{
'panel-terminal': <PanelA />,
'panel-output': <PanelB />,
}} />

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	first tab id	Active tab
`tabs`	`TemplatePaneTab[]`	preset	Custom tab list
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

The preset tab id lists are exported as PROTOCOL_TABS / NETWORK_TABS / SQL_TABS constants — drop them straight into a custom tabs.

Template components are essentially semantic wrappers around CfTabs. If you don’t need a predefined tab set, use CfTabs directly.