# @kne/button-group
> 实现了一个按钮组,loading按钮,确认按钮和加载按钮.
Latest version **0.1.41** (published 2026-08-18) · ISC license · 0 weekly downloads
## Install
```sh
npm install @kne/button-group
pnpm add @kne/button-group
yarn add @kne/button-group
bun add @kne/button-group
```
## Health
**Score 65/100 (B)** — status: active.
Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads; no types; pre 1.0.
## Facts
| | |
|---|---|
| Version | 0.1.41 |
| Published | 2026-08-18 |
| First published | 2024-10-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 184 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 0 |
| Author | linzp |
| Maintainers | lingtong, yangwang123456, juliewang, metacoo |
## Links
- npm: https://www.npmjs.com/package/@kne/button-group
- Repository: https://github.com/kne-union/button-group
- Issues: https://github.com/kne-union/button-group/issues
- npm.io page: https://npm.io/package/@kne/button-group
## Dependencies (8)
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [@kne/react-intl](https://npm.io/package/@kne/react-intl.md) ^0.1.12
- [@kne/react-fetch](https://npm.io/package/@kne/react-fetch.md) ^1.5.4
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^5.5.1
- [@kne/overflow-items](https://npm.io/package/@kne/overflow-items.md) ^0.1.0
- [@kne/responsive-utils](https://npm.io/package/@kne/responsive-utils.md) ^0.1.13
- [@kne/use-ref-callback](https://npm.io/package/@kne/use-ref-callback.md) ^0.1.2
## Recent versions
- 0.1.41 (latest) — 2026-08-18
- 0.1.40 — 2026-08-14
- 0.1.39 — 2026-08-06
- 0.1.34 — 2026-08-06
- 0.1.33 — 2026-08-05
- 0.1.30 — 2026-08-04
- 0.1.29 — 2026-08-04
- 0.1.28 — 2026-07-30
- 0.1.26 — 2026-07-24
- 0.1.25 — 2026-07-16
- 0.1.24 — 2026-03-17
- 0.1.23 — 2026-02-12
- 0.1.22 — 2026-02-12
- 0.1.21 — 2025-12-26
- 0.1.20 — 2025-12-26
- … 20 more at https://npm.io/package/@kne/button-group/versions
## README
# button-group
### 描述
实现了一个按钮组,loading按钮,确认按钮和加载按钮.
### 安装
```shell
npm i --save @kne/button-group
```
### 概述
@kne/button-group 是一个 React 按钮组件库，提供了一系列功能丰富的按钮组件，用于简化常见的按钮交互场景。该库专注于提供自适应布局、加载状态管理、确认操作和数据请求等功能，使开发者能够快速实现各种复杂的按钮交互需求。
### ButtonGroup
自适应按钮组组件，能够根据容器宽度自动调整显示的按钮数量。当容器宽度不足以显示所有按钮时，会自动将多余的按钮放入下拉菜单中，确保界面布局美观且功能完整。
**主要特性：**
- 自动适应容器宽度
- 支持紧凑模式（Space.Compact）
- 支持链接样式（适用于表格操作列）
- 可指定显示的按钮数量
- 支持 `place` 在满宽容器内九点定位（不占用下拉 `placement`）
- 支持禁用、隐藏状态
- 支持自定义按钮渲染
- 支持禁用按钮的工具提示
**适用场景：**
- 操作栏、工具栏
- 表格操作列
- 面板标题栏
- 任何需要自适应按钮布局的场景
### LoadingButton
封装了加载状态的按钮组件，简化了异步操作的处理。通过内置的状态管理，在异步操作执行期间自动显示加载状态，提升用户体验。同时提供了 useLoading hook，方便在其他组件中复用加载状态管理逻辑。
**主要特性：**
- 自动管理加载状态
- 支持自定义加载文案
- 自动处理错误情况
- 支持 loading 属性手动控制
- 提供的 useLoading Hook 可在其他组件使用
**适用场景：**
- 表单提交按钮
- 数据导出按钮
- 任何需要异步操作的按钮
- 非按钮组件的异步状态管理
### ConfirmButton
带有确认功能的按钮组件，支持弹窗确认（Popconfirm）和模态框确认（Modal）两种模式。适用于需要用户二次确认的操作，如删除、提交等重要操作。同时提供了 ConfirmLink 和 ConfirmText 变体，以及 withConfirm 高阶组件，满足不同场景的确认需求。
**主要特性：**
- 支持 Popconfirm 和 Modal 两种确认模式
- 支持危险操作样式（红色按钮）
- 可自定义确认和取消按钮文案
- 提供 ConfirmLink 和 ConfirmText 变体
- 确认时自动显示加载状态
**适用场景：**
- 删除操作
- 数据提交
- 审核操作
- 表格行操作（使用 ConfirmLink/ConfirmText）
- 任何需要用户二次确认的操作
### FetchButton
集成了数据请求功能的按钮组件，基于 @kne/react-fetch 库实现。可以直接处理 API 请求，并在请求过程中自动管理加载状态，简化了数据交互的实现。
**主要特性：**
- 自动管理请求加载状态
- 支持请求成功/失败回调
- 支持参数传递
- 支持请求拦截（beforeFetch）
- 基于 @kne/react-fetch 实现
**适用场景：**
- 数据刷新按钮
- 文件导出按钮
- API 请求按钮
- 任何按钮触发的数据请求场景
### ButtonFooter
页面底部按钮区域组件，可以自动计算高度并设置 CSS 变量，方便页面布局和样式调整。在小屏幕下，会自动将内容渲染到 body，确保按钮始终可见；可通过 `placement` 控制移动端固定条的垂直位置与内容水平对齐。
**主要特性：**
- 自动计算高度并设置 CSS 变量
- 响应式设计，小屏幕下固定到顶部/底部
- 支持 `placement` 控制垂直位置与水平对齐
- 支持多种布局方式（居中、左右分布等）
- 适用于表单页面的底部操作区
**适用场景：**
- 表单页面底部操作按钮
- 详情页面底部操作按钮
- 对话框底部按钮
- 任何需要固定在顶部/底部的操作按钮区域
## 组件关系
```
ButtonGroup (自适应布局)
├── LoadingButton (加载状态)
├── ConfirmButton (确认功能)
│ ├── ConfirmLink (链接变体)
│ └── ConfirmText (文本变体)
└── FetchButton (数据请求)
└── 基于 LoadingButton
ButtonFooter (底部固定区域)
```
## 设计理念
该组件库的设计理念是通过封装常见的按钮交互模式，提供开箱即用的解决方案，同时保持足够的灵活性和可扩展性：
1. **关注点分离**：每个组件专注于解决特定的问题，如 ButtonGroup 专注于布局，LoadingButton 专注于状态管理。
2. **组合优于继承**：通过组合不同的功能组件，可以实现复杂的交互需求，如 FetchButton 就是 LoadingButton 与数据请求功能的组合。
3. **声明式 API**：提供简洁明了的 API，使开发者能够以声明式的方式描述 UI 和交互行为。
4. **渐进式增强**：基础组件可以独立使用，也可以与其他组件组合使用，实现更复杂的功能。
5. **用户体验优先**：注重细节，如自适应布局、加载状态反馈等，提升最终用户的使用体验。
## 特性总结
- **自适应布局**：根据容器宽度自动调整按钮显示方式
- **加载状态管理**：简化异步操作的加载状态处理
- **操作确认**：提供多种确认模式，增强用户操作安全性
- **数据请求集成**：简化按钮与后端 API 的交互
- **国际化支持**：内置中英文语言包
- **高度可定制**：组件提供丰富的配置选项
- **响应式设计**：适配不同屏幕尺寸
- **TypeScript 友好**：完整的类型定义
### 示例
#### 示例代码
- ButtonGroup 基础用法
- ButtonGroup 能够根据容器宽度自动调整显示的按钮数量，并将多余的按钮放入下拉菜单中。可通过 place 控制按钮在满宽容器内的九点定位。
- _ButtonGroup(@kne/current-lib_button-group)[import * as _ButtonGroup from "@kne/button-group"],antd(antd)
```jsx
const { default: ButtonGroup } = _ButtonGroup;
const { Flex, Button, Space, Typography, Radio } = antd;
const { useState } = React;
const { Text } = Typography;
// 基础用法 - 自动适应容器宽度
const BasicExample = () => {
const [width, setWidth] = useState(300);
return (
调整容器宽度查看自适应效果
);
};
// 紧凑模式
const CompactExample = () => {
return (
紧凑模式（适用于工具栏）
);
};
// 链接样式 - 更多按钮
const LinkStyleExample = () => {
const [width, setWidth] = useState(200);
return (
链接样式（适用于表格操作栏）
);
};
// 指定显示数量
const FixedLengthExample = () => {
const [showLength, setShowLength] = useState(2);
return (
指定显示按钮数量（showLength）
);
};
// 自定义渲染函数
const CustomRenderExample = () => {
const CustomButton = props => (
);
return (
自定义渲染（支持函数式配置）
(
自定义按钮
),
props => 按钮2,
props => 按钮3,
props => 按钮4
]}
/>
);
};
// 禁用状态与隐藏
const StateExample = () => {
const [disabled, setDisabled] = useState(true);
const [hidden, setHidden] = useState(true);
return (
禁用与隐藏状态
);
};
const PLACE_OPTIONS = [
{ label: 'start', value: 'start' },
{ label: 'center', value: 'center' },
{ label: 'end', value: 'end' },
{ label: 'topStart', value: 'topStart' },
{ label: 'top', value: 'top' },
{ label: 'topEnd', value: 'topEnd' },
{ label: 'bottomStart', value: 'bottomStart' },
{ label: 'bottom', value: 'bottom' },
{ label: 'bottomEnd', value: 'bottomEnd' }
];
// 容器内位置
const PlaceExample = () => {
const [place, setPlace] = useState('end');
const list = [
{ type: 'primary', children: '编辑' },
{ children: '删除', isDelete: true }
];
return (
place：按钮在满宽容器内的九点定位。根节点铺满外部槽位，不占用 placement（下拉位置）。
setPlace(e.target.value)}
/>
);
};
// 工具提示
const TooltipExample = () => {
return (
禁用按钮提示（tooltipProps）
);
};
const BaseExample = () => {
return (
ButtonGroup 自适应按钮组
ButtonGroup 是一个自适应按钮组组件，能够根据容器宽度自动调整显示的按钮数量， 多余的按钮会放入下拉菜单中。适用于操作栏、工具栏、表格操作列等场景。
基础用法
紧凑模式
链接样式
指定显示数量
自定义渲染
禁用与隐藏
禁用提示
);
};
render();
```
- LoadingButton 加载按钮
- LoadingButton 封装了加载状态，简化异步操作的处理。点击按钮时自动显示加载状态，避免重复提交。
- _ButtonGroup(@kne/current-lib_button-group)[import * as _ButtonGroup from "@kne/button-group"],antd(antd)
```jsx
const { LoadingButton, useLoading } = _ButtonGroup;
const { Space, Button, Typography, message, Card, Alert, Flex } = antd;
const { useState } = React;
// 基础用法 - 自动加载状态
const BasicExample = () => {
const handleClick = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('操作成功！');
resolve();
}, 1500);
});
};
return (
点击按钮，自动管理加载状态
保存数据
提交审核
删除
);
};
// 自定义加载文案
const CustomTextExample = () => {
const handleClick = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('上传完成');
resolve();
}, 2000);
});
};
return (
使用函数自定义加载时的文案
{(isLoading) => (isLoading ? '正在上传...' : '上传文件')}
{(isLoading) => (isLoading ? '提交中...' : '提交订单')}
);
};
// 错误处理
const ErrorExample = () => {
const [shouldFail, setShouldFail] = useState(false);
const handleClick = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldFail) {
message.error('操作失败，请重试');
reject(new Error('操作失败'));
} else {
message.success('操作成功');
resolve();
}
}, 1000);
});
};
return (
演示错误处理：加载状态会自动解除
{shouldFail ? '会失败的操作' : '会成功的操作'}
{shouldFail && }
);
};
// 手动控制加载状态
const ManualExample = () => {
const [loading, setLoading] = useState(false);
const handleClick = () => {
setLoading(true);
setTimeout(() => {
setLoading(false);
message.success('手动控制加载完成');
}, 2000);
};
return (
通过 loading 属性手动控制加载状态
手动控制加载
);
};
// useLoading Hook 示例
const UseLoadingExample = () => {
const { isLoading, callback } = useLoading(() => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('Hook 模式操作完成');
resolve();
}, 1500);
});
});
return (
在非按钮组件中使用 useLoading 管理异步状态
{isLoading && (
)}
);
};
// 不同按钮类型
const ButtonTypesExample = () => {
const handleClick = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('完成');
resolve();
}, 1000);
});
};
return (
支持所有 Ant Design Button 类型
Primary
Default
Dashed
Link
Text
Primary Ghost
Default Ghost
);
};
// 图标按钮
const IconExample = () => {
const handleClick = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('操作完成');
resolve();
}, 1200);
});
};
return (
支持图标
⬆️} onClick={handleClick}>
上传
⬇️} onClick={handleClick}>
下载
🗑️} onClick={handleClick}>
删除
);
};
// 实际应用场景 - 表单提交
const FormSubmitExample = () => {
const handleSubmit = async () => {
// 模拟表单验证
await new Promise(resolve => setTimeout(resolve, 500));
// 模拟 API 请求
await new Promise((resolve) => {
setTimeout(() => {
message.success('表单提交成功！');
resolve();
}, 1500);
});
};
return (
点击提交按钮，自动防止重复提交
提交表单
);
};
const BaseExample = () => {
return (
LoadingButton 加载按钮
LoadingButton 封装了加载状态，简化异步操作的处理。点击按钮时自动显示加载状态，
避免重复提交，同时提供 useLoading Hook 供其他组件使用。
基础用法
自定义加载文案
错误处理
手动控制加载状态
useLoading Hook
不同按钮类型
图标按钮
实际应用场景
);
};
render();
```
- ConfirmButton 确认按钮
- ConfirmButton 带有确认功能，支持弹窗确认和模态框确认两种模式。适用于删除、提交等重要操作。
- _ButtonGroup(@kne/current-lib_button-group)[import * as _ButtonGroup from "@kne/button-group"],antd(antd)
```jsx
const { ConfirmButton, ConfirmLink, ConfirmText } = _ButtonGroup;
const { Flex, Space, Typography, message, Card, List, Tag, Button } = antd;
const { useState } = React;
// 基础用法 - Popconfirm 模式
const BasicExample = () => {
const handleDelete = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('删除成功');
resolve();
}, 500);
});
};
return (
Popconfirm 模式（气泡确认框），适用于快速确认
删除
提交
);
};
// Modal 模式
const ModalExample = () => {
const handleSubmit = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('提交成功');
resolve();
}, 500);
});
};
return (
Modal 模式（模态框），适用于重要操作或长内容提示
删除数据
提交审核
);
};
// 危险操作样式
const DangerExample = () => {
const handleDelete = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('已删除');
resolve();
}, 500);
});
};
return (
使用 isDelete 标识危险操作（红色按钮）
普通按钮
删除按钮
删除（Modal）
);
};
// 自定义确认文案
const CustomTextExample = () => {
const handleAction = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('操作完成');
resolve();
}, 500);
});
};
return (
自定义确认和取消按钮文案
自定义文案
Modal 自定义文案
);
};
// ConfirmLink 和 ConfirmText
const LinkAndTextExample = () => {
const handleAction = () => {
message.success('操作成功');
return Promise.resolve();
};
return (
ConfirmLink 和 ConfirmText 变体，适用于表格行操作等场景
(
编辑
,
删除
]}
>
{item.status}}
/>
)}
/>
纯文本确认
|
删除
);
};
// 禁用状态
const DisabledExample = () => {
const [disabled, setDisabled] = useState(true);
const handleDelete = () => {
message.success('已删除');
return Promise.resolve();
};
return (
禁用状态下不会触发确认
删除
删除
);
};
// 实际应用场景 - 表格操作
const TableActionExample = () => {
const handleEdit = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('进入编辑模式');
resolve();
}, 300);
});
};
const handleDelete = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('已删除');
resolve();
}, 300);
});
};
const handleAudit = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success('审核通过');
resolve();
}, 300);
});
};
return (
模拟表格中的操作按钮，包含不同的确认方式
(
编辑
,
审核
,
删除
]}
>
)}
/>
);
};
// 批量操作
const BatchExample = () => {
const [selectedCount, setSelectedCount] = useState(0);
const handleBatchDelete = () => {
return new Promise((resolve) => {
setTimeout(() => {
message.success(`已删除 ${selectedCount} 条数据`);
setSelectedCount(0);
resolve();
}, 500);
});
};
return (
已选择：
{selectedCount} 项
批量删除
{
message.success(`正在导出 ${selectedCount} 条数据`);
return Promise.resolve();
}}
>
导出
);
};
const BaseExample = () => {
return (
ConfirmButton 确认按钮
ConfirmButton 提供确认功能，支持 Popconfirm（气泡确认框）和 Modal（模态框）两种模式。
还提供 ConfirmLink 和 ConfirmText 变体，以及 withConfirm 高阶组件。
Popconfirm 模式
Modal 模式
危险操作样式
自定义文案
Link 和 Text 变体
禁用状态
批量操作
);
};
render();
```
- FetchButton 请求按钮
- FetchButton 集成了数据请求功能，自动管理加载状态和请求流程。适用于按钮触发 API 请求的场景。
- _ButtonGroup(@kne/current-lib_button-group)[import * as _ButtonGroup from "@kne/button-group"],(@kne/current-lib_button-group/dist/index.css),antd(antd)
```jsx
const { FetchButton } = _ButtonGroup;
const { Space, Typography, message, Card, Alert, Form, Input, Select, Button, Flex } = antd;
const { useState } = React;
// 基础用法
const BasicExample = () => {
const handleSuccess = ({ data }) => {
message.success(`获取数据成功: ${data}`);
};
return (
点击按钮触发 API 请求，自动管理加载状态
{
return new Promise((resolve) => {
setTimeout(() => {
resolve({ data: '用户信息数据' });
}, 1500);
});
}
}}
onClick={handleSuccess}
>
获取用户信息
);
};
// 带参数请求
const WithParamsExample = () => {
const [userId, setUserId] = useState('1');
const handleSuccess = ({ data }) => {
message.success(`获取成功: ${JSON.stringify(data)}`);
};
return (
传递参数到 API 请求
{
return new Promise((resolve) => {
setTimeout(() => {
resolve({ data: { userId: params.userId, name: `用户${params.userId}`, role: '管理员' } });
}, 1000);
});
}
}}
onClick={handleSuccess}
>
获取用户详情
);
};
// 成功和失败回调
const CallbackExample = () => {
const [status, setStatus] = useState('');
const [shouldFail, setShouldFail] = useState(false);
const handleSuccess = ({ data }) => {
setStatus('success');
message.success('数据加载成功');
console.log('成功数据:', data);
};
const handleError = (error) => {
setStatus('error');
message.error('数据加载失败');
console.error('错误信息:', error);
};
return (
{
return new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldFail) {
reject(new Error('模拟的请求失败'));
} else {
resolve({ data: { message: '请求成功', timestamp: Date.now() } });
}
}, 1000);
});
}
}}
onSuccess={handleSuccess}
onError={handleError}
>
{shouldFail ? '失败请求' : '成功请求'}
{status === 'success' && }
{status === 'error' && }
);
};
// 导出文件场景
const ExportExample = () => {
const handleExport = ({ data }) => {
message.success(`导出成功: ${data.url}`);
};
return (
模拟文件导出场景
{
return new Promise((resolve) => {
setTimeout(() => {
resolve({ data: { url: '/download/report.xlsx', size: '2.5MB' } });
}, 2000);
});
}
}}
onClick={handleExport}
>
导出报表
{
return new Promise((resolve) => {
setTimeout(() => {
resolve({ data: { url: '/download/data.csv', size: '1.2MB' } });
}, 1500);
});
}
}}
onClick={handleExport}
>
导出 CSV
);
};
// 表单提交场景
const FormSubmitExample = () => {
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
const [submittedData, setSubmittedData] = useState(null);
const handleSubmit = ({ data }) => {
setSubmittedData(data);
message.success('表单提交成功');
};
const onFinish = async () => {
try {
const values = await form.validateFields();
setLoading(true);
// 使用 FetchButton 内部处理，这里只是演示
await new Promise(resolve => setTimeout(resolve, 1000));
setLoading(false);
message.success('验证通过');
} catch (error) {
message.error('请检查表单内容');
}
};
return (
{
return new Promise((resolve) => {
setTimeout(() => {
resolve({ data: { id: 123, ...params, createTime: new Date().toISOString() } });
}, 1500);
});
}
}}
beforeFetch={() => {
const values = form.getFieldsValue();
if (!values.username || !values.email) {
message.error('请填写完整信息');
return false;
}
return true;
}}
onClick={handleSubmit}
>
提交表单
{submittedData && (
)}
);
};
// 刷新数据场景
const RefreshExample = () => {
const [data, setData] = useState(null);
const [lastRefresh, setLastRefresh] = useState(null);
const handleRefresh = ({ data: newData }) => {
console.log(newData);
setData(newData);
setLastRefresh(new Date().toLocaleTimeString());
message.success('数据已更新');
};
return (
上次刷新：
{lastRefresh || '从未刷新'}
{
return new Promise((resolve) => {
setTimeout(() => {
resolve({
users: [
{ id: 1, name: '用户A', status: '在线' },
{ id: 2, name: '用户B', status: '离线' },
{ id: 3, name: '用户C', status: '在线' }
],
total: 3
});
}, 1000);
});
}
}}
onClick={handleRefresh}
>
刷新数据
{data && (
)}
);
};
// beforeFetch 拦截
const BeforeFetchExample = () => {
const [allowed, setAllowed] = useState(true);
const handleFetch = ({ data }) => {
message.success('请求通过');
};
const beforeFetch = () => {
if (!allowed) {
message.warning('请求被 beforeFetch 拦截');
return false;
}
return true;
};
return (
beforeFetch 可以拦截请求
{
return new Promise((resolve) => {
setTimeout(() => {
resolve({ data: '请求成功' });
}, 800);
});
}
}}
beforeFetch={beforeFetch}
onClick={handleFetch}
>
{allowed ? '发送请求' : '请求已拦截'}
);
};
const BaseExample = () => {
return (
FetchButton 请求按钮
FetchButton 集成了数据请求功能，基于 @kne/react-fetch 库实现。
自动管理加载状态，支持成功/失败回调、参数传递、请求拦截等功能。
基础用法
带参数请求
成功与失败回调
文件导出场景
表单提交场景
刷新数据场景
请求拦截
);
};
render();
```
- ButtonFooter 底部按钮区(全屏)
- ButtonFooter 是页面操作条组件。切换 placement 可预览操作条固定到顶部/底部，以及左、中、右对齐。
- _ButtonGroup(@kne/current-lib_button-group)[import * as _ButtonGroup from "@kne/button-group"],(@kne/current-lib_button-group/dist/index.css),antd(antd)
```jsx
const { ButtonFooter } = _ButtonGroup;
const { Flex, Button, Typography, Alert, Radio, Space, Tag } = antd;
const PLACEMENT_OPTIONS = [
{ label: 'bottom', value: 'bottom' },
{ label: 'bottomStart', value: 'bottomStart' },
{ label: 'bottomEnd', value: 'bottomEnd' },
{ label: 'top', value: 'top' },
{ label: 'topStart', value: 'topStart' },
{ label: 'topEnd', value: 'topEnd' }
];
const BaseExample = () => {
const frameRef = React.useRef(null);
const [placement, setPlacement] = React.useState('bottom');
return (
placement
setPlacement(e.target.value)}
/>
春季外套
待支付
订单号 OD20260818001
数量：1 件
应付金额：¥299.00
请在 29:59 内完成支付，超时订单将自动取消。
frameRef.current} innerClassName="demo-button-footer-bar">
);
};
render();
```
### API
自适应按钮组组件，能够根据容器宽度自动调整显示的按钮数量，并将多余的按钮放入下拉菜单中。
### 属性
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| list | Array\