Diff 对比

Diff 现在除了保持组合式结构，还补上一套更顺手的快捷 API。可以直接传内容和位置值，也可以用Diff.Item1、Diff.Item2、Diff.Resizer自己拼装。

何时使用

需要比较两个版本、两套视觉稿或两段内容，并让用户自己拖动查看差异。
想要一个更轻的 API，直接传左右内容和默认位置，而不是每次都手写三段结构。

# 增强写法

直接用 item1、item2、item1Label、item2Label 和 resizerContent 就能得到可拖动的对比区域。

Rue Cloud

Ship design changes with one source of truth

聚焦深色界面和强对比 CTA，强调协作与发布节奏。

Publish fasterTeam sync

Rue Cloud

Design review feels calmer and more editorial

同一套信息结构，但把密度降下来，强调留白、节奏和可读性。

Clear sections

Softer contrast

Readable text

Stable hierarchy

V1 V2

new

快捷模式下内部会自动生成拖动层，键盘聚焦后也能直接调整位置。

# 受控位置

value 和 onChange 可以把 Diff 变成受控组件，适合和外部滑杆、表单或讲解步骤联动。

当前值 38

Old palette

RUE

New palette

RUE

Before After

sync

# 只读模式

disabled 会保持当前可视结果，但不再允许拖动，适合说明文档、快照回顾或固定审稿视角。

Dense Comfort

lock

固定为 62%，用来展示最终审稿视角。

# 图片对比

组合式写法示例。

# 文本对比

语义 API 不是替代，而是补充。

DAISY

API

Diff 现在同时支持快捷模式和组合式模式，下面按根组件和子组件拆开列出。

属性	说明	类型	默认值
`item1`	快捷模式下的左侧内容	`any`	`-`
`item2`	快捷模式下的右侧内容	`any`	`-`
`item1Label`	左侧角标文案或节点	`any`	`-`
`item2Label`	右侧角标文案或节点	`any`	`-`
`resizerContent`	手柄中央的自定义内容	`any`	`-`
`value`	受控位置值，仅快捷模式生效	`number`	`-`
`defaultValue`	非受控初始位置，仅快捷模式生效	`number`	`50`
`min`	最小值，仅快捷模式生效	`number`	`0`
`max`	最大值，仅快捷模式生效	`number`	`100`
`step`	步进值，仅快捷模式生效	`number`	`1`
`onChange`	拖动或键盘调整时回调当前值	`(value: number, event: Event) => void`	`-`
`disabled`	禁用快捷模式拖动能力	`boolean`	`false`
`children`	传入子节点后优先使用组合式结构	`any`	`-`

属性	说明	类型	默认值
`Diff.Item1`	左侧内容区，支持 role、tabIndex、label 和 style	`component`	`-`
`Diff.Item2`	右侧内容区，支持 role、tabIndex、label 和 style	`component`	`-`
`Diff.Resizer`	分隔条，可继续自定义 className、style 和 children	`component`	`-`
`tabIndex`	组合结构模式下继续透传到根节点	`number`	`-`

模式选择建议

item1 / item2适合快速搭示例、做受控联动、补标签和默认手柄内容。

children + Diff.Item1 / Item2 / Resizer 适合保持组合结构，或自己完全掌控内部布局。

FAQ

快捷模式和组合式模式怎么选？

如果你只是想比较两个内容块，优先用item1和item2。如果你已经有现成结构，或者需要完全接管内部节点顺序，就可以用组合式写法。

value 和 defaultValue 有什么区别？

value是受控值，外部状态说了算；defaultValue 只决定初始位置，之后由组件内部维护。

传了 children 之后 value 还会生效吗？

当前组件里，children会切换到组合式模式，因此value、defaultValue这些快捷模式能力不会接管内部布局。需要受控拖动时，优先使用item1/ item2。