Preview Updated 2026-05-10

Status bar

Editor footer bar. Three slots (left / center / right) with 6 semantic tones.

Basic usage

Pass items as arrays via leftItems / centerItems / rightItems, or override with named slots (Vue: #left/#center/#right) / slot props (React: leftSlot/centerSlot/rightSlot). The whole bar can be tinted via tone (e.g. error); individual items can also set their own tone.

背景

编辑器主区

src/App.vue

<script setup lang="ts">
import { CfStatusBar } from '@chufix-design/vue';
const left = [
  { id: 'branch', label: '⎇ main' },
  { id: 'sync', label: '↑ 0 ↓ 0' },
  { id: 'errors', label: '✗ 0', tone: 'error' as const },
  { id: 'warnings', label: '⚠ 3', tone: 'warning' as const },
];
const center = [
  { id: 'cursor', label: 'Ln 142, Col 18' },
  { id: 'indent', label: 'Spaces: 2' },
  { id: 'eol', label: 'LF' },
  { id: 'lang', label: 'TypeScript' },
];
const right = [
  { id: 'live', label: '● Live' },
];
</script>
<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <div style="height: 80px; background: var(--bg-inset); display: flex; align-items: center; justify-content: center; color: var(--fg-3);">编辑器主区</div>
    <CfStatusBar :left-items="left" :center-items="center" :right-items="right" />
  </div>
</template>

<script setup>
import { CfStatusBar } from '@chufix-design/vue';
const left = [
  { id: 'branch', label: '⎇ main' },
  { id: 'sync', label: '↑ 0 ↓ 0' },
  { id: 'errors', label: '✗ 0', tone: 'error' },
  { id: 'warnings', label: '⚠ 3', tone: 'warning' },
];
const center = [
  { id: 'cursor', label: 'Ln 142, Col 18' },
  { id: 'indent', label: 'Spaces: 2' },
  { id: 'eol', label: 'LF' },
  { id: 'lang', label: 'TypeScript' },
];
const right = [
  { id: 'live', label: '● Live' },
];
</script>
<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <div style="height: 80px; background: var(--bg-inset); display: flex; align-items: center; justify-content: center; color: var(--fg-3);">编辑器主区</div>
    <CfStatusBar :left-items="left" :center-items="center" :right-items="right" />
  </div>
</template>

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

export default function Demo() {
  const left = [
    { id: 'branch', label: '⎇ main' },
    { id: 'sync', label: '↑ 0 ↓ 0' },
    { id: 'errors', label: '✗ 0', tone: 'error' as const },
    { id: 'warnings', label: '⚠ 3', tone: 'warning' as const },
  ];
  const center = [
    { id: 'cursor', label: 'Ln 142, Col 18' },
    { id: 'indent', label: 'Spaces: 2' },
    { id: 'eol', label: 'LF' },
    { id: 'lang', label: 'TypeScript' },
  ];
  const right = [
    { id: 'live', label: '● Live' },
  ];
  return (
    <>
      <CfStatusBar leftItems={left} centerItems={center} rightItems={right} />
    </>
  );
}

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

export default function Demo() {
  const left = [
    { id: 'branch', label: '⎇ main' },
    { id: 'sync', label: '↑ 0 ↓ 0' },
    { id: 'errors', label: '✗ 0', tone: 'error' },
    { id: 'warnings', label: '⚠ 3', tone: 'warning' },
  ];
  const center = [
    { id: 'cursor', label: 'Ln 142, Col 18' },
    { id: 'indent', label: 'Spaces: 2' },
    { id: 'eol', label: 'LF' },
    { id: 'lang', label: 'TypeScript' },
  ];
  const right = [
    { id: 'live', label: '● Live' },
  ];
  return (
    <>
      <CfStatusBar leftItems={left} centerItems={center} rightItems={right} />
    </>
  );
}

Tones

tone tints the whole bar. For example, error turns the bar red to indicate a build failure.

背景

src/App.vue

<script setup lang="ts">
import { CfStatusBar } from '@chufix-design/vue';
const tones = ['default', 'accent', 'success', 'warning', 'error', 'info'] as const;
const items = [
  { id: '1', label: '⎇ main' },
  { id: '2', label: 'TypeScript' },
  { id: '3', label: 'UTF-8' },
];
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 4px;">
    <div v-for="t in tones" :key="t" style="border: 1px solid var(--line-1); border-radius: var(--r-4); overflow: hidden;">
      <CfStatusBar :tone="t" :left-items="items" :right-items="[{ id: '0', label: t }]" />
    </div>
  </div>
</template>

<script setup>
import { CfStatusBar } from '@chufix-design/vue';
const tones = ['default', 'accent', 'success', 'warning', 'error', 'info'];
const items = [
  { id: '1', label: '⎇ main' },
  { id: '2', label: 'TypeScript' },
  { id: '3', label: 'UTF-8' },
];
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 4px;">
    <div v-for="t in tones" :key="t" style="border: 1px solid var(--line-1); border-radius: var(--r-4); overflow: hidden;">
      <CfStatusBar :tone="t" :left-items="items" :right-items="[{ id: '0', label: t }]" />
    </div>
  </div>
</template>

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

export default function Demo() {
  const items = [
    { id: '1', label: '⎇ main' },
    { id: '2', label: 'TypeScript' },
    { id: '3', label: 'UTF-8' },
  ];
  return (
    <>
      <CfStatusBar tone="error" leftItems={items} />
    </>
  );
}

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

export default function Demo() {
  const items = [
    { id: '1', label: '⎇ main' },
    { id: '2', label: 'TypeScript' },
    { id: '3', label: 'UTF-8' },
  ];
  return (
    <>
      <CfStatusBar tone="error" leftItems={items} />
    </>
  );
}

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md'`	`'md'`	20 / 24 px height
`tone`	`'default' \| 'accent' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Whole-bar tint
`leftItems` / `centerItems` / `rightItems`	`StatusBarItem[]`	`[]`

StatusBarItem: { id, label, tone?, shortcut?, disabled? }.

Events: item-click(id, item).