# @cahyo-dimas/freeday 中文文档

规范地址：https://npmcn.com/package/%40cahyo-dimas/freeday/

版本：3\.18\.0
npm 元数据更新时间：2026-11-06T18:07:53.882Z
中文译文更新时间：2026-11-08T23:24:43.478Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cahyo-dimas/freeday
原文对照：https://npmcn.com/package/%40cahyo-dimas/freeday/?lang=original
项目主页：https://cahyo-dimas.github.io/freeday-ui-kit/docs/
源码仓库：https://github.com/cahyo-dimas/freeday-ui-kit

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

- 包体积（解压后）：2.5 MB，196 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：0 个
- peer 依赖：vue ^3\.4\.0，react \>=18
- 首次发布：2026-07-27T03:31:42.380Z
- 最新版本发布：2026-11-06T18:07:53.349Z
- 近 30 天下载量：4387（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：84（近 12 个月 84 个）

## 中文简介

Freeday:由符号驱动,框架不可知的UI KIT(设计真实源).

## 安装

```sh
npm install @cahyo-dimas/freeday
```

也可以使用：`pnpm add @cahyo-dimas/freeday`、`yarn add @cahyo-dimas/freeday`、`bun add @cahyo-dimas/freeday`

## README

# 闲暇日

**联合国** • 妇女 [印度尼西亚](https://npmcn.com/package/%40cahyo-dimas/freeday/README.id.md)

> **更给德夫们自由的日子. UI装备已经准备好使用.**

[![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/) [![Release](https://img.shields.io/badge/release-v3.18.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.18.0)

一个由符号驱动,框架不可知的UI包. 一种真实的来源 颜色,打字, 间隔和组件。 蓝图 : `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`。 。 。 . **生活参考文献:** **[(原始内容存档于2017-03-26) (英语). cahyo-dimas.github.io/freeday-ui-kit](https://cahyo-dimas.github.io/freeday-ui-kit/)**,或打开 `docs/index.html` 直接在浏览器中.

> 🚀 **开始一个项目?** 每堆步骤( HTML ) : **[`docs/getting-started.md`](https://npmcn.com/package/%40cahyo-dimas/freeday/docs/getting-started.md)**。 。 。 .
> 
> 📘 **哪个阶级存在,它的标记是什么?** 整个公共表面在一个平面文件中: **[`COMPONENTS.md`](https://npmcn.com/package/%40cahyo-dimas/freeday/COMPONENTS.md)**。 。 。 . **要联系哪一个,以及何时:** **[`USAGE.md`](https://npmcn.com/package/%40cahyo-dimas/freeday/USAGE.md)**。 。 。 . 集成的全屏幕: **[`docs/reference-screen.html`](https://npmcn.com/package/%40cahyo-dimas/freeday/docs/reference-screen.html)**。 。 。 .
> 
> 🤖 **建筑用人工智能代理(或气相编码)?** 没有模特知道Freeday的训练,所以给它 **[`docs/agent-onboarding.md`](https://npmcn.com/package/%40cahyo-dimas/freeday/docs/agent-onboarding.md)** (备妥项目说明+) a 移徙绘图表).

## 构建

```bash
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`](https://npmcn.com/package/%40cahyo-dimas/freeday/docs/getting-started.md)。 。 。 .

**作为包件(Vue/React/Brazor/Vite,或任何带有捆绑器的项目):**

```bash
npm i @cahyo-dimas/freeday
```

```js
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
<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` § 核心概念](https://npmcn.com/package/%40cahyo-dimas/freeday/docs/getting-started.md)。 。 。 .

> **当 时使用哪一种标志/作用 [`USAGE.md`](https://npmcn.com/package/%40cahyo-dimas/freeday/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` § 核心概念](https://npmcn.com/package/%40cahyo-dimas/freeday/docs/getting-started.md)。 。 。 .

> `.fdy-btn` 实值 **已经** 主按钮。 没有分开 `.fdy-btn--primary` 修饰相. 其他变体的修改器: `--ghost`, (中文(简体) ), `--danger`, (中文(简体) ), `--text`, (中文(简体) ), `--sm`, (中文(简体) ), `--lg`, (中文(简体) ), `--icon` (见 `docs/index.html`) (中文(简体) ).

### 2\. 包括联署材料增强者(可选、零依赖)

交互式组件( 下拉、 标签、 表格、 从列表中选择、 摘取日期、 上传、 土司) 需要 联合来文。 两种方式:

```html
<!-- 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`](https://npmcn.com/package/%40cahyo-dimas/freeday/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`](https://npmcn.com/package/%40cahyo-dimas/freeday/COMPONENTS.md) 各执一法.

## 框架一体化(SPA)

> **完整库映射 :** [`docs/integrations.md`](https://npmcn.com/package/%40cahyo-dimas/freeday/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准备的适配器.** 所有薄:增强者保持真理的来源; 适配器只有水合物和桥梁事件。 每艘船都有一个工作 **发票** 屏幕 :

```ts
// 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)
```

```tsx
// 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
```

```razor
@* 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/`](https://npmcn.com/package/%40cahyo-dimas/freeday/examples/vue-faktur/) (单位:千美元)`npm install && npm run dev`(中文(简体) ) |
| 反应 19 | `@cahyo-dimas/freeday/react` (单位:千美元)`useFreeday` + 键 `value`编号 :`onChange` 构成部分) | [`examples/react-faktur/`](https://npmcn.com/package/%40cahyo-dimas/freeday/examples/react-faktur/) (单位:千美元)`npm install && npm run dev`(中文(简体) ) |
| 布拉佐尔·瓦斯姆(净额8.0) | `Freeday.Blazor` RCL (英语:`<FdyX>` + 键 `@bind`· `/blazor` 接口 | [`examples/blazor-faktur/`](https://npmcn.com/package/%40cahyo-dimas/freeday/examples/blazor-faktur/) (单位:千美元)`dotnet run`(中文(简体) ) |

完整的库图和图案 : [`docs/integrations.md`](https://npmcn.com/package/%40cahyo-dimas/freeday/docs/integrations.md)。 。 。 .

增强器自动点火一次上膛。 DOM 动态渲染( Vue/ react/ Blazor) :

-   **重用增强器 :** 在挂载或路由更改后,拨打 `window.FreedayTable.initAll(el)` (或全球 `initAll()`) (中文(简体) ). 安全地重复一遍,因为每个入口都由一面一等的旗帜守卫。 桥 以框架状态通过它所显示的事件(例如,倾听) `fdy-cfl-select`, (中文(简体) ), `fdy-datepicker-change`) (中文(简体) ).
-   **或复执行:** 写入您自己的框架组件, 保持不变 **标记 + ARIA 合同+ `fdy-*` 类** (见 `docs/index.html`) (中文(简体) ). 增强器是参考 执行,而不是一项要求。 对于从列表中选择的,使其成为一个可控组件 (单位:千美元)`fetchPage` callback + 服务器缓存),而不是镜像到一个全局商店.

## 接通规则: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的构建或自动前置步骤,所以支持下面的任何东西 地板是消费者的责任.

## 许可证

[麻省理工学院](https://npmcn.com/package/%40cahyo-dimas/freeday/LICENSE) 2026 Cahyo D. Kurnianto. (英语). 自由使用、修改和分发,只要 包括版权行和许可证文本.

## 常见问题

### @cahyo-dimas/freeday 是什么？

Freeday:由符号驱动,框架不可知的UI KIT\(设计真实源\)\.

### 如何安装 @cahyo-dimas/freeday？

在项目目录运行 npm install @cahyo-dimas/freeday，或使用 pnpm add / yarn add / bun add。

### @cahyo-dimas/freeday 支持 TypeScript 吗？

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

### @cahyo-dimas/freeday 支持 ESM 还是 CommonJS？

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

### @cahyo-dimas/freeday 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cahyo-dimas/freeday 可以商用吗？

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

### @cahyo-dimas/freeday 的下载量有多少？

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

### @cahyo-dimas/freeday 还在维护吗？

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