开发预览更新于 2026-05-10

Toolbar 工具栏

水平按钮组容器，支持分隔符、垂直方向、3 档尺寸。

基础用法

CfToolbar 是按钮组的语义容器，CfToolbarSeparator 在按钮之间画一条细线。 role="toolbar" 自动注入。

背景

<script setup lang="ts">
import { CfToolbar, CfToolbarSeparator, CfIconButton, CfButton } from '@chufix-design/vue';
</script>

<template>
  <CfToolbar>
    <CfIconButton aria-label="撤销">↶</CfIconButton>
    <CfIconButton aria-label="重做">↷</CfIconButton>
    <CfToolbarSeparator />
    <CfButton variant="ghost" size="sm">Duplicate</CfButton>
    <CfButton variant="ghost" size="sm">Delete</CfButton>
  </CfToolbar>
</template>

<script setup>
import { CfToolbar, CfToolbarSeparator, CfIconButton, CfButton } from '@chufix-design/vue';
</script>

<template>
  <CfToolbar>
    <CfIconButton aria-label="撤销">↶</CfIconButton>
    <CfIconButton aria-label="重做">↷</CfIconButton>
    <CfToolbarSeparator />
    <CfButton variant="ghost" size="sm">Duplicate</CfButton>
    <CfButton variant="ghost" size="sm">Delete</CfButton>
  </CfToolbar>
</template>

<CfToolbar>
<CfIconButton aria-label="撤销">↶</CfIconButton>
<CfIconButton aria-label="重做">↷</CfIconButton>
<CfToolbarSeparator />
<CfButton variant="ghost" size="sm">Duplicate</CfButton>
<CfButton variant="ghost" size="sm">Delete</CfButton>
</CfToolbar>

<CfToolbar>
<CfIconButton aria-label="撤销">↶</CfIconButton>
<CfIconButton aria-label="重做">↷</CfIconButton>
<CfToolbarSeparator />
<CfButton variant="ghost" size="sm">Duplicate</CfButton>
<CfButton variant="ghost" size="sm">Delete</CfButton>
</CfToolbar>

方向与变体

orientation="vertical" 垂直堆叠；variant="plain" 取消背景与边框，作为纯按钮组使用。

背景

<script setup lang="ts">
import { CfToolbar, CfToolbarSeparator, CfIconButton } from '@chufix-design/vue';
const star = `<svg viewBox="0 0 16 16" fill="none"><path d="M8 2l1.9 4 4.4.4-3.3 3 .9 4.3L8 11.5 4.1 13.7l.9-4.3-3.3-3 4.4-.4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>`;
</script>

<template>
  <div class="demo-row" style="align-items: flex-start; gap: 16px;">
    <CfToolbar orientation="vertical">
      <CfIconButton aria-label="项目 1"><span v-html="star" style="display: contents;"/></CfIconButton>
      <CfIconButton aria-label="项目 2"><span v-html="star" style="display: contents;"/></CfIconButton>
      <CfToolbarSeparator />
      <CfIconButton aria-label="项目 3"><span v-html="star" style="display: contents;"/></CfIconButton>
    </CfToolbar>
    <CfToolbar variant="plain">
      <CfIconButton aria-label="撤销">↶</CfIconButton>
      <CfIconButton aria-label="重做">↷</CfIconButton>
      <CfToolbarSeparator />
      <CfIconButton aria-label="更多">⋯</CfIconButton>
    </CfToolbar>
  </div>
</template>

<script setup>
import { CfToolbar, CfToolbarSeparator, CfIconButton } from '@chufix-design/vue';
const star = `<svg viewBox="0 0 16 16" fill="none"><path d="M8 2l1.9 4 4.4.4-3.3 3 .9 4.3L8 11.5 4.1 13.7l.9-4.3-3.3-3 4.4-.4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>`;
</script>

<template>
  <div class="demo-row" style="align-items: flex-start; gap: 16px;">
    <CfToolbar orientation="vertical">
      <CfIconButton aria-label="项目 1"><span v-html="star" style="display: contents;"/></CfIconButton>
      <CfIconButton aria-label="项目 2"><span v-html="star" style="display: contents;"/></CfIconButton>
      <CfToolbarSeparator />
      <CfIconButton aria-label="项目 3"><span v-html="star" style="display: contents;"/></CfIconButton>
    </CfToolbar>
    <CfToolbar variant="plain">
      <CfIconButton aria-label="撤销">↶</CfIconButton>
      <CfIconButton aria-label="重做">↷</CfIconButton>
      <CfToolbarSeparator />
      <CfIconButton aria-label="更多">⋯</CfIconButton>
    </CfToolbar>
  </div>
</template>

<CfToolbar orientation="vertical">…</CfToolbar>
<CfToolbar variant="plain">…</CfToolbar>

<CfToolbar orientation="vertical">…</CfToolbar>
<CfToolbar variant="plain">…</CfToolbar>

API

CfToolbar

属性	类型	默认值	说明
`variant`	`'default' \| 'plain'`	`'default'`	`plain` 取消背景与边框
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	内边距与间距
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	方向

CfToolbarSeparator

不接受属性，根据父 toolbar 的 orientation 自动横竖切换。