闲暇日
联合国 • 妇女 印度尼西亚
更给德夫们自由的日子. UI装备已经准备好使用.
一个由符号驱动,框架不可知的UI包. 一种真实的来源 颜色,打字,
间隔和组件。 蓝图 : docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md。 。 。 .
生活参考文献: (原始内容存档于2017-03-26) (英语). cahyo-dimas.github.io/freeday-ui-kit,或打开 docs/index.html 直接在浏览器中.
🚀 开始一个项目? 每堆步骤( HTML ) :
docs/getting-started.md。 。 。 .📘 哪个阶级存在,它的标记是什么? 整个公共表面在一个平面文件中:
COMPONENTS.md。 。 。 . 要联系哪一个,以及何时:USAGE.md。 。 。 . 集成的全屏幕:docs/reference-screen.html。 。 。 .🤖 建筑用人工智能代理(或气相编码)? 没有模特知道Freeday的训练,所以给它
docs/agent-onboarding.md(备妥项目说明+) a 移徙绘图表).
构建
node tokens/build.mjs # tokens.json -> dist/freeday.tokens.css; bundles dist/freeday.css;
# dist/freeday.bundle.css (tokens+components); copies dist/*.js + dist/freeday.js
npm test # build-transform tests + WCAG contrast (node:test)
dist/ 所以消费者不必自己建造.
用于项目
第一,哪个入口是你的?
大部分Freeday是标记+ fdy-* 和所有地方一样. 十一个互动
组件还装有打字包装. 在这些堆栈中,用包装来代替生标记 +
增强器 :
| 你的堆叠 | 导入十一 | 装订 |
|---|---|---|
| 第3组 | @cahyo-dimas/freeday/vue | v-model |
| 反应18/19 | @cahyo-dimas/freeday/react | value + 键 onChange |
| 布拉佐尔(净额8.0) | Freeday.Blazor RCL 语言 | @bind-Value |
| 静态 HTML \ svelte \ 服务器发送模板 | (没有包装) 原始标记+增强器,下方 | fdy-* 事件 |
十三点: FdyCombo • 妇女 FdyDatepicker • 妇女 FdyMonthpicker • 妇女 FdyDateRange • 妇女 FdyTimepicker • 妇女
FdyAutocomplete • 妇女 FdyCascade • 妇女 FdyCfl • 妇女 FdyChart • 妇女 FdyTable • 妇女 FdyModal • 妇女 FdyDrawer • 妇女 FdyAppShell。 。 。 .
手写原始
在Vue/React/Blazor内加价 看着 一开始是好的,因为第一个解释是正确的.
然后它悄悄地破裂:
DOM 框架后来生成的状态从未被水分化过,部件状态最终会变成DOM
你的框架。 其他一切(按钮、卡片、徽章、警示、桌子加分、布局和
没有包装的交互式组件)是每堆中相同的平面标记. 给后者加水
与 useFreeday (声音/反应)或 FreedayBlazor.initAll (布拉佐尔. 每个堆栈的完整行走 :
docs/getting-started.md。 。 。 .
作为包件(Vue/React/Brazor/Vite,或任何带有捆绑器的项目):
npm i @cahyo-dimas/freeday
import '@cahyo-dimas/freeday/css'; // tokens + components (single file)
import '@cahyo-dimas/freeday'; // all JS enhancers (auto-init [data-fdy-*])
// granular if needed: '@cahyo-dimas/freeday/tokens' · '@cahyo-dimas/freeday/css/components' · '@cahyo-dimas/freeday/enhancers/<name>' · '@cahyo-dimas/freeday/media' (@custom-media breakpoints)
设置您的应用根的主题 : <html data-theme="light" data-density="comfortable">。 。 。 . dist/ 实值
承诺并公布,因此安装需要 无建设步骤微分化留给消费者
bundle. 因为它是在 公开 npm, (中文(简体) ), npm ci 在 CI 中运行,没有认证或 SSH 密钥 .
从源( 无登记) :
npm i github:cahyo-dimas/freeday-ui-kit。 。 。 .
或者直接链接文件( 无构建 ) :
1. 包括中央支助系统(需要)
<html lang="en" data-theme="light" data-density="comfortable">
<link rel="stylesheet" href="dist/freeday.tokens.css"> <!-- tokens: color, spacing, etc. -->
<link rel="stylesheet" href="dist/freeday.css"> <!-- fdy-* components -->
组件类别为前缀 fdy- (例如:. fdy-btn, (中文(简体) ), fdy-card, (中文(简体) ), fdy-badge) (中文(简体) ). 直接使用它们
在任意框架的标记中:Vue、React、Blazor或平面 HTML.
装入字体 。 包裹没有. 类型符号名称 空难 编号 : IBM Plex 桑斯 编号 : 摩诺 但是 Freeday 没有捆绑字体文件 。 装入(例如).
@import '@fontsource/sora/700.css'...)或覆盖--font-display编号 :--font-body编号 :--font-mono。否则工具箱将在系统中制作 后退,看起来没有完成。 见docs/getting-started.md§ 核心概念。 。 。 .
当 时使用哪一种标志/作用
USAGE.md。 。 。 . Freeday 执行一致 数值· ;USAGE.md是理论 也使 决定 一致:类型角色(.fdy-title-page/-section/-card, (中文(简体) ), 间距节奏、高程、每屏一等--tone-1…8绝对调色板和页面 原始成分(.fdy-page, (中文(简体) ),.fdy-page-section, (中文(简体) ),.fdy-stats) (中文(简体) ). 每个应用都开始于.fdy-app。 。 。 .
范围:组件+符号,不是布局. Freedday 拥有组件和设计符;唯一的 布局帮助是
.fdy-hidden编号 :.fdy-visually-hidden加上上面的分页原始. 带上你自己的电网层 用公用框架对等( Tailwind, UnoCSS...) 运行 仅限水电费 飞行前关闭 (免费)base.css是重设.base.css是一个 光线 重置( 它没有) 脱去ul编号 :ol编号 :p边距,所以使用.fdy-list-reset或 Freeday 列表组件),以及 间距/射线/时间尺度是公共定制属性(--space-0.--space-24,... ) 你能够 将您的工具主题构建到 。 完整注释 :docs/getting-started.md§ 核心概念。 。 。 .
.fdy-btn实值 已经 主按钮。 没有分开.fdy-btn--primary修饰相. 其他变体的修改器:--ghost, (中文(简体) ),--danger, (中文(简体) ),--text, (中文(简体) ),--sm, (中文(简体) ),--lg, (中文(简体) ),--icon(见docs/index.html) (中文(简体) ).
2. 包括联署材料增强者(可选、零依赖)
交互式组件( 下拉、 标签、 表格、 从列表中选择、 摘取日期、 上传、 土司) 需要 联合来文。 两种方式:
<!-- a) one bundle with every enhancer -->
<script src="dist/freeday.js" defer></script>
<!-- b) or pick only the per-file ones you use -->
<script src="dist/freeday-select.js" defer></script> <!-- [data-fdy-combo] -->
<script src="dist/freeday-tabs.js" defer></script> <!-- [data-fdy-tabs] -->
<script src="dist/freeday-table.js" defer></script> <!-- [data-fdy-table] -->
<script src="dist/freeday-cfl.js" defer></script> <!-- [data-fdy-cfl] + <dialog> -->
<script src="dist/freeday-datepicker.js" defer></script> <!-- [data-fdy-datepicker] -->
<script src="dist/freeday-upload.js" defer></script> <!-- [data-fdy-dropzone] -->
<script src="dist/freeday-toast.js" defer></script> <!-- Freeday.toast({...}) -->
每个自动输入 [data-fdy-*] 打开 DOMContentLoaded他们有天分,他们退化到
当脚本从不加载时, 直接标记 .
| 增强器 | 标记钩 | 事件/ API |
|---|---|---|
freeday-select | [data-fdy-combo] | fdy-change {value} • 妇女 window.FreedayCombo |
freeday-tabs | [data-fdy-tabs] | window.FreedayTabs |
freeday-table | [data-fdy-table] (+ 数) [data-fdy-filter], (中文(简体) ), [data-fdy-table-bulk](中文(简体) ) | fdy-table-change • 妇女 window.FreedayTable |
freeday-cfl | [data-fdy-cfl] → <dialog> | fdy-cfl-select {row}编号 :{rows} • 妇女 window.FreedayCfl |
freeday-datepicker | [data-fdy-datepicker], (中文(简体) ), [data-fdy-daterange] | fdy-datepicker-change {value,date} • 妇女 window.FreedayDatepicker |
freeday-timepicker | [data-fdy-timepicker] | fdy-time-select {value} • 妇女 window.FreedayTimepicker |
freeday-datetime | [data-fdy-datetimepicker] | fdy-datetime-change {date,time,value} • 妇女 window.FreedayDatetime |
freeday-cascade | [data-fdy-cascade] (已注销) <ul> 模式) | fdy-cascade-change {value,path,labels} • 妇女 window.FreedayCascade |
freeday-mask | [data-fdy-mask], (中文(简体) ), [data-fdy-password] | fdy-mask {value,raw} • 妇女 window.FreedayMask |
freeday-number | [data-fdy-number] | ——(本国) input编号 :change· window.FreedayNumber |
freeday-form | [data-fdy-validate] (单位:千美元) | fdy-form-invalid编号 :-valid • 妇女 window.FreedayForm |
freeday-chip | [data-fdy-chips], (中文(简体) ), .fdy-chip__remove | fdy-chip-change编号 :fdy-chip-remove • 妇女 window.FreedayChip |
freeday-upload | [data-fdy-dropzone] | fdy-upload-add编号 :-remove • 妇女 window.FreedayUpload |
freeday-toast | —— 说 | Freeday.toast({variant,title,message,timeout}) |
宽表(多列)需要横向卷轴的包装: 包 .fdy-table 内
.fdy-table-wrap (标准表,包括边框+阴影外壳)或 .fdy-table-scroll
(平面卷轴,没有外壳,所以独立运作或内部运作) .fdy-datatable,它已经有自己的
边框/阴影外壳)。 没有这些包装,一个宽的桌子 溢出它的容器
以卷轴的方式.
3. 铁道: 三轴通航 data-* 在树根上
data-theme="light|dark"重新定义语义符号( 将它与您的应用程序的主题状态结合) . 有关工作 任何祖先,不仅仅是根:<section data-theme="dark">反转那个区域 以及其中每个部分USAGE.md第5b条.data-density="comfortable|compact"设置控制高度( e)--control-h)用于数据密集屏幕. 这种自动应用只用于 Freeday 的内置控制(按钮,输入,组合等); 自定义/手建组件必须读取--control-h(例如:.height: var(--control-h)(中文(简体) ) 收缩或生长data-density变化.- (路图)
data-style用于替代视觉变体. - 断点比例尺( 以
sm编号 :md编号 :lg编号 :xl= 600/960/12080/1920px, 匹配电源src/components/breakpoints.css使用两种语言的应用程序:import { breakpoints } from '@cahyo-dimas/freeday/breakpoints'联合来文matchMedia,功能变体),, 财务报告和审定财务报表@import '@cahyo-dimas/freeday/media'中央支助系统,宣布每个中心为@custom-media所以规则是@media (--fdy-below-sm)而不是重打的字元(需要 PostCSS; 选入) . 对象还带有两个宽度: 没有 斜坡台阶,不得四舍五入为一:nav(721,外壳的抽屉--sidebar开关)和filterbar(640起.fdy-filterbar堆栈)。 见COMPONENTS.md各执一法.
框架一体化(SPA)
完整库映射 :
docs/integrations.md每一个区域(形式/验证, 图表、表格、日期、叠加等) (Zod/Yup, Chart.js, TanStack Table, date-fns, Floating UI,.),外加如何桥接它和TanStack Table, Date-fns, Floating UI, Vue/React/Blazor绑定. 启动新项目时读取.
为Vue,React和Blazor准备的适配器. 所有薄:增强者保持真理的来源; 适配器只有水合物和桥梁事件。 每艘船都有一个工作 发票 屏幕 :
// Vue 3: @cahyo-dimas/freeday/vue
import { useFreeday } from '@cahyo-dimas/freeday/vue';
const root = ref<HTMLElement | null>(null);
useFreeday(root); // @fdy-cascade-change="…" (typed detail)
// React: @cahyo-dimas/freeday/react
import { useFreeday } from '@cahyo-dimas/freeday/react';
const root = useRef<HTMLDivElement>(null);
useFreeday(root); // fdy-* events bubble → listen at the root
@* Blazor: Freeday.Blazor RCL (net8.0), native typed <FdyX> with @bind, 11/11 parity *@
@using Freeday.Blazor
<FdyCombo TValue="string" @bind-Value="_status" Options="_statusOptions" AriaLabelledby="lbl" />
<FdyTable TRow="Invoice" Columns="_cols" Rows="_rows" RowKey="@(i => i.Code)" PageSize="10" />
@* Fallback for raw markup: window.FreedayBlazor.initAll / .on interop *@
| 框架 | 适配器 | 实例 |
|---|---|---|
| 第3组 | @cahyo-dimas/freeday/vue (单位:千美元)useFreeday + 键 v-model 构成部分) | examples/vue-faktur/ (单位:千美元)npm install && npm run dev(中文(简体) ) |
| 反应 19 | @cahyo-dimas/freeday/react (单位:千美元)useFreeday + 键 value编号 :onChange 构成部分) | examples/react-faktur/ (单位:千美元)npm install && npm run dev(中文(简体) ) |
| 布拉佐尔·瓦斯姆(净额8.0) | Freeday.Blazor RCL (英语:<FdyX> + 键 @bind· /blazor 接口 | examples/blazor-faktur/ (单位:千美元)dotnet run(中文(简体) ) |
完整的库图和图案 : docs/integrations.md。 。 。 .
增强器自动点火一次上膛。 DOM 动态渲染( Vue/ react/ Blazor) :
- 重用增强器 : 在挂载或路由更改后,拨打
window.FreedayTable.initAll(el)(或全球initAll()) (中文(简体) ). 安全地重复一遍,因为每个入口都由一面一等的旗帜守卫。 桥 以框架状态通过它所显示的事件(例如,倾听)fdy-cfl-select, (中文(简体) ),fdy-datepicker-change) (中文(简体) ). - 或复执行: 写入您自己的框架组件, 保持不变 标记 + ARIA
合同+
fdy-*类 (见docs/index.html) (中文(简体) ). 增强器是参考 执行,而不是一项要求。 对于从列表中选择的,使其成为一个可控组件 (单位:千美元)fetchPagecallback + 服务器缓存),而不是镜像到一个全局商店.
接通规则:3级(不打破)
Tier 1 PRIMITIVE raw ramp (--azure-600…), NEVER used in components
Tier 2 SEMANTIC roles (--color-primary, --color-surface…), change on theme & re-brand
Tier 3 COMPONENT --fdy-<component>-<prop>, optional local override
组件只触及第2/3级。 需要一个新的值 = 组成 = 扩展修改 = 后再创建 .
Repo 结构
tokens/tokens.json source of truth (edit here)
tokens/build.mjs generator (pure Node, zero dependencies)
src/base.css reset + utilities
src/components/*.css one file per component (fdy-*)
src/*.js optional JS enhancers (reference, vanilla)
dist/ build output (COMMITTED):
freeday.tokens.css semantic tokens (light/dark/compact)
freeday.css every component (NO tokens)
freeday.bundle.css tokens + components, link this one
freeday.js bundle of every enhancer (single <script>)
freeday-*.js per-file enhancers
COMPONENTS.md every class + markup skeleton + a11y contract
USAGE.md the usage doctrine (which token/role when)
docs/index.html living reference / demo site
docs/reference-screen.html one complete screen, assembled
docs/agent-onboarding.md onboarding for AI coding agents
docs/screen-states.md the screens and states every app needs (404, empty, loading…)
reference/ input material, never shipped (port source + layout archetypes)
构成部分库存
- 基金会: 语义颜色、打字法(Sora/IBM Plex Sans/JetBrains Mono),4px间隔 范围、半径和高地、运动、无障碍清单.
- 动作窗体( F) : 按钮,输入(+error),输入组(货币/%/icon),
复选框/收音机/开关, 选择
fdy-combo(APG), 自动补全, (中文(简体) ), 级联选择 (等级钻入-下), 从列表中选择 (外地+单一/多对话框), 日期/ 时间/ 日期取取器, (中文(简体) ), 文件上传 (投放区+每个文件状态), 密码显示 + 输入口罩, (中文(简体) ), 窗体验证 (限制验证 API ) – 可访问 错误). - 数据 : 表格中, 数据表 (搜索 ) 排序 每栏过滤器 文本/enum/数字 \ 批量 动作 · 标记 · 选择),状态(空/装入/错误).
- 反馈 : 警报,土司,工具提示. 导航 : 塔克,面包屑,花纹.
- 显示 : 纸牌、徽章、相机、芯片(默认/可移动选择 -- -- 过滤器),描述列表, 进步,旋转,骨架.
- 布局 : 应用外壳,手风琴
<details>)),模式(本土<dialog>(原始内容存档于2017-03-29) (中文(简体) ). diader, kbd.
无障碍
WCAG AA 对比度( 光和暗), 由自动审计 test/contrast.test.mjs:它解决
符号图,复合材料半透明 -soft 填满地表,执行每对
(正文4.5:1;控制边框/图标3:1,WCAG 1.4.11). 表格控制边界使用
--color-control-border (≥3:1);装饰性边界故意更轻. :focus-visible 实值
总是可见, 本地 HTML 来之前 ARIA, 交互式组件遵循 WAI- ARIA APG
模式,以及 prefers-reduced-motion 受到尊重。 地位从不单靠颜色来传达. 见
“可获取性”部分 docs/index.html。 。 。 .
浏览器支持
Chrome 105-Safari 15.4-火狐 121. 楼层由 :has()以《古兰经》第15.4条盟誓
创造本地人 <dialog>编号 :::backdrop 财务报告和审定财务报表 accent-color。 。 。 . conic-gradient 财务报告和审定财务报表 scroll-snap
年纪还比较大.
test/baseline.test.mjs 从上面的行中读取这三个数字,列出CSS
特性同时使用已运出样式表, 当其中之一需要发布时则失败
到达。 在测试之前 地板是没人能执行的句子 在那天
一天之内,有5次发布,其中4次修复了发现的Safari缺陷
发运后iPhone 7.
color-mix() 曾经把地板设置在Safari 16.4, 它不再这样做。 这从不值得:
混合符号的宣告 var(),因此它假设在解析时有效,并且仅
无法在计算值时, 财产会降至 初次 数值改为
后退线 在iOS 15上停放的iPhone上 17岁 border-color 声明为
currentColor它是一个粗黑的轮廓 大致上的一切。 包里的每个阿尔法现在
写入 rgba(var(--color-primary-rgb), .26)和Safari 9的颜色相同;
无法静态解答的四项规则 @supports 对应单位.
test/color-mix.test.mjs 保持下一个诚实.
包里最新鲜的东西 故意穿过那层楼 每层都列出
test/baseline.test.mjs 与下层浏览器的损失:
@container从列表中选择对话框中设置了@supports,以及一个视图宽度媒体 查询将下面的行堆放。 后退无法看到的情况是 内部的狭义对话框 宽取景口,即桌面上一个已停靠的面板,对话框将保持滚动 桌子上总是有.@starting-style编辑allow-discrete转换方式和抽屉。 下面 跳过规则的下层,然后在解析时将快手放下,这样既打开又关闭 没有动画, 总是在他们的结束状态 从来没有一半.text-wrap: balance平衡两个标题类别。 没有它,一个头包 它过去.overscroll-behavior: contain在导航和粘贴页栏杆的末端停止滚动. 没有它,滚动 继续进入后面的页面, 它的方式在财产之前 已经存在。 Safari 16以下没有CSS的替代物;替代物是JS的卷轴锁 这个外壳是故意的.scrollbar-width: none隐藏旋转木马卷轴条,带有::-webkit-scrollbar边干边干 和地板里的每个WebKit一样.100dvh从960px的屏幕上盖起粘着的栏杆. 萨法里从会场开始就拥有这个单元 释放自己,所以地板上唯一没有引擎的 是三个Chrome释放 在它降落在那里之前, 上面的盖子就消失了, 长长的一面从取景口长出 而不是在内部滚动.
后空投模糊用途 -webkit-backdrop-filter + 键 backdrop-filter,以及 user-select 携带其
-webkit- 双相同相. 同样的测试表明两种配对按规则进行,所以标准
财产从不单独出动 没有CSS的构建或自动前置步骤,所以支持下面的任何东西
地板是消费者的责任.
许可证
麻省理工学院 2026 Cahyo D. Kurnianto. (英语). 自由使用、修改和分发,只要 包括版权行和许可证文本.