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

SplitButton 分裂按钮

主按钮 + 下拉箭头复合，用于一组相关动作。

基础用法

主按钮触发 click，箭头打开下拉，下拉项触发 select(value, item)。

背景视口

src/App.vue

<script setup lang="ts">
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save', value: 'save' },
  { label: 'Save as draft', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>
<template>
  <div class="demo-row">
    <CfSplitButton :items="items" @click="alert('Save')" @select="(v) => alert(`Picked: ${v}`)">
      Save
    </CfSplitButton>
    <CfSplitButton variant="secondary" :items="items">More</CfSplitButton>
    <CfSplitButton variant="danger" :items="[{label: '永久删除', value: 'delete', danger: true}]">Delete</CfSplitButton>
  </div>
</template>

<script setup>
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save', value: 'save' },
  { label: 'Save', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>
<template>
  <div class="demo-row">
    <CfSplitButton :items="items" @click="alert('Save')" @select="(v) => alert(`Picked: ${v}`)">
      Save
    </CfSplitButton>
    <CfSplitButton variant="secondary" :items="items">More</CfSplitButton>
    <CfSplitButton variant="danger" :items="[{label: '永久删除', value: 'delete', danger: true}]">Delete</CfSplitButton>
  </div>
</template>

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

export default function Demo() {
  const items = [
    { label: 'Save', value: 'save' },
    { label: 'Save as draft', value: 'draft' },
    { label: 'Save and publish', value: 'publish' },
  ];
  return (
    <>
      <div className="demo-row">
          <CfSplitButton items={items} onClick={() => alert('Save')} onSelect={(v) => alert(`Picked: ${v}`)}>
            Save
          </CfSplitButton>
          <CfSplitButton variant="secondary" items={items}>More</CfSplitButton>
          <CfSplitButton variant="danger" items={[{label: '永久删除', value: 'delete', danger: true}]}>Delete</CfSplitButton>
        </div>
    </>
  );
}

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

export default function Demo() {
  const items = [
    { label: 'Save', value: 'save' },
    { label: 'Save', value: 'draft' },
    { label: 'Save and publish', value: 'publish' },
  ];
  return (
    <>
      <div className="demo-row">
          <CfSplitButton items={items} onClick={() => alert('Save')} onSelect={(v) => alert(`Picked: ${v}`)}>
            Save
          </CfSplitButton>
          <CfSplitButton variant="secondary" items={items}>More</CfSplitButton>
          <CfSplitButton variant="danger" items={[{label: '永久删除', value: 'delete', danger: true}]}>Delete</CfSplitButton>
        </div>
    </>
  );
}

尺寸

3 档尺寸跟着 --control-h token 变化。

背景视口

src/App.vue

<script setup lang="ts">
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save as draft', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 12px;">
    <CfSplitButton size="sm" :items="items">Small</CfSplitButton>
    <CfSplitButton size="md" :items="items">Medium</CfSplitButton>
    <CfSplitButton size="lg" :items="items">Large</CfSplitButton>
  </div>
</template>

<script setup>
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 12px;">
    <CfSplitButton size="sm" :items="items">Small</CfSplitButton>
    <CfSplitButton size="md" :items="items">Medium</CfSplitButton>
    <CfSplitButton size="lg" :items="items">Large</CfSplitButton>
  </div>
</template>

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

export default function Demo() {
  const items = [
    { label: 'Save as draft', value: 'draft' },
    { label: 'Save and publish', value: 'publish' },
  ];
  return (
    <>
      <CfSplitButton size="sm" items={items}>Small</CfSplitButton>
      <CfSplitButton size="md" items={items}>Medium</CfSplitButton>
      <CfSplitButton size="lg" items={items}>Large</CfSplitButton>
    </>
  );
}

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

export default function Demo() {
  const items = [
    { label: 'Save', value: 'draft' },
    { label: 'Save and publish', value: 'publish' },
  ];
  return (
    <>
      <CfSplitButton size="sm" items={items}>Small</CfSplitButton>
      <CfSplitButton size="md" items={items}>Medium</CfSplitButton>
      <CfSplitButton size="lg" items={items}>Large</CfSplitButton>
    </>
  );
}

API

属性	类型	默认值	说明
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'ghost' \| 'danger'`	`'primary'`	复用 Button variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`items`	`SplitButtonItem[]`	—	下拉项 `{ label, value, disabled?, danger? }`
`disabled` / `loading`	`boolean`	`false`

事件：click（主按钮）、select(value, item)（下拉项）。