# @cloud-ru/ds-popup-private 中文文档

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

版本：1\.1\.20
npm 元数据更新时间：2026-11-11T15:02:53.556Z
中文译文更新时间：2026-11-11T15:18:00.390Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：425 kB，112 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- 首次发布：2026-08-18T12:40:45.671Z
- 最新版本发布：2026-11-11T15:02:53.191Z
- 近 30 天下载量：17194（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：107（近 12 个月 107 个）

## 中文简介

`@cloud-ru/ds-popup-private` —— 说

## 安装

```sh
npm install @cloud-ru/ds-popup-private
```

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

## README

# 私人弹出

`@cloud-ru/ds-popup-private` —— 说

## 页脚动作

### 道具 `FooterActionsProps`

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `actionsClassName` | `string` | —— 说 | Доп. CSS-на `ButtonGroup` (поверх也. |
| `additionalButton` | `BottomSheetActionButton` | —— 说 | Дополнительная (третья)кнопка (по) `view='simple'`, (中文(简体) ), `appearance='neutral'`) (中文(简体) ). |
| `approveButton` | `BottomSheetActionButton` | —— 说 | Основная(по) `view='filled'`, (中文(简体) ), `appearance='primary'`) (中文(简体) ). |
| `cancelButton` | `BottomSheetActionButton` | —— 说 | Кнопка(по) `view='outline'`, (中文(简体) ), `appearance='neutral'`) (中文(简体) ). |
| `footerActionsOrientation` | `"horizontal"` | `"vertical"` | `horizontal` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. |
| `size` | `"l"` | `"m"` | `"s"` | —— 说 | Размер. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我... {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我.. `ButtonGroup`) , не  
{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我还得去 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢  
размера (календарные:24 / 32 / 40 s. \* 模式、抽屉 \*  
底表相克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克 `l` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢  
передают `size='l'` явно. |
| `surface` | `"bottomSheet"` | `"window"` | `window` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}请说:  
\- 说吧 `window` (桌面, : : : 3 : : : ).  
\- 说吧 `bottomSheet` (移动): 1 ~ ~ , 2 ~ 空位相间, 3 ~ ~ (主). |
| `testIds` | `FooterActionsTestIds` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢`bottom-sheet` 编号 : `modal` 编号 : `drawer`) (中文(简体) ). |

#### 相关类型

-   `BottomSheetActionButton` =: `Omit<ButtonProps<"button">, "size" | "fullWidth"> | Omit<ButtonProps<"a">, "size" | "fullWidth">`
    
-   `FooterActionsOrientation` =: `"horizontal"` | `"vertical"`
    

**页脚动作测试**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `additional` | `string` | —— 说 |  |
| `approve` | `string` | —— 说 |  |
| `cancel` | `string` | —— 说 |  |

-   `SurfaceTokenSegment` =: `"bottomSheet"` | `"window"`

## 综艺 叙事

### 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |

## 叠加表面提供器

### 道具 `OverlaySurfaceProviderProps`

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `bodyHeightAuto` | `boolean` | `false` | 抽屉: `Body` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. |
| `children` | `string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined` | —— 说 |  |
| `surface` | `"drawer"` | `"modal"` | `"sheet"` | —— 说 | Поверхность,в也. |

#### 相关类型

-   `OverlaySurface` =: `"drawer"` | `"modal"` | `"sheet"`

## 弹出Body

### 道具 `PopupBodyProps`

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `bodyPadding` | `boolean` | `true` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}身体 身体 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我刚说 При `false` -=ytet -伊甸园字幕组=- 翻译:  
для,изображений也. (图) `padding=false`。 。 。 . |
| `children` | `string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined` | —— 说 |  |
| `className` | `string` | —— 说 | CSS - класс body. |
| `content` | `ReactNode` | —— 说 | 体 (альтернатива) `children`) (中文(简体) ). |
| `data-test-id` | `string` | —— 说 |  |
| `innerRef` | `Ref<HTMLElement>` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}身体 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}是的 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}是的. |

## 弹出关闭按钮

### 道具 `PopupCloseButtonProps`

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `aria-label` | `string | undefined` | —— 说 | 定义标记当前元素的字符串值.  
Доступное. По `close popup`。 。 。 . |
| `className` | `string` | —— 说 | (原始内容存档于2018-09-31). CSS-Q. |
| `data-test-id` | `string` | —— 说 |  |
| `onClick` | `() => void` | —— 说 | Действие. |

## 弹出福特

### 道具 `PopupFooterProps`

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `children` | `string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined` | —— 说 |  |
| `className` | `string` | —— 说 | (原始内容存档于2018-09-31) (英语). CSS - класс fower' à. |
| `data-test-id` | `string` | —— 说 |  |

## 弹出页眉

### 道具 `PopupHeaderProps`

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `actionButton` | `ReactNode` | —— 说 | QQ头条 `ReactNode`时 `Button` ) (中文(简体) ). |
| `className` | `string` | —— 说 | (原始内容存档于2018-10-21) (英语). CSS -класс-класс-头'а. |
| `data-test-id` | `string` | —— 说 |  |
| `onBackButtonClick` | `(() => void)` | —— 说 | 回叫QQ回叫 (слева:"слева").  
{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}请回电 `Button view='function' icon={<ArrowLeftSVG />}`。 。 。 . |
| `slotAfterTitle` | `ReactNode` | —— 说 | QQ 标题, `QuestionTooltip` из `@cloud-ru/ds-tooltip`) (中文(简体) ). |
| `slotSecondTitle` | `ReactNode` | —— 说 | 时间轴: `SearchBar`, (中文(简体) ), `SegmentControl` или `Filter`。 。 。 .  
说吧 `secondWrapper` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你应该知道 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你是谁 `bottomSheet`, (中文(简体) ),  
`subHeadlineWrapper` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你应该知道 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你是谁 `window` (模式/抽屉). |
| `subtitle` | `ReactNode` | —— 说 | (图) `subtitleWrapper`) (中文(简体) ). {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. |
| `testIds` | `PopupHeaderTestIds` | —— 说 | Переопределение `data-test-id` слотов. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `TEST_IDS`。 。 。 .  
{\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}(绘画家/模式) {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}♪# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #. |
| `title` | `ReactNode` | —— 说 | Заголовок. 说吧 `title-l` 床单, `headline-s` qq窗口(模式/绘图). |
| `titleId` | `string` | —— 说 | `id` - заголовка связи связи `aria-labelledby` 对话框' á(可访问名称) . |
| `truncate` | `{ title?: number; subtitle?: number; } | undefined` | —— 说 | Усечение `title`编号 :`subtitle` через `TruncateString` (число. Применяется  
{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得怎么样? \* 窗口(模式/绘图),  
{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. |

#### 相关类型

**弹出页头测试**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `actionButton` | `string | undefined` | —— 说 |  |
| `backButton` | `string | undefined` | —— 说 |  |
| `header` | `string | undefined` | —— 说 |  |
| `slotAfterTitle` | `string | undefined` | —— 说 |  |
| `slotSecondTitle` | `string | undefined` | —— 说 |  |
| `subtitle` | `string | undefined` | —— 说 |  |
| `title` | `string | undefined` | —— 说 |  |

## 弹出媒体

### 道具 `MediaProps`

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `alt` | `string` | —— 说 | Альтернативный (a11y). |
| `className` | `string` | —— 说 |  |
| `kind` | `"icon"` | `"image"` | `image` | Режим:  
\- 说吧 `'image'` . . . . . `184px`),\[к  
{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得怎样? \* 身体 \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*  
используйте `bodyPadding={false}` отдельно.  
\- 说吧 `'icon'` - иконка с `padding-top: 24px`。 。 。 . |
| `src` | `string` | —— 说 | (原始内容存档于2018-09-29). URL QQ/QQ. |

#### 相关类型

-   `MediaKind` =: `"icon"` | `"image"`

## 苏维埃 TOKEN 单元

### 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |

## 使用 OverlayBodyHeightAuto 软件

### 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |

## 使用重叠页

### 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |

## 使用 Surface Token 组件

### 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |

## 常见问题

### @cloud-ru/ds-popup-private 是什么？

@cloud-ru/ds-popup-private —— 说

### 如何安装 @cloud-ru/ds-popup-private？

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

### @cloud-ru/ds-popup-private 支持 TypeScript 吗？

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

### @cloud-ru/ds-popup-private 支持 ESM 还是 CommonJS？

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

### @cloud-ru/ds-popup-private 可以商用吗？

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

### @cloud-ru/ds-popup-private 的下载量有多少？

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

### @cloud-ru/ds-popup-private 还在维护吗？

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