@ bitspark-ai/ 设计
Bitspark 设计系统 — 设计符号, Svelte 5 组件, 框架纯 UI 食谱和反应性显示时钟 在一个分解器下作为一个包裹运出.
从私人来源发表, 可安装, 无注册认证。 。 。 .
npm i @bitspark-ai/design
# Svelte 5 is a peer dependency — the consumer supplies it:
npm i svelte
快开始
装入符号 + 基准样式表一次( 需要- 组件通过 ,然后从桶中导入组件和公用事业:
// once, at your app root:
import '@bitspark-ai/design/css';
<script>
import { Button, DataTable, StatCard } from '@bitspark-ai/design';
import { clockDuration, staleness } from '@bitspark-ai/design';
</script>
<StatCard label="Uptime" value="99.98%" tone="success" />
<Button loading={submitting}>Publish</Button>
里面的东西
- 98个构成部分 ——原始人(按钮,徽章,图标,卡.),数据与公制表面
(数据表、StatCard、Meter、DecayMeter、Sparkline、BarChart...),导航和外壳
(Appshell, SideNav, MarketingNav, Breadcrumbs...),活生生的(LiveStatus Bar,活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活,
Liveness status, Lane / Lane Group / Connector Node...),以及更衣家族
(释放Feed,释放Banner...). 每个组件的元数据都可以通过机器读取
./catalog。 。 。 . - 设计符号 ——颜色,表面,间隔,类型,以及CSS自定义的运动符号
属性( e)
./css, (中文(简体) ),./*.css并且作为联署材料的数值(./tokens) (中文(简体) ). - UI 食谱动作( A) 小型、框架纯净、可树动的公用事业出口
从枪管:
- 格式化 —— 说
clockDuration, (中文(简体) ),formatBytes, (中文(简体) ),formatRelativeTime - 状态颜色( c) —— 说
classifyFreshness, (中文(简体) ),thresholdColor, (中文(简体) ),utilizationColor, (中文(简体) ),rowStateClasses, (中文(简体) ),deltaText - 规模收藏 —— 说
pressure(占用+热),staleness(时间~温暖~寒冷),adaptive(按人数计) - 动议 —— 说
use:travel(按键FLIP移动)和use:flight(来源-目标输入),加prefersReducedMotion, (中文(简体) ),valueChange, (中文(简体) ),motionMs - 导航( misc) —— 说
paginationMode, (中文(简体) ),collapseBreadcrumbs, (中文(简体) ),tabIndicator, (中文(简体) ),toastStore
- 格式化 —— 说
./time反应式显示时钟和时间格式(期限、相对时间、, 安全地在同一个铸币局下分享.
所有公用事业都装有完整的JSDoc;从 @bitspark-ai/design 和您的编辑器
显示签名.
子路径导出
| 导入 | 什麽 |
|---|---|
@bitspark-ai/design | 组件+配方+动作(桶) |
@bitspark-ai/design/css | 组合符号 + 基样式表( 导入一次) |
@bitspark-ai/design/tokens | 作为JS 输入值的设计符号 |
@bitspark-ai/design/base.css • 妇女 /motion.css • 妇女 /portal.css | 单个样式层 |
@bitspark-ai/design/time | 被动显示时钟+时间格式 |
@bitspark-ai/design/catalog | 可读元数据 |
@bitspark-ai/design/roles | 构成部分角色/实物分类 |
框架
与 svelte-package - 5艘源船 dist/ (不是预先编译的),所以
您的捆绑者在您的应用程序的 Svelte 上下文中编译它 。 丝绒 ^5.55.1 是一个
依赖性。组件为 框架纯度: 无 SvelteKit $app/* 进口 -
导航通过一个 resolveHref 任何Svelte 5的应用程序都可以使用
套装 CSS带副作用(sideEffects: ["**/*.css"]),所以你的捆绑者保留
在未使用 JS 时导入样式 .
许可证
UNLICENSED ——世界可安装,所有权利保留. 非开源; 可从
一个没有认证的私人来源。 术语见寄存器.