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

<script setup lang="ts">
import { CfTerminalPane, CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[32m✓\x1b[0m build succeeded\n\x1b[33m⚠\x1b[0m  warning: 3 unused exports\n\x1b[36m→\x1b[0m running tests…\n';
</script>
<template>
  <div style="height: 280px;">
    <CfTerminalPane>
      <template #panel-terminal><p style="color: var(--fg-2);">完整终端面板槽，可对接 xterm.js。</p></template>
      <template #panel-output>
        <CfAnsiText :text="sample" />
      </template>
      <template #panel-commandline><p style="color: var(--fg-2);">命令输入行 + 历史。</p></template>
    </CfTerminalPane>
  </div>
</template>

<script setup>
import { CfTerminalPane, CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[32m✓\x1b[0m build succeeded\n\x1b[33m⚠\x1b[0m  warning: 3 unused exports\n\x1b[36m→\x1b[0m running tests…\n';
</script>
<template>
  <div style="height: 280px;">
    <CfTerminalPane>
      <template #panel-terminal><p style="color: var(--fg-2);">完整终端面板槽，可对接 xterm.js。</p></template>
      <template #panel-output>
        <CfAnsiText :text="sample" />
      </template>
      <template #panel-commandline><p style="color: var(--fg-2);">命令输入行 + 历史。</p></template>
    </CfTerminalPane>
  </div>
</template>

import { CfTerminalPane } from '@chufix-design/react';

export default function Demo() {
  const sample = '\x1b[32m✓\x1b[0m build succeeded\n\x1b[33m⚠\x1b[0m  warning: 3 unused exports\n\x1b[36m→\x1b[0m running tests…\n';
  return (
    <>
      <div style={{ height: 280 }}>
          <CfTerminalPane>
            <p style={{ color: "var(--fg-2)" }}>完整终端面板槽，可对接 xterm.js。</p>
    </>
  );
}

import { CfTerminalPane } from '@chufix-design/react';

export default function Demo() {
  const sample = '\x1b[32m✓\x1b[0m build succeeded\n\x1b[33m⚠\x1b[0m  warning: 3 unused exports\n\x1b[36m→\x1b[0m running tests…\n';
  return (
    <>
      <div style={{ height: 280 }}>
          <CfTerminalPane>
            <p style={{ color: "var(--fg-2)" }}>完整终端面板槽，可对接 xterm.js。</p>
    </>
  );
}

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.