(null);
return (
setLastAction('Create') },
{
variant: BUTTON_TYPE.Outline,
label: 'Settings',
onClick: () => setLastAction('Settings'),
},
{
variant: BUTTON_TYPE.Kebab,
list: {
items: [
{ content: { label: 'Export' }, onClick: () => setLastAction('Export') },
{ content: { label: 'Archive' }, onClick: () => setLastAction('Archive') },
],
},
},
]}
>
Actions are shown in the header for wide desktop widgets.
{lastAction ? Last action: {lastAction} : null}
);
}
```
### 正在装入
```tsx
import { Widget } from '@cloud-ru/ds-uikit-product-widget';
export function LoadingState() {
return (
Billing summary
);
}
```
### 错误 {}
在点击 Update 时, 状态 {}\\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\
```tsx
import { Widget } from '@cloud-ru/ds-uikit-product-widget';
import { useState } from 'react';
export function ErrorState() {
const [state, setState] = useState<'default' | 'error'>('error');
return (
setState('default'),
}}
>
{state === 'error' ? 'Metrics' : 'Metrics loaded successfully.'}
);
}
```
## 道具
**部件方案**
| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `actions` | `Action` | `BaseAction` | `ButtonDroplistProps` | `ButtonKebabProps` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. |
| `actionsChildren` | `ReactNode` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. |
| `children` | `ReactNode` | —— 说 | Контент. |
| `className` | `string` | —— 说 | (原始内容存档于2018-09-29). CSS-класс. |
| `data-test-id` | `string` | —— 说 | |
| `errorState` | `WidgetErrorStateProps` | —— 说 | 错误. |
| `header` | `WidgetHeaderProps` | —— 说 | Пропсы. |
| `loadingState` | `WidgetLoadingStateProps` | —— 说 | 装入 装入. |
| `segmentControl` | `SegmentControlProps` | —— 说 | QQ 分节控制 QQ . |
| `state` | `"default"` | `"error"` | `"loading"` | —— 说 | Состояние. |
| `wide` | `boolean` | —— 说 | \[永久失效連結\] 腾讯网. 手机 手机 手机`wide && !isMobile`) (中文(简体) ). |
#### 相关类型
- `Action` =: `ButtonAction | OutlineAction | TonalAction | FunctionAction | SimpleAction | KebabAction | DroplistAction`
**基础行动**
| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `hidden` | `boolean | undefined` | —— 说 | Скрыть. |
| `tooltip` | `TooltipProps` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}Tolotip... |
**按键Droplist 程序**
| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `button` | `ButtonProps` | —— 说 | |
| `list` | `WidgetActionListProps` | —— 说 | |
**按钮Kebab 可能性**
| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `button` | `ButtonProps` | —— 说 | |
| `list` | `WidgetActionListProps` | —— 说 | |
**部件动作列表**
| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `className` | `string | undefined` | —— 说 | |
| `closeDroplistOnItemClick` | `boolean | undefined` | —— 说 | |
| `items` | `WidgetActionListEntry` | `WidgetActionListGroup` | `WidgetActionListItem` | —— 说 | |
| `onOpenChange` | `((open: boolean) => void) | undefined` | —— 说 | |
| `open` | `boolean | undefined` | —— 说 | |
**部件错误状态Props**
| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `errorDescription` | `string | undefined` | —— 说 | Описание. |
| `errorIcon` | `IconPredefinedProps` | —— 说 | QQ InfoBlock. (原始内容存档于2018-09-29). |
| `errorTitle` | `string | undefined` | —— 说 | Заголовок. |
| `onClickUpdate` | `(event: MouseEvent) => void` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. |
| `updateButtonLabel` | `string | undefined` | —— 说 | Текст. |
**部件页眉Props**
| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `children` | `string | number | boolean | ReactElement> | Iterable | ReactPortal | null | undefined` | —— 说 | |
| `className` | `string | undefined` | —— 说 | CSS - класс. |
| `data-test-id` | `string | undefined` | —— 说 | |
| `href` | `string` | —— 说 | |
| `icon` | `string | number | boolean | ReactElement> | Iterable | ReactPortal | null | undefined` | —— 说 | (原始内容存档于2019-10-12). QQ, 24×24. |
| `title` | `string` | —— 说 | Текст. |
| `titleTag` | `ElementType | undefined` | —— 说 | Семантический. |
**部件连接状态**
| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `loadingContent` | `string | number | boolean | ReactElement> | Iterable | ReactPortal | null | undefined` | —— 说 | {\\fn华文仿宋\\fs16\\1cHD1D1D1}好. |
| `showSkeleton` | `boolean | undefined` | —— 说 | {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}骨架 {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}骨架... |
- `WidgetState` =: `"default"` | `"error"` | `"loading"`
## Смотри
- **`TitleClickable`** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
- **`SegmentControl`** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
- **`InfoBlock`** блок ошибки `state='error'`。 。 。 .
## Адаптивность
`Widget` -=YTET -伊甸园字幕组=- 翻译: {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `AdaptiveProvider` 页:1 `@cloud-ru/ds-adaptive`API :
- **桌面** (по `wide` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.
- **移动** —— режим: `wide` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}请说出什么来.
\* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* `` \[永久失效連結\] (中文(简体) ). Пропа `layoutType` у:источник也.
### 移动布局
宽 qq, 主页脚
```tsx
import { AdaptiveProvider, LAYOUT_TYPE } from '@cloud-ru/ds-adaptive';
import { BUTTON_TYPE, Widget } from '@cloud-ru/ds-uikit-product-widget';
import { useState } from 'react';
export function MobileLayout() {
const [lastAction, setLastAction] = useState(null);
return (
setLastAction('Upload') },
{
variant: BUTTON_TYPE.Kebab,
list: {
items: [
{
content: { label: 'Delete bucket' },
onClick: () => setLastAction('Delete bucket'),
},
],
},
},
]}
>
On mobile, wide is ignored: primary actions move to the footer, overflow goes to kebab.
{lastAction ? Last action: {lastAction} : null}
);
}
```
### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢
\- Форс,не:
- Поддерево:
```tsx
import { AdaptiveProvider } from '@cloud-ru/ds-adaptive'
{content}
```
- – Отдельный – `withLayoutType` (模块-镜, сахар:
```tsx
import { withLayoutType } from '@cloud-ru/ds-adaptive'
import { Widget } from '@cloud-ru/ds-uikit-product-widget'
const MobileWidget = withLayoutType(Widget, 'mobile')
```
### Платформенные
{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `WidgetProps`。 。 。 .
| Проп | 桌面 | 移动 |
| --- | --- | --- |
| `wide` | используется | игнорируется (принудительно) |
Подробнее модели- [Адаптивность-паттерн](https://npmcn.com/patterns/adaptive)。 。 。 .
## 常见问题
### @cloud-ru/ds-uikit-product-widget 是什么？
===================== =========================================================================================================================================================================================================================================\.
### 如何安装 @cloud-ru/ds-uikit-product-widget？
在项目目录运行 npm install @cloud-ru/ds-uikit-product-widget，或使用 pnpm add / yarn add / bun add。
### @cloud-ru/ds-uikit-product-widget 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @cloud-ru/ds-uikit-product-widget 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @cloud-ru/ds-uikit-product-widget 可以商用吗？
@cloud-ru/ds-uikit-product-widget 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。
### @cloud-ru/ds-uikit-product-widget 的下载量有多少？
根据 npm 官方下载统计，@cloud-ru/ds-uikit-product-widget 在 2026/10/10 – 2026/11/08 这 30 天内被下载 6,068 次，日均约 202 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @cloud-ru/ds-uikit-product-widget 还在维护吗？
最新版本 2\.1\.0 发布于 2026/11/11（今天）；至今共发布 179 个版本，其中过去 12 个月发布了 179 个；首次发布于 2026/08/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。