# @fluixi-ui/fx 中文文档

规范地址：https://npmcn.com/package/%40fluixi-ui/fx/

版本：0\.1\.0-alpha\.12
npm 元数据更新时间：2026-11-05T05:32:33.526Z
中文译文更新时间：2026-11-15T02:30:41.360Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40fluixi-ui/fx
原文对照：https://npmcn.com/package/%40fluixi-ui/fx/?lang=original
项目主页：https://github.com/fluixi/ui#readme
源码仓库：https://github.com/fluixi/ui

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

- 包体积（解压后）：209 kB，55 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：vite \>=5，@babel/parser \>=7\.20\.0，@fluixi/reactive \>=1\.0\.0-alpha\.41
- 首次发布：2026-08-05T05:55:09.102Z
- 最新版本发布：2026-11-05T05:29:08.593Z
- 近 30 天下载量：4477（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）

## 中文简介

Fluixi UI 生态系统的Token-aware 样式对象—— `fx` 道具引擎

## 安装

```sh
npm install @fluixi-ui/fx
```

也可以使用：`pnpm add @fluixi-ui/fx`、`yarn add @fluixi-ui/fx`、`bun add @fluixi-ui/fx`

## README

# @fluixi-ui/fx (英语)

用于 Fluixi UI 的Token-aware 样式对象 — 后面的引擎 `fx` 道具 (英语).

```tsx
<Box fx={{ p: 4, bg: 'bgSubtle', radius: 'lg', _hover: { bg: 'bgMuted' } }} />
```

没有CSS-in-JS运行时间,没有依赖关系. 价值决心 `--flx-ui-*` 自定义 属性 `@fluixi-ui/tokens` 定义,所以任何用 `fx` 沿着 主题、口音和皮肤——包括从 `@fluixi-css`。 。 。 .

## 数值

属性的尺度决定字符串密钥的符号 光是数字意味着什么

```tsx
p: 3          // padding: var(--flx-ui-space-3)   — space scale
m: -2         // margin: calc(var(--flx-ui-space-2) * -1)
width: 240    // width: 240px                     — sizing is pixels
zIndex: 3     // z-index: 3                       — unitless stays bare
radius: 'lg'  // border-radius: var(--flx-ui-radius-lg)
bg: 'primary' // background-color: var(--flx-ui-color-primary)
bg: 'accent-9'// background-color: var(--flx-ui-accent-9)
bg: '#ff0000' // background-color: #ff0000        — raw CSS always allowed
```

异名是故意少的—— `p` `px` `py` `m` `mx` `my` `bg` `radius` `shadow`。 。 。 . 其他一切都是真正的CSS财产名称(`paddingTop`没有 `pt`),所以还有 没有桌子可以学习. `px`编号 :`py` 映射到逻辑属性并遵循写入 向上转.

## 选择器

一组封闭的 `_`\-前置钥匙 他们扩张到图书馆的真正惯例, 不只是CSS伪-无头部件信号状态通过 `data-*`/阿里亚:

```tsx
_disabled: { opacity: 'disabled' }
// :disabled, [disabled], [data-disabled]
```

状态 : `_hover` `_active` `_focus` `_focusVisible` `_focusWithin` `_disabled` `_checked` `_selected` `_expanded` `_open` `_invalid` 要点: `_before` `_after` `_placeholder` `_selection` 结构 : `_first` `_last` `_odd` `_even` `_notFirst` `_notLast` `_children` 环境: `_dark` `_light` `_hc` `_rtl` `_motionReduce` `_motionSafe`

`_dark` 目标 `[data-theme='dark']` ——轴线 `createTheme` 驱动器 - 和匹配 元素本身 和一个主题祖先, 所以范围化主题作品.

关闭的集合是: `fx` 无法达到应用程序的类名,所以 组件永远不能与消费者CSS对齐.

巢会作曲:

```tsx
_dark: { _hover: { bg: 'primaryHover' } }
```

## 响应

由断点键入的移动先行对象. `base` 没有媒体查询 :

```tsx
fx={{ p: { base: 3, md: 5 } }}
```

## 集装箱查询

对空间的反应是,一个组件实际上被赋予而不是取景器. 容器是祖先——元素不能自问:

```tsx
<Card fx={{ containerType: 'inline-size' }}>
  <Stack fx={{ _container: { md: { flexDirection: 'row' } } }} />
</Card>
```

键是断点名称或生条件. 元素相对大小通常不会 因此原始条件为一等:

```tsx
_container: { '(min-width: 30rem)': { gap: 4 } }
```

说一个容器,当最近的不是你说的:

```tsx
<aside fx={{ containerType: 'inline-size', containerName: 'panel' }}>
  <div fx={{ _container: { name: 'panel', lg: { p: 6 } } }} />
</aside>
```

规则巢而不是组合,所以容器查询和媒体查询可以 结出同样的声明.

## 颜色

帮助者排放CSS;他们从未在JS中计算出一种颜色. 这很重要: 象征 是自定义属性,可针对 `data-theme` 编号 : `data-accent`,所以一个 计算成像时的值会冻结任何活动的主题. `color-mix()` 和相对的颜色语法自行重新解析,所以从 色彩一直跟随主题,口音和皮肤.

```tsx
import { alpha, mix, lighten, darken } from '@fluixi-ui/fx';

alpha('primary', 12)      // color-mix(in oklab, var(--flx-ui-color-primary) 12%, transparent)
mix('primary', 'bg', 20)  // 20% primary over the page background
lighten('primary', 8)     // oklch(from … calc(l + 0.08) c h / alpha)
darken('border', 10)
```

每笔金额为一分,0-100. `lighten`编号 :`darken` oKLCH的转向光度, 保持克罗玛和克罗埃的颜色 锡保持同样的颜色 与白色或黑色混合的方式。 他们需要相对的颜色语法 (Chrome 119+,Safari 16.4+,Firefox 128+);供更宽的地板使用 `mix(color, 'white', n)`。 。 。 .

## 现成物体

一个 `fx` 值是一个普通对象,所以一个工具只是一个命名对象——导入,扩展 它,合并它:

```tsx
import { flexBetween, muted, bordered, clickable, truncate, mergeFx } from '@fluixi-ui/fx';

<div {...fxProps(() => mergeFx(bordered, clickable, { p: 3 }))} />
```

-   **`utilities`** 每天的单行道: `flex*`, (中文(简体) ), `fullWidth`, (中文(简体) ), `stickyTop`, (中文(简体) ), `muted`, (中文(简体) ), `bold`, (中文(简体) ), `nowrap`, (中文(简体) ), `bordered`, (中文(简体) ), `rounded`, (中文(简体) ), `pill`, (中文(简体) ), `scrim`, (中文(简体) ), `pointer`, (中文(简体) ), `clickable`, (中文(简体) ), `focusRing`, (中文(简体) ), `disabled`需要作出决定的是: `flexFill` 包括 `min-width: 0` 在文本出现之前需要灵活的儿童 断线, `muted` 那是一种迹象,而不是一种灰色, `focusRing` 实值 `:focus-visible` 只有这个.
-   **`presets`** ——只作为一套的食谱: `truncate`, (中文(简体) ), `lineClamp`, (中文(简体) ), `visuallyHidden`, (中文(简体) ), `stack`, (中文(简体) ), `row`, (中文(简体) ), `center`, (中文(简体) ), `scrollY`, (中文(简体) ), `scrollbarHidden`, (中文(简体) ), `gradientText`, (中文(简体) ), `aspect`。 。 。 .
-   **`variants`** ——将组件自己的道具映射到 `fx` 无三角链:后期 团体获胜, `false` 关闭默认组.

## 动画

`keyframes()` 定义动画并返回其名称; `animate()` 写入 长手. 一个赤裸裸的第二个论点是持续时间.

```tsx
const pulse = keyframes({ from: { opacity: 0.4 }, to: { opacity: 1 } });

fx={animate(pulse, { repeat: 'infinite' })}
fx={fadeIn('slow')}
fx={slideIn('bottom', { distance: 16 })}
```

停止值会通过解析器, 所以符号在它们内部工作 由解析体散列,所以两次定义的同一种动画是一条规则. 这个 库存 -- -- `fadeIn`编号 :`fadeOut`, (中文(简体) ), `scaleIn`编号 :`scaleOut`, (中文(简体) ), `slideIn`编号 :`slideOut`, (中文(简体) ), `spin`, (中文(简体) ), `pulse`, (中文(简体) ), `shimmer` - 登记关于首先使用而不是进口的规则.

`animate` 返回对象而不是 `animation` shortwand 字符串,所以合并 与它周围的东西 而不是重置长手 它没有提到.

## 如何降落在页面上

平面声明 `base` 值转到 `style` 属性 - 大多数 `fx` 用法从不触及样式表。 仅选择键和非 -`base` 断点 需要一条规则;这些规则被散列、去除并插入到 `[data-fx="…"]` 输入 `@layer flx.fx`,它坐落于组件之上,皮肤因此 `fx` 赢, 和以下 无层消费者CSS,所以一个应用程序仍然可以覆盖它.

## 服务器渲染

内在宣言不需要任何东西。 对于规则层,释放所收集的:

```tsx
const { css, tokens } = collectFx();
`<style data-fx-sheet data-fx-tokens="${tokens}">${css}</style>`;
```

客户采用该表而不是重新插入其规则. `resetFx()` 清除一个 请求的规则但保留动画——这些动画在模块范围注册一次, 所以扔下它们会留下每一个请求 在第一次命名动画之后 没有人 发射.

## 编组

`mergeFx` 折叠组件自己的样式,其 `sp` 以及消费者的 `fx` 输入一个对象——以后每个属性、选择器块和断点胜出 记录合并而不是替换 :

```tsx
resolveFx(mergeFx(componentOwn, sp.body?.fx, props.fx));
```

化合物部件到达其部件时 `slot`,它通过两种渠道: 属于自己的 `sp` 条目,以及给它打电话的样式 `fx.sp`。 。 。 .

```tsx
<PageBody {...slot('body', local.fx, local.sp)} />
```

## 将其约束在一个要素上

```tsx
const [local, others] = splitProps(props, ['fx', 'style']);
return <div {...fxProps(() => local.fx, () => local.style)} {...others} />;
```

传入者,不是值. 决心在备忘录里流传 所以反应性 `fx` 更新而不重报。 A 类 `style` 道具是最后合并的 并保持原始的CSS - 没有象征性的解析度——所以它仍然是最低的逃生舱.

## 许可证

麻省理工学院

## 常见问题

### @fluixi-ui/fx 是什么？

Fluixi UI 生态系统的Token-aware 样式对象—— fx 道具引擎

### 如何安装 @fluixi-ui/fx？

在项目目录运行 npm install @fluixi-ui/fx，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@fluixi/reactive（\>=1\.0\.0-alpha\.41）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fluixi-ui/fx 支持 TypeScript 吗？

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

### @fluixi-ui/fx 支持 ESM 还是 CommonJS？

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

### @fluixi-ui/fx 可以商用吗？

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

### @fluixi-ui/fx 的下载量有多少？

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

### @fluixi-ui/fx 还在维护吗？

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