# @cloud-ru/ds-uikit-product-button-predefined 中文文档 规范地址：https://npmcn.com/package/%40cloud-ru/ds-uikit-product-button-predefined/ 版本：1\.0\.45 npm 元数据更新时间：2026-11-11T15:05:09.519Z 中文译文更新时间：2026-11-11T16:04:20.546Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cloud-ru/ds-uikit-product-button-predefined 原文对照：https://npmcn.com/package/%40cloud-ru/ds-uikit-product-button-predefined/?lang=original 项目主页：https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/uikit-product-button-predefined 源码仓库：https://github.com/cloud-ru-tech/snack-v2 ## 关键信息（来自 npm 元数据） - 包体积（解压后）：345 kB，32 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：4 个 - 首次发布：2026-08-18T12:42:16.951Z - 最新版本发布：2026-11-11T15:05:09.206Z - 近 30 天下载量：7153（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：176（近 12 个月 176 个） ## 中文简介 函数 - \\ \\ \\ \\ (桌面) \\ 模式 (移动) . ## 安装 ```sh npm install @cloud-ru/ds-uikit-product-button-predefined ``` 也可以使用：`pnpm add @cloud-ru/ds-uikit-product-button-predefined`、`yarn add @cloud-ru/ds-uikit-product-button-predefined`、`bun add @cloud-ru/ds-uikit-product-button-predefined` ## README # 按钮裁剪 `@cloud-ru/ds-uikit-product-button-predefined` - 函数 - \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\. Кнопка `view='function'` с `AdaptiveDroplist`时间轴: **桌面** —— 说 `Droplist` из `@cloud-ru/ds-list`时 **移动** —— 说 `@cloud-ru/ds-modal` со. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `AdaptiveProvider` (см. `@cloud-ru/ds-adaptive`(原始内容存档于2018-10-25). ). {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 **`PriceSummary`** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. ## Когда - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. - 台式电脑 台式电脑 台式电脑. Когда **не** нужен `ButtonDropdown`数字 : - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}=========================================================== -=========================================================================================================================================================================== **`Dropdown`**。 。 。 . - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 **`Button`** `view='function'`。 。 。 . ## Анатомия ### 触发 `Button` `view='function'` `appearance='neutral'` 页:1 `buttonFunctionNeutral` \\ \\ \\ \\ \\ `label` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}上下两地 При `open={true}` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `data-pressed` - \\ \\ \\ \\ \\ \\ \\ \\ `stateLayer/text/opacity` (прозрачность标签/相) `@cloud-ru/ds-materials`) (中文(简体) ). ### 丢弃列表 `ButtonDropdown` рендерит `Droplist` из `@cloud-ru/ds-list` . . . . . `AdaptiveProvider`说吧 - **桌面** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得怎么样. - **移动** - список уходит уходит в в `@cloud-ru/ds-list`) (中文(简体) ). ### 项目 Массив `Droplist` (单位:千美元)`content.label`, (中文(简体) ), `onClick`, (中文(简体) ), `id`) (中文(简体) ). При `closeDroplistOnItemClick` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. ### 大小( 默认) `s`(中文(简体) ) - `xs` - \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ `s` (алиас. - `s` ——компактный. - `m` ——средний. - `l` ——крупный. ### 外观( 默认) `neutral`(中文(简体) ) ~ ~ ~ ~ ~ ~ ~ `Button` `view='function'`数字 : - `neutral` ——нейтральный,основной. - `primary` - 额... - `critical` ——критическое. ### 打开/ 在打开更改上 控制 API QQ `useValueControl` (как `@cloud-ru/ds-utils`) (中文(简体) ). ## Установка ```bash pnpm add @cloud-ru/ds-uikit-product-button-predefined ``` ```ts import { ButtonDropdown } from '@cloud-ru/ds-uikit-product-button-predefined' ``` ### Базовый ```tsx setPeriod('month') }, { id: 'year', content: { label: 'Year' }, onClick: () => setPeriod('year') }, ]} /> ``` ## Примеры {/\* 客户端:只 — Droplist {} {} { { { { {}} { { { { { { { { }} { { } { { { }}} { { { { { { } { { }} { }} { } { { } } { { } { { { } } } { { { { } } { { } { } { } { } { } { { } { { } { { { } } { } { { } { } { } { } { } { } / { } { } { } { } { { { } { { } ### 桌面基础 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. ```tsx import { AdaptiveProvider, LAYOUT_TYPE } from '@cloud-ru/ds-adaptive'; import { ButtonDropdown } from '@cloud-ru/ds-uikit-product-button-predefined'; import { useState } from 'react'; const periods = [ { id: 'month', label: 'Month' }, { id: 'year', label: 'Year' }, ]; export function DesktopBasic() { const [period, setPeriod] = useState(periods[0]); const items = periods.map(option => ({ id: option.id, content: { label: option.label }, onClick: () => setPeriod(option), })); return ( ); } ``` ### 桌面打开状态 (原始内容存档于2017-10-21) (中文(简体) ). ```tsx import { AdaptiveProvider, LAYOUT_TYPE } from '@cloud-ru/ds-adaptive'; import { ButtonDropdown } from '@cloud-ru/ds-uikit-product-button-predefined'; import { useState } from 'react'; const periods = [ { id: 'month', label: 'Month' }, { id: 'year', label: 'Year' }, ]; export function DesktopOpen() { const [period, setPeriod] = useState(periods[0]); const items = periods.map(option => ({ id: option.id, content: { label: option.label }, onClick: () => setPeriod(option), })); return ( ); } ``` ### 移动布局 适应性Provider布局 Type=mobile QQ 模式QQ. ```tsx import { AdaptiveProvider, LAYOUT_TYPE } from '@cloud-ru/ds-adaptive'; import { ButtonDropdown } from '@cloud-ru/ds-uikit-product-button-predefined'; import { useState } from 'react'; const periods = [ { id: 'month', label: 'Month' }, { id: 'year', label: 'Year' }, ]; export function MobileLayout() { const [period, setPeriod] = useState(periods[0]); const items = periods.map(option => ({ id: option.id, content: { label: option.label }, onClick: () => setPeriod(option), })); return ( ); } ``` ## 道具 **按下按钮** | Prop | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `appearance` | `"critical"` | `"neutral"` | `"primary"` | `neutral` | Вариант | | `as` | `"button"` | —— 说 | \============================================================================================ (============================================================================ 链接 QQ 反应- router- dom) | | `className` | `string` | —— 说 | Дополнительный Класс. | | `closeDroplistOnItemClick` | `boolean` | `false` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. \=============================================================================================== (=============================================================================== | | `closeOnPopstate` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 | | `counter` | `CounterProps` | —— 说 | 计数器. `appearance` можно(一作相出. | | `data-test-id` | `string` | —— 说 | | | `disabled` | `boolean` | —— 说 | Отключена | | `fullWidth` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 | | `innerRef` | `PolymorphicRef` | —— 说 | 参考: реальный DOM-элемент/инстанс,который `as`。 。 。 . Используем,чтобы也 `forwardRef` (原始内容存档于2018-09-21) (英语). | | `items` | `BaseItemWithoutNonGroup` | `CommonGroupItem` | `Item` | `ScrollProps` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 | | `label` | `string` | —— 说 | Текст | | `loading` | `boolean` | —— 说 | Состояние | | `minWidth` | `boolean` | —— 说 | Минимальная(ширина)`min-width` (原始内容存档于2018-09-28). QQ. По `true`。 。 。 . `false` . . . . . . | | `onOpenChange` | `((open: boolean) => void)` | —— 说 | Колбэк. | | `open` | `boolean` | —— 说 | Контролируемое. | | `placement` | `"bottom"` | `"bottom-end"` | `"bottom-start"` | `"left"` | `"left-end"` | `"left-start"` | `"right"` | `"right-end"` | `"right-start"` | `"top"` | `"top-end"` | `"top-start"` | `top` | (原始内容存档于2019-09-29) (中文(中国大陆) ). | | `size` | `"l"` | `"m"` | `"s"` | `"xs"` | `s` | Размер; для `xs` применяется `s`。 。 。 . | | `triggerClassName` | `string` | —— 说 | CSS - класс триггера | #### 相关类型 - `ButtonDropdownSize` =: `"l"` | `"m"` | `"s"` | `"xs"` ## 常见问题 ### @cloud-ru/ds-uikit-product-button-predefined 是什么？ 函数 - \\ \\ \\ \\ \(桌面\) \\ 模式 \(移动\) \. ### 如何安装 @cloud-ru/ds-uikit-product-button-predefined？ 在项目目录运行 npm install @cloud-ru/ds-uikit-product-button-predefined，或使用 pnpm add / yarn add / bun add。 ### @cloud-ru/ds-uikit-product-button-predefined 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cloud-ru/ds-uikit-product-button-predefined 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @cloud-ru/ds-uikit-product-button-predefined 可以商用吗？ @cloud-ru/ds-uikit-product-button-predefined 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @cloud-ru/ds-uikit-product-button-predefined 的下载量有多少？ 根据 npm 官方下载统计，@cloud-ru/ds-uikit-product-button-predefined 在 2026/10/10 – 2026/11/08 这 30 天内被下载 7,153 次，日均约 238 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cloud-ru/ds-uikit-product-button-predefined 还在维护吗？ 最新版本 1\.0\.45 发布于 2026/11/11（今天）；至今共发布 176 个版本，其中过去 12 个月发布了 176 个；首次发布于 2026/08/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。