# @cloud-ru/ds-button-combo 中文文档

规范地址：https://npmcn.com/package/%40cloud-ru/ds-button-combo/

版本：1\.0\.45
npm 元数据更新时间：2026-11-11T15:05:08.177Z
中文译文更新时间：2026-11-11T16:26:32.414Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cloud-ru/ds-button-combo
原文对照：https://npmcn.com/package/%40cloud-ru/ds-button-combo/?lang=original
项目主页：https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/button-combo
源码仓库：https://github.com/cloud-ru-tech/snack-v2

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：369 kB，42 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2026-08-18T12:42:02.713Z
- 最新版本发布：2026-11-11T15:05:07.920Z
- 近 30 天下载量：6320（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：176（近 12 个月 176 个）

## 中文简介

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.

## 安装

```sh
npm install @cloud-ru/ds-button-combo
```

也可以使用：`pnpm add @cloud-ru/ds-button-combo`、`yarn add @cloud-ru/ds-button-combo`、`bun add @cloud-ru/ds-button-combo`

## README

# 按键 Combo

`@cloud-ru/ds-button-combo` -=YTET -伊甸园字幕组=- 翻译:.

Комбинированная:основное也. – Обе – `Button` из `@cloud-ru/ds-button` с `view` 编号 : `appearance` 编号 : `size`页:1 `Droplist` из `@cloud-ru/ds-list` (на:раскладке也 `BottomSheet`) (中文(简体) ). {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得呢.

## Когда

-   Когда:Сохранить也.
-   Когда:вместо也.

Когда **не** нужен:

-   . . . . `Button` из `@cloud-ru/ds-button`。 。 。 .
-   \-=YTET -伊甸园字幕组=- `@cloud-ru/ds-segment-control` 选择.
-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `ButtonGroup` из `@cloud-ru/ds-button`。 。 。 .

## Анатомия

### 视图( 默认) `filled`(中文(简体) )

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `view` у `@cloud-ru/ds-button`数字 :

-   `filled` ——заполненная.
-   `tonal` - 。 。 。 。 .
-   `outline` - 。 。 。 。 .
-   `simple` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
-   `elevated` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
-   `function` - компактнаяминимум.

### 外观( 默认) `primary`(中文(简体) )

说吧

-   `primary` - брендовыйосновноедействие.
-   `neutral` ——нейтральное,второстепенное.
-   `critical` ——деструктивное.

### 大小( 默认) `m`(中文(简体) )

校对:Soup `s`, (中文(简体) ), `m`, (中文(简体) ), `l`。 。 。 。 .

## Установка

```bash
pnpm add @cloud-ru/ds-button-combo
```

```ts
import { ButtonCombo } from '@cloud-ru/ds-button-combo'
```

## Примеры

### Основной

未控制: 默认 数值 ========

```tsx
import { ButtonCombo, Item } from '@cloud-ru/ds-button-combo';

const items: Item[] = [
  { id: 'save', label: 'Сохранить', onClick: () => console.info('Сохранить') },
  { id: 'save-copy', label: 'Сохранить копию', onClick: () => console.info('Сохранить копию') },
  { id: 'save-template', label: 'Сохранить как шаблон', onClick: () => console.info('Сохранить как шаблон') },
];

export function Basic() {
  return <ButtonCombo items={items} defaultValue='save' />;
}
```

### Варианты

QQ视图: 填充、 直肠、 大纲、 函数

```tsx
import { ButtonCombo, Item, VIEW } from '@cloud-ru/ds-button-combo';

const items: Item[] = [
  { id: 'run', label: 'Запустить', onClick: () => console.info('Запустить') },
  { id: 'run-debug', label: 'Запустить с отладкой', onClick: () => console.info('Запустить с отладкой') },
];

export function Views() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <ButtonCombo view={VIEW.Filled} items={items} defaultValue='run' />
      <ButtonCombo view={VIEW.Tonal} items={items} defaultValue='run' />
      <ButtonCombo view={VIEW.Outline} items={items} defaultValue='run' />
      <ButtonCombo view={VIEW.Function} items={items} defaultValue='run' />
    </div>
  );
}
```

### 已控制

\# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #

```tsx
import { ButtonCombo, Item } from '@cloud-ru/ds-button-combo';
import { ItemId } from '@cloud-ru/ds-list';
import { useState } from 'react';

const items: Item[] = [
  { id: 'publish', label: 'Опубликовать', onClick: () => console.info('Опубликовать') },
  { id: 'draft', label: 'Сохранить черновик', onClick: () => console.info('Сохранить черновик') },
  { id: 'schedule', label: 'Запланировать', onClick: () => console.info('Запланировать') },
];

export function Controlled() {
  const [value, setValue] = useState<ItemId>('publish');
  const [open, setOpen] = useState(false);

  return <ButtonCombo items={items} value={value} onChange={setValue} open={open} onOpenChange={setOpen} />;
}
```

### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你这混蛋

```tsx
import { ButtonCombo, Item } from '@cloud-ru/ds-button-combo';

import styles from './styles.module.scss';

const items: Item[] = [
  { id: 'confirm', label: 'Подтвердить', onClick: () => console.info('Подтвердить') },
  { id: 'confirm-notify', label: 'Подтвердить и уведомить', onClick: () => console.info('Подтвердить и уведомить') },
];

export function FullWidth() {
  return (
    <div className={styles.narrow}>
      <ButtonCombo fullWidth items={items} defaultValue='confirm' />
    </div>
  );
}
```

## 道具

**按钮组合**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `appearance` | `"critical"` | `"neutral"` | `"primary"` | `primary` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `className` | `string` | —— 说 | CSS - класс контейнера |
| `data-test-id` | `string` | —— 说 |  |
| `defaultLabel` | `string` | \`\` | 标签 标签 标签 |
| `defaultValue` | `ItemId` | —— 说 | QQ (无控制) |
| `disabled` | `boolean` | —— 说 | Отключена |
| `dropdownClassName` | `string` | —— 说 | CSS - класс списка |
| `dropdownTriggerClassName` | `string` | —— 说 | CSS - класс - выпадающего |
| `fullWidth` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `innerRef` | `Ref<HTMLDivElement>` | —— 说 | (原始内容存档于2017-09-29). Ref QQ DOM-элемент.  
Используем,чтобы也 `forwardRef` (原始内容存档于2018-09-21) (英语). |
| `items` | `Item` | —— 说 | Основные(действия) |
| `loading` | `boolean` | —— 说 | Состояние |
| `onChange` | `((value: ItemId) => void)` | —— 说 | 控制着: |
| `onOpenChange` | `((open: boolean) => void)` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `open` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `optionClassName` | `string` | —— 说 | CSS - |
| `size` | `"l"` | `"m"` | `"s"` | `m` | Размер |
| `tabIndex` | `number` | —— 说 | HTML -QQ 标签索引 |
| `value` | `ItemId` | —— 说 | 受控人员: |
| `view` | `"elevated"` | `"filled"` | `"function"` | `"outline"` | `"simple"` | `"tonal"` | `filled` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |

#### 相关类型

**项目**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `afterContent` | `string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `beforeContent` | `string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `checked` | `boolean | undefined` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `className` | `string | undefined` | —— 说 | 支助科 |
| `content` | `ItemContent` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `data-test-id` | `string | undefined` | —— 说 |  |
| `disabled` | `boolean | undefined` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `hidden` | `boolean | undefined` | —— 说 | {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得怎样 |
| `id` | `ItemId` | —— 说 | Уникальный |
| `inactive` | `boolean | undefined` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}==YTET -伊甸园字幕组=- 翻译:  
  
  
\# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # ## # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # |
| `itemRef` | `RefObject<HTMLElement> | undefined` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你还好吧 |
| `itemWrapRender` | `((item: ReactNode) => ReactNode) | undefined` | —— 说 | \# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `Tooltip`编号 :`Link`(中文(简体) ) |
| `label` | `string | undefined` | —— 说 | \=========================================================================================================================================== =================================================================================================================== |
| `onClick` | `(e: MouseEvent<HTMLElement>) => void` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `showSwitchIcon` | `boolean | undefined` | —— 说 | Флаг,у也 |
| `switch` | `boolean | undefined` | —— 说 | 切换 |

## Смотри

-   [`@cloud-ru/ds-button`](https://npmcn.com/button) {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `ButtonGroup`。 。 。 .
-   [`@cloud-ru/ds-list`](https://npmcn.com/list) —— 说 `Droplist`,"лежащий","основе".

## 常见问题

### @cloud-ru/ds-button-combo 是什么？

\{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080\}你觉得呢\.

### 如何安装 @cloud-ru/ds-button-combo？

在项目目录运行 npm install @cloud-ru/ds-button-combo，或使用 pnpm add / yarn add / bun add。

### @cloud-ru/ds-button-combo 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cloud-ru/ds-button-combo 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cloud-ru/ds-button-combo 可以商用吗？

@cloud-ru/ds-button-combo 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @cloud-ru/ds-button-combo 的下载量有多少？

根据 npm 官方下载统计，@cloud-ru/ds-button-combo 在 2026/10/10 – 2026/11/08 这 30 天内被下载 6,320 次，日均约 211 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cloud-ru/ds-button-combo 还在维护吗？

最新版本 1\.0\.45 发布于 2026/11/11（今天）；至今共发布 176 个版本，其中过去 12 个月发布了 176 个；首次发布于 2026/08/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。