@fluixi-ui/fx (英语)
用于 Fluixi UI 的Token-aware 样式对象 — 后面的引擎 fx 道具 (英语).
<Box fx={{ p: 4, bg: 'bgSubtle', radius: 'lg', _hover: { bg: 'bgMuted' } }} />
没有CSS-in-JS运行时间,没有依赖关系. 价值决心 --flx-ui-* 自定义
属性 @fluixi-ui/tokens 定义,所以任何用 fx 沿着
主题、口音和皮肤——包括从 @fluixi-css。 。 。 .
数值
属性的尺度决定字符串密钥的符号 光是数字意味着什么
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-*/阿里亚:
_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对齐.
巢会作曲:
_dark: { _hover: { bg: 'primaryHover' } }
响应
由断点键入的移动先行对象. base 没有媒体查询 :
fx={{ p: { base: 3, md: 5 } }}
集装箱查询
对空间的反应是,一个组件实际上被赋予而不是取景器. 容器是祖先——元素不能自问:
<Card fx={{ containerType: 'inline-size' }}>
<Stack fx={{ _container: { md: { flexDirection: 'row' } } }} />
</Card>
键是断点名称或生条件. 元素相对大小通常不会 因此原始条件为一等:
_container: { '(min-width: 30rem)': { gap: 4 } }
说一个容器,当最近的不是你说的:
<aside fx={{ containerType: 'inline-size', containerName: 'panel' }}>
<div fx={{ _container: { name: 'panel', lg: { p: 6 } } }} />
</aside>
规则巢而不是组合,所以容器查询和媒体查询可以 结出同样的声明.
颜色
帮助者排放CSS;他们从未在JS中计算出一种颜色. 这很重要: 象征
是自定义属性,可针对 data-theme 编号 : data-accent,所以一个
计算成像时的值会冻结任何活动的主题.
color-mix() 和相对的颜色语法自行重新解析,所以从
色彩一直跟随主题,口音和皮肤.
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 值是一个普通对象,所以一个工具只是一个命名对象——导入,扩展
它,合并它:
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() 写入
长手. 一个赤裸裸的第二个论点是持续时间.
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,所以一个应用程序仍然可以覆盖它.
服务器渲染
内在宣言不需要任何东西。 对于规则层,释放所收集的:
const { css, tokens } = collectFx();
`<style data-fx-sheet data-fx-tokens="${tokens}">${css}</style>`;
客户采用该表而不是重新插入其规则. resetFx() 清除一个
请求的规则但保留动画——这些动画在模块范围注册一次,
所以扔下它们会留下每一个请求 在第一次命名动画之后 没有人
发射.
编组
mergeFx 折叠组件自己的样式,其 sp 以及消费者的
fx 输入一个对象——以后每个属性、选择器块和断点胜出
记录合并而不是替换 :
resolveFx(mergeFx(componentOwn, sp.body?.fx, props.fx));
化合物部件到达其部件时 slot,它通过两种渠道:
属于自己的 sp 条目,以及给它打电话的样式 fx.sp。 。 。 .
<PageBody {...slot('body', local.fx, local.sp)} />
将其约束在一个要素上
const [local, others] = splitProps(props, ['fx', 'style']);
return <div {...fxProps(() => local.fx, () => local.style)} {...others} />;
传入者,不是值. 决心在备忘录里流传 所以反应性 fx
更新而不重报。 A 类 style 道具是最后合并的 并保持原始的CSS -
没有象征性的解析度——所以它仍然是最低的逃生舱.
许可证
麻省理工学院