@ delightstack/ 组件
一个被打磨的 有意见的 斯维尔特5号 部分图书馆侧重于令人愉快 用户体验——50+可访问,可主题的组件以runes为基础,带有运动和 微互动从一开始就设计进去.
文档 : (原始内容存档于2018-10-21) (英语). docs. the delight.co • 妇女 现场演示 : (原始内容存档于2018-03-26). docs.thedelight.co/demo
安装
pnpm add @delightstack/components @delightstack/styles
在您的应用程序根部导入设计符( 例如 ) . src/routes/+layout.svelte:
import '@delightstack/styles';
需要斯维尔特 ^5.36.0. 与 SvelteKit 和独立 Vite + 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/组件/概览。 。 。 .
他们
从 CSS 自定义属性读取每个颜色、大小和运动值
@delightstack/styles,带有光和暗
内置的值。 通过超越品牌种子或任何单个标志来重新确定主题:
: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;
}
可选的同伴依赖关系
少数媒体组件动态地导入更重的库——只有当您使用此工具时才安装它们 组件,并从它们的专用子路径中导入这两个:
| 构成部分 | 同伴依赖关系 | 从 |
|---|---|---|
Panorama | three | @delightstack/components/panorama |
PDF | pdfjs-dist | @delightstack/components/pdf |
Video | hls.js (仅限HLS来源) | @delightstack/components |
在 Vite dev 中,添加您使用的 optimizeDeps.include 故他们不因不在场而遭殃
可选依赖关系.
类型脚本
类型包括:无 @types/* 需要软件包。 主干船数据结构类型
切入点 :
import type { SelectOption, TableColumn, TreeNode, CalendarEvent } from '@delightstack/components';
包裹也装满了 .svelte 来源 dist/,因此编辑(和AI代理)得到
JSDoc对每个道具的描述.
测试
软件包的大部分逻辑都存在于 纯模块 与组件一起输出 -
diff-model.ts, (中文(简体) ), selection.ts - 和那些携带 大部分测试: 没有活塞,没有DOM,
和可以逐行提出的规则.
这里没有DOM测试环境. 当行为真正属于 组件 财务报告和审定财务报表 在服务器上显示并显示标记:
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 和好友 在一个命令中正确使用此库 您的项目根 :
pnpm exec delightstack-agents
安装现成技能(.claude/skills/delightstack/SKILL.md并点出您的
AGENTS.md 临Τ Docs 也作为平面标记下发布 – 附加 .md 到任何文件页 URL,
或从 文件.delight.co/llms.txt见
AI 代理指南。 。 。 .
许可证
麻省理工学院