Reaction 点赞Reaction · burst

表达“喜欢”的开关按钮，也是 Oink 的品牌微交互：点亮时猪鼻子弹一下、迸出一圈粒子，数字滚动加一。一条内容上放一个就够了。

基本用法

不传 count 时只有图标；count 是别人点的数量（不含自己），显示的数字 = count + 自己是否点了。

受控

pressed / onChange 受控。label 是按钮给读屏的名字，默认“Oink 一下”，请换成具体的动作。

128 人赞过

自定义

icon 换成别的 24×24 图标；children 放可见的文字；noBurst 关掉粒子；disabled 禁用。

单独使用粒子

burst(x, y) 在视口坐标处放一圈粒子，可以用在别的“完成了”的时刻。开了减弱动效时什么都不做。

规格

粒子: 12 颗 · 直径 4–10 · 飞出约 46px 后下落 14px 消失 · 620–880ms
粒子颜色: 强调色、浅强调色、正文色轮流
数字: 旧值滚出、新值 spring 滚入

接口

Reaction

属性	类型	默认值	说明
`pressed / defaultPressed`	`boolean`	`false`	是否点亮，受控 / 非受控。
`onChange`	`(pressed: boolean) => void`	—	切换时。
`count`	`number`	—	别人点的数量（不含自己）。不传就不显示数字。
`label`	`string`	`'Oink 一下'`	按钮的名字（给读屏）。
`icon`	`ReactNode`	—	自定义图标（24×24），默认猪鼻子。
`noBurst`	`boolean`	—	点亮时不放粒子。
`...rest`	`ButtonHTMLAttributes`	—	其余原生按钮属性（`disabled` 等）透传。

burst(x, y, options?)

属性	类型	默认值	说明
`x, y`*	`number`	—	视口坐标（clientX / clientY 那一套）。
`options.count`	`number`	`12`	粒子数量。
`options.distance`	`number`	`46`	飞出的大致距离（px）。
`options.colors`	`string[]`	—	粒子颜色，轮流使用。默认取主题色。
`options.source`	`Element`	—	从哪个元素上读主题色，默认根元素。