# @delightstack/components 中文文档

规范地址：https://npmcn.com/package/%40delightstack/components/

版本：2\.2\.0
npm 元数据更新时间：2026-11-11T19:08:23.527Z
中文译文更新时间：2026-11-12T07:09:17.538Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40delightstack/components
原文对照：https://npmcn.com/package/%40delightstack/components/?lang=original
项目主页：https://docs.thedelight.co/
源码仓库：https://github.com/brianschwabauer/delightstack

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

- 包体积（解压后）：1.9 MB，222 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：three \>=0\.150\.0，hls\.js \>=1\.4\.0，svelte ^5\.36\.0，pdfjs-dist \>=4\.0\.0，@delightstack/styles ^1\.3\.1
- 首次发布：2026-06-28T19:30:35.634Z
- 最新版本发布：2026-11-11T19:08:23.209Z
- 近 30 天下载量：2702（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：34（近 12 个月 34 个）

## 中文简介

Delightstack Svelte 5 组件库——无障碍动作,形式,媒体,导航,反馈,并显示组件.

## 安装

```sh
npm install @delightstack/components
```

也可以使用：`pnpm add @delightstack/components`、`yarn add @delightstack/components`、`bun add @delightstack/components`

## README

# @ delightstack/ 组件

一个被打磨的 有意见的 [斯维尔特5号](https://svelte.dev/) 部分图书馆侧重于令人愉快 用户体验——50+可访问,可主题的组件以runes为基础,带有运动和 微互动从一开始就设计进去.

**文档 :** [(原始内容存档于2018-10-21) (英语). docs. the delight.co](https://docs.thedelight.co/) • 妇女 **现场演示 :** [(原始内容存档于2018-03-26). docs.thedelight.co/demo](https://docs.thedelight.co/demo/)

## 安装

```bash
pnpm add @delightstack/components @delightstack/styles
```

在您的应用程序根部导入设计符( 例如 ) . `src/routes/+layout.svelte`:

```ts
import '@delightstack/styles';
```

需要斯维尔特 `^5.36.0`. 与 SvelteKit 和独立 Vite + Svelte 项目合作.

## 使用量

所有组件都可以从单一的导入中获取——未使用组件为树形:

```svelte
<script>
    import { Button, Input, BottomSheet } from '@delightstack/components';

    let name = $state('');
    let open = $state(false);

    async function save() {
        await fetch('/api/user', { method: 'POST', body: JSON.stringify({ name }) });
    }
</script>

<Input label="Name" bind:value={name} />
<!-- Promise-returning callbacks show a loading state automatically -->
<Button onclick={save}>Save</Button>
<Button outline onclick={() => (open = true)}>Filters</Button>

<BottomSheet bind:open snap_points={[0.5, 0.92]}>
    <p>Slide me around.</p>
</BottomSheet>
```

### 公约

-   **道具为蛇 case,回调为骆驼Case** —— 说 `snap_points`, (中文(简体) ), `full_width` 对 `onclick`, (中文(简体) ), `onchange`. 数据与行为的视觉区分是故意的.
-   **召回道具, 不发送事件 .** 返回承诺的回话会设置组件 直到他们安顿下来.
-   **双向绑定** 与 `bind:value`,加特定组件的可绑定物,如 `bind:open`, (中文(简体) ), `bind:snap`,以及 `bind:page`。 。 。 .
-   **显示5个片段** 用于命名的内容区域( c)`{#snippet header()}…{/snippet}`) (中文(简体) ).

## 构成部分

| 类别 | 构成部分 |
| --- | --- |
| **行动** | 按钮、按钮组、 Modal、 提醒、 弹出器、 背景菜单、 门户、 命令Palette、 主题Togle |
| **显示** | Agion, Avatar, Avatar Group, 日历, 图表, 代码, 比较, 计数器, 扩展, 列表, 列表项目, QR, SplitPane, Stat, 表, 时间线, 树, 打字机 |
| **反馈** | 卡罗特、康佛提、进步、托阿斯特(图)`toast()`(中文(简体) ) |
| **表单** | 复选框、 字段集、 文件加载、 窗体、 输入、 无线电、 无线电组、 范围、 评分、 选择、 切换 |
| **媒体** | 木马、相册、图像、全景、PDF、视频 |
| **导航** | 下盖、 面包屑、 花边、 台阶、 标签 |

每个组件都有一个 docs页面,有活的示例和完整的道具/事件/CSS变量/ 无障碍表格: [docs.thedelight.co/组件/概览](https://docs.thedelight.co/components/overview/)。 。 。 .

## 他们

从 CSS 自定义属性读取每个颜色、大小和运动值 [`@delightstack/styles`](https://www.npmjs.com/package/@delightstack/styles),带有光和暗 内置的值。 通过超越品牌种子或任何单个标志来重新确定主题:

```css
:root {
    /* Re-derives the whole palette from one brand color */
    --color-primary: #2563eb;

    /* …or override individual semantic tokens outright */
    --color-action: light-dark(#2563eb, #3b82f6);
    --radius-md: 0.5rem;
}
```

见 [他们](https://docs.thedelight.co/guides/theming/) 财务报告和审定财务报表 [设计托肯斯](https://docs.thedelight.co/guides/design-tokens/) 向导.

## 可选的同伴依赖关系

少数媒体组件动态地导入更重的库——只有当您使用此工具时才安装它们 组件,并从它们的专用子路径中导入这两个:

| 构成部分 | 同伴依赖关系 | 从 |
| --- | --- | --- |
| `Panorama` | `three` | `@delightstack/components/panorama` |
| `PDF` | `pdfjs-dist` | `@delightstack/components/pdf` |
| `Video` | `hls.js` (仅限HLS来源) | `@delightstack/components` |

在 Vite dev 中,添加您使用的 `optimizeDeps.include` 故他们不因不在场而遭殃 可选依赖关系.

## 类型脚本

类型包括:无 `@types/*` 需要软件包。 主干船数据结构类型 切入点 :

```ts
import type { SelectOption, TableColumn, TreeNode, CalendarEvent } from '@delightstack/components';
```

包裹也装满了 `.svelte` 来源 `dist/`,因此编辑(和AI代理)得到 JSDoc对每个道具的描述.

## 测试

软件包的大部分逻辑都存在于 **纯模块** 与组件一起输出 - `diff-model.ts`, (中文(简体) ), `selection.ts` - 和那些携带 大部分测试: 没有活塞,没有DOM, 和可以逐行提出的规则.

这里没有DOM测试环境. 当行为真正属于 _组件_ 财务报告和审定财务报表 在服务器上显示并显示标记:

```ts
import { render } from 'svelte/server';
import DiffViewer from './DiffViewer.svelte';

const html = render(DiffViewer, { props: { hunks } }).body;
```

`DiffViewer.test.ts` 这是先例——它检查一个动作的箭头方向,即 问两行在页面上相对坐在哪里,所以没有答案 型号。 仅针对这种案件,如果可以对纯子提出主张 换成模型,让它在那里.

## AI 编码代理

设置 Claude Code, Cursor, Codex 和好友 在一个命令中正确使用此库 您的项目根 :

```bash
pnpm exec delightstack-agents
```

安装现成技能(`.claude/skills/delightstack/SKILL.md`并点出您的 `AGENTS.md` 临Τ Docs 也作为平面标记下发布 – 附加 `.md` 到任何文件页 URL, 或从 [文件.delight.co/llms.txt](https://docs.thedelight.co/llms.txt)见 [AI 代理指南](https://docs.thedelight.co/guides/ai-agents/)。 。 。 .

## 许可证

麻省理工学院

## 常见问题

### @delightstack/components 是什么？

Delightstack Svelte 5 组件库——无障碍动作,形式,媒体,导航,反馈,并显示组件\.

### 如何安装 @delightstack/components？

在项目目录运行 npm install @delightstack/components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.36\.0）、@delightstack/styles（^1\.3\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 delightstack-agents，可以用 npx delightstack-agents 直接运行。

### @delightstack/components 支持 TypeScript 吗？

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

### @delightstack/components 支持 ESM 还是 CommonJS？

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

### @delightstack/components 可以商用吗？

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

### @delightstack/components 的下载量有多少？

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

### @delightstack/components 还在维护吗？

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