# @dazl/component-gallery 中文文档

规范地址：https://npmcn.com/package/%40dazl/component-gallery/

版本：2\.1\.0
npm 元数据更新时间：2026-08-07T07:10:25.139Z
中文译文更新时间：2026-11-11T16:41:25.529Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dazl/component-gallery
原文对照：https://npmcn.com/package/%40dazl/component-gallery/?lang=original
项目主页：https://github.com/dazl-dev/dazl-libs#readme
源码仓库：https://github.com/dazl-dev/dazl-libs

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

- 包体积（解压后）：29.4 kB，36 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=19\.0\.0
- 首次发布：2026-02-12T09:27:04.891Z
- 最新版本发布：2026-06-16T10:39:52.574Z
- 近 30 天下载量：39985（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

在 Dazl 内的画廊中查看您的组件

## 安装

```sh
npm install @dazl/component-gallery
```

也可以使用：`pnpm add @dazl/component-gallery`、`yarn add @dazl/component-gallery`、`bun add @dazl/component-gallery`

## README

# @dazl/ 组件- 邮件

A 类 [达兹](https://dazl.dev/) 让您浏览和预览您的项目反应组件的集成 .

## 安装

在您的反应路由器项目中 :

```bash
npm install @dazl/component-gallery
```

## 设置

### 1\. 增加图片库路线

在您的 React 路由器项目中创建一个只开发的路由 :

```tsx
// app/dev/components.tsx
import '@dazl/component-gallery/styles.css';
export { default } from '@dazl/component-gallery/route';
export function clientLoader() {}
export function HydrateFallback() {}
```

注册路线 :

```ts
// app/routes.ts
import { route, type RouteConfig } from '@react-router/dev/routes';

export default [
  // ... your other routes
  route('dev/components', 'dev/components.tsx'),
] satisfies RouteConfig;
```

### 2\. 创建组件实例

定义组件示例为 `.example.tsx` 导出 React 组件为默认导出的文件 :

```tsx
// app/components/button/button.example.tsx
import { Button } from './button';

export default function ButtonExample() {
  return <Button>Click me</Button>;
}
```

当您在 Dazl 中打开工程时, 它会自动发现这些文件并提供一个列出所有示例的菜单, 允许您预览它们 .

## 使用量

### 将实例与章节组织起来

使用 `Section` 在单个文件中分组相关示例的组件 :

```tsx
// app/components/button/button.example.tsx
import { Section } from '@dazl/component-gallery';
import { Button } from './button';

export default function ButtonExample() {
  return (
    <>
      <Section layout="row">
        <Section.Title>Sizes</Section.Title>
        <Button size="sm">Small</Button>
        <Button size="md">Medium</Button>
        <Button size="lg">Large</Button>
      </Section>

      <Section layout="column">
        <Section.Title>States</Section.Title>
        <Button disabled>Disabled</Button>
        <Button loading>Loading</Button>
      </Section>
    </>
  );
}
```

## 常见问题

### @dazl/component-gallery 是什么？

在 Dazl 内的画廊中查看您的组件

### 如何安装 @dazl/component-gallery？

在项目目录运行 npm install @dazl/component-gallery，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dazl/component-gallery 支持 TypeScript 吗？

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

### @dazl/component-gallery 支持 ESM 还是 CommonJS？

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

### @dazl/component-gallery 可以商用吗？

@dazl/component-gallery 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dazl/component-gallery 的下载量有多少？

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

### @dazl/component-gallery 还在维护吗？

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