@archetypeai/ds-ui-svelte-labs (英语)
人工智能设计系统的原始实验室 实验性0.x级 在冰冻地上建造 @archetypeai/ds-ui-svelte-console 基础。 Svelte 5 原始人风格与 Tailwind v4 和 tailwind-variants,连接到 @archetypeai/ds-lib-tokens 主题,构建控制台原始(按钮、卡片、徽章),其中需要稳定的构件。 类型脚本源船为 .svelte 文件(没有预编译),因此消费者可以得到完整的类型检查和IDE去定义.
实验室版本为"0.x":破解更改是小版本之间的合同. 证明自己已进入控制台的组件,控制台本身从未改变过以容纳实验室.
像控制台一样,实验室的口味从同一个来源出发有两种方式:
- npm 软件包 (此文档的默认) - 如何应用 消费 原始人:他们留在
node_modules,导入的每个子路径,按版本起伏更新。 包裹是真理的来源. - 阴影滚动注册 - 原始人如何变得 修改或延长: 将原始的可编辑源拖入您的应用程序, 更改它, 然后将更改移植回软件包中 .
安装
npm i @archetypeai/ds-ui-svelte-labs @archetypeai/ds-ui-svelte-console
然后安装所有子路径共享的对等依赖性 :
npm i svelte tailwindcss bits-ui tailwind-variants tailwind-merge clsx @lucide/svelte @archetypeai/ds-lib-tokens
异端端依赖性
Chart-family子路径额外要求重可视化同位素,其他子路径永远不会加载(它们被宣布为可选同位素,因此npm不会自动安装它们):
| 子路径 | 额外对等器 |
|---|---|
primitives/chart | layerchart |
primitives/scatter-chart | layerchart, (中文(简体) ), d3-scale |
primitives/sensor-chart | layerchart, (中文(简体) ), d3-scale, (中文(简体) ), d3-shape |
npm i [email protected] d3-scale d3-shape
layerchart 被绑定在一个精确的2.0预发版——预发版在构件之间打破API,所以安装被绑定的版本(labs为0.x-churn here is in-contract).
尾风 v4 设置( 强制)
尾风 v4 不扫描 node_modules 默认。 没有 @source 下面指令,本套件的每个类别在消费者建造时间被清洗,部件则不作样式.
在你的消费者 app.css,按此顺序:
@import 'tailwindcss';
@import '@archetypeai/ds-lib-tokens/theme.css';
@source "../node_modules/@archetypeai/ds-ui-svelte-console/dist";
@source "../node_modules/@archetypeai/ds-ui-svelte-labs/dist";
秩序事项:
tailwindcss登记引擎.@archetypeai/ds-lib-tokens/theme.css宣告组件类所消耗的 CSS 变量 .- 两者
@source指令使Tailwind扫描两个包 - 实验室组件构成控制台原始,所以两个干子都必须被扫描.
调整 @source 如果您的路径 app.css 在别处生活 他们必须下定决心 dist/ 目录.
类型脚本设置
在你的消费者 tsconfig.json (或 jsconfig.json),设置:
{
"compilerOptions": {
"moduleResolution": "bundler"
}
}
"node16" 财务报告和审定财务报表 "nodenext" 还有工作 没有这些 types 此软件包中的条件 exports 地图被绕过,类型返回到 default JS文件 编辑功能退化了.
使用量
每个原始人都生活在自己的后路 没有枪管 import { Logo } from '@archetypeai/ds-ui-svelte-labs' - 子路径保持 layerchart 和d3包 出捆 消费者谁从来没有触摸图表原始.
<script lang="ts">
import Logo from '@archetypeai/ds-ui-svelte-labs/primitives/logo'
import Menubar from '@archetypeai/ds-ui-svelte-labs/primitives/menubar'
import Slider from '@archetypeai/ds-ui-svelte-labs/primitives/slider'
let volume = $state(50)
</script>
<Menubar />
<Logo size="lg" />
<Logo variant="compact" />
<Slider type="single" bind:value={volume} max={100} />
普通亚道
| 初级 | 导入路径 |
|---|---|
| 光谱Ratio | @archetypeai/ds-ui-svelte-labs/primitives/aspect-ratio |
| 图表 | @archetypeai/ds-ui-svelte-labs/primitives/chart |
| 宽度 | @archetypeai/ds-ui-svelte-labs/primitives/kbd |
| 标记 | @archetypeai/ds-ui-svelte-labs/primitives/logo |
| 菜单栏 | @archetypeai/ds-ui-svelte-labs/primitives/menubar |
| 散点图 | @archetypeai/ds-ui-svelte-labs/primitives/scatter-chart |
| 传感器图 | @archetypeai/ds-ui-svelte-labs/primitives/sensor-chart |
| 幻灯片 | @archetypeai/ds-ui-svelte-labs/primitives/slider |
| 切换 | @archetypeai/ds-ui-svelte-labs/primitives/switch |
| 切换 | @archetypeai/ds-ui-svelte-labs/primitives/toggle |
| 视频显示器 | @archetypeai/ds-ui-svelte-labs/primitives/video-player |
类合并和元素Ref 类型帮助器从控制台再导出 @archetypeai/ds-ui-svelte-labs/primitives/utils (单身) cn编号 :twMerge 实例存在于树上),与实验室域名助手(healthTier, (中文(简体) ), formatMMSS, (中文(简体) ), clamp) (中文(简体) ).
标识(原始/日志)
一个组件后面有两个艺术形式. variant="default" 是水平单词标记(~5.4:1);
variant="compact" 是堆叠的社交/avatar 锁(~1.6:1) - 在一个字签会使用的地方
不合适,例如平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面平面.
两种形式都一样 size 缩放 - sm | default | lg 地图到 h-4 | h-6 | h-8 - 说吧
取出它们的宽度 w-auto,所以互换变体会改变所渲染的宽度,永远不会改变
高点 因为这样, compact 读取小于 sm; 首选 default 或者说 lg,或以
class。 。 。 .
<Logo /> <!-- wordmark, h-6 -->
<Logo variant="compact" size="lg" /> <!-- stacked lockup, h-8 -->
<Logo variant="compact" class="h-16 w-auto" />
两种形式都是由 : currentColor (单位:千美元)text-foreground 默认),所以
他们颠倒主题,接受任何 text-* 超过。 无障碍名称是
"Archetype AI" 两者;通过 aria-label 编号 : role 当标记坐落在一个标记旁边时将覆盖
文本标识类型, 否则会双倍通知 .
视频播放器(原始/视频播放器)
寻找的赛道作为时间线加倍. markers 被命名为窗口 以秒计 (不计百分比)
以可聚焦点来绘制; 点击一个将它扩展为范围药丸, 寻求其
开始并开始播放。 一个是一次扩张, bind:activeMarker 是它的指数,和
通过手擦擦或点击视频表面会崩溃。 一个被扩大,另一个步骤
让开,包括指向事件.
<VideoPlayer
src={clip}
bind:time
bind:duration
bind:activeMarker
markers={[{ start: 12, end: 18, label: 'Approach' }]}
highlights={brushedWindows}
controlsVisibility="always"
onMarkerHover={(index) => (hovered = index)}
/>
controlsVisibility="always" 当重播时标记必须保持可点击性时,则需要:
默认 "auto" 关闭控制栏, 和标记它,2.5s英寸 对于连接刷子,
highlights 另一种观点是 onMarkerHover 下方报告标记
光标 键盘焦点。 。 。 .
两个陷阱 src 更改, 两者都从类型签名中隐去:
- 一个新的
src重挂载玩家,而斯维尔特的媒体绑定将您绑定的值写入 新鲜元素——如此重置time = 0财务报告和审定财务报表paused = true自己,或者一个僵硬的位置成为 下一个片段的开始. bind:duration将上一剪辑的值保存到loadedmetadata。 。 。 . 从有识之士那里得来的 如果标记几何必须在第一个框上正确,则长度;而duration每个标记为 0 向左边缘崩溃.
寻找标记还需要一个服务HTTP Range请求的源头——与一个没有, 默默无动于衷 提供一个blob URL的剪辑代替.
扩展控制台原始
实验室在不改变控制台的情况下对控制台原始人进行改造,使用这种逃生-抓取梯子(顺序为:
class控制台组件的道具覆盖data-slot消费者 CSS 中的属性选择器tv({ extend })在控制台的导出变体集群上- 实验室包装组件
此文档是软件包 README (由 prepack); 完整的设计系统文件在存储器的 读取我。 。 。 .