# @apify/ui-library 中文文档

规范地址：https://npmcn.com/package/%40apify/ui-library/

版本：1\.176\.1
npm 元数据更新时间：2026-11-09T14:42:28.998Z
中文译文更新时间：2026-11-09T14:43:40.074Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40apify/ui-library
原文对照：https://npmcn.com/package/%40apify/ui-library/?lang=original

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

- 包体积（解压后）：2.9 MB，1653 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：26 个
- peer 依赖：react 17\.x \|\| 18\.x \|\| 19\.x，react-dom 17\.x \|\| 18\.x \|\| 19\.x，styled-components ^6\.1\.19
- 首次发布：2025-02-12T09:04:44.164Z
- 最新版本发布：2026-11-09T14:42:28.699Z
- 近 30 天下载量：9004（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：594（近 12 个月 407 个）

## 中文简介

对应 apify.com 使用的 UI 库

## 安装

```sh
npm install @apify/ui-library
```

也可以使用：`pnpm add @apify/ui-library`、`yarn add @apify/ui-library`、`bun add @apify/ui-library`

## README

# `@apify/ui-library`

浏览元件 [主机故事本](https://apify.github.io/apify-core/storybook-shared)。 。 。 .

Apify's React design- system library——原始的,主题符号,以及跨Apify Console和营销网络共享的有风格的组件.

## 安装

```bash
pnpm add @apify/ui-library
```

同伴依赖关系( 如果还没有在您的项目中安装的话) :

-   `react` 17.x; 18.x; 19.x; 19
-   `react-dom` 17.x; 18.x; 19.x; 19
-   `styled-components` ^ 6.1.1.19 (韩语)

## 快开始

```tsx
import { Box, Button, Text } from '@apify/ui-library';

export const SaveBar = ({ onSave }: { onSave: () => void }) => (
    <Box pt="space8" pb="space8">
        <Text size="regular">You have unsaved changes.</Text>
        <Button variant="primary" color="default" mt="space4" onClick={onSave}>
            Save
        </Button>
    </Box>
);
```

`<Box>` 显示间距符作为工具道具( e)`pt`, (中文(简体) ), `mb`, (中文(简体) ), `mx`, (中文(简体) ), `p`(......) ; (......); `<Text>` 财务报告和审定财务报表 `<Heading>` 通过 `size`。所有值来自共享 `theme` ——从硬码的颜色,间隔,或弧度.

## 里面的东西

-   **版式** —— 说 `Box` (任何元素的通用道具包装)
-   **类型** —— 说 `Text`, (中文(简体) ), `Heading`,加上内容/共享/营销变体
-   **表单** —— 说 `Button`, (中文(简体) ), `IconButton`, (中文(简体) ), `Checkbox`, (中文(简体) ), `RadioButton`, (中文(简体) ), `Switch`, (中文(简体) ), `Select`
-   **数据** —— 说 `Table` + 原始种 (`TableHead`, (中文(简体) ), `TableRow`, (中文(简体) ), `TableCell`,(......), `Badge`, (中文(简体) ), `Chip`, (中文(简体) ), `Tag`
-   **反馈** —— 说 `Banner`, (中文(简体) ), `Message`, (中文(简体) ), `Spinner`
-   **导航** —— 说 `Tabs`, (中文(简体) ), `Breadcrumb`, (中文(简体) ), `Pagination`, (中文(简体) ), `Link`
-   **重叠** —— 说 `Floating` (菜单、工具提示), `CollapsibleCard`
-   **主题符号** —— 说 `theme.color.*`, (中文(简体) ), `theme.space.*`, (中文(简体) ), `theme.text.*`, (中文(简体) ), `theme.radius.*`, (中文(简体) ), `theme.shadow.*`, (中文(简体) ), `theme.transition.*`

## 使用样式组件以外的颜色符号

对于不使用风格化组件的外部项目——如基于 Tailwind 的应用软件或平面 CSS —— 包船预建的 CSS 文件,将所有颜色符号注册为 CSS 自定义属性 `:root`数字 :

-   `@apify/ui-library/style/colors/tokens.light.css`
-   `@apify/ui-library/style/colors/tokens.dark.css`

在全局样式表中导入匹配您主题的文件 :

```css
@import '@apify/ui-library/style/colors/tokens.light.css';
```

您可以通过 CSS 自定义属性引用任何令牌 :

```css
.my-element {
    color: var(--color-neutral-text);
    background: var(--color-neutral-background);
    border-color: var(--color-neutral-border);
}
```

对于 Tailwind , 将变量映射到 `tailwind.config.js`数字 :

```js
/** @type {import('tailwindcss').Config} */
export default {
    theme: {
        extend: {
            colors: {
                'neutral-text': 'var(--color-neutral-text)',
                'neutral-bg': 'var(--color-neutral-background)',
                'neutral-border': 'var(--color-neutral-border)',
            },
        },
    },
};
```

## 故事书

从寄存器根 :

```bash
pnpm run storybook
```

这两本故事书同时开始 [http://localhost:6006 (英语)](http://localhost:6006/) 和共享设计系统故事(本库) [http://localhost:6007 (英语)](http://localhost:6007/)。 。 。 .

## 捐款

见 [`CONTRIBUTING.md`](https://npmcn.com/package/%40apify/ui-library/CONTRIBUTING.md) 用于组件生命周期、设计-调试同步(图像颜色和超新星打字)、故事本惯例、出版和审查清单。 新的组件最容易与脚手架 [`/create-ui-component`](https://npmcn.com/.claude/skills/create-ui-component/SKILL.md) 克劳德密码技术.

## 常见问题

### @apify/ui-library 是什么？

对应 apify\.com 使用的 UI 库

### 如何安装 @apify/ui-library？

在项目目录运行 npm install @apify/ui-library，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（17\.x \|\| 18\.x \|\| 19\.x）、react-dom（17\.x \|\| 18\.x \|\| 19\.x）、styled-components（^6\.1\.19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @apify/ui-library 支持 TypeScript 吗？

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

### @apify/ui-library 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @apify/ui-library 可以商用吗？

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

### @apify/ui-library 的下载量有多少？

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

### @apify/ui-library 还在维护吗？

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