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

SplitButton 分裂按钮

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

基础用法

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

<CfSplitButton :items="items" @click="save" @select="onPick">
Save
</CfSplitButton>

<CfSplitButton items={items} onClick={save} onSelect={(v) => onPick(v)}>
Save
</CfSplitButton>

尺寸

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

<CfSplitButton size="sm" :items="items">Small</CfSplitButton>
<CfSplitButton size="md" :items="items">Medium</CfSplitButton>
<CfSplitButton size="lg" :items="items">Large</CfSplitButton>

<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)（下拉项）。