Diff

带交互式调整器的并排对比。

导入

import { Diff } from 'asterui'

示例

图片对比

使用可拖动滑块对比两张图片。

</>

import { Diff } from 'asterui'

function App() {
  return (
      <Diff
        left={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" alt="Original" />}
        right={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" alt="Blurred" />}
      />
    )
}

export default App

文本对比

对比不同样式的文本。

</>

DAISY

DAISY

import { Diff } from 'asterui'

function App() {
  return (
      <Diff
        left={
          <div className="bg-primary text-primary-content grid place-content-center text-7xl font-black h-full">
            DAISY
          </div>
        }
        right={
          <div className="bg-base-200 grid place-content-center text-7xl font-black h-full">
            DAISY
          </div>
        }
      />
    )
}

export default App

自定义宽高比

使用不同的宽高比。

</>

import { Diff, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="lg">
        <Diff
          aspect="aspect-square"
          className="max-w-xs"
          left={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" alt="Original" />}
          right={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" alt="Blurred" />}
        />
        <Diff
          aspect="aspect-4/3"
          className="max-w-md"
          left={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" alt="Original" />}
          right={<img src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" alt="Blurred" />}
        />
      </Space>
    )
}

export default App

API

属性	描述	类型	默认值
left	左侧内容（拖动时显示）	React.ReactNode	-
right	右侧内容（拖动时隐藏）	React.ReactNode	-
aspect	宽高比类名	string	'aspect-16/9'
className	额外的 CSS 类名	string	-

无障碍

• 支持 Tab 键进行键盘导航
• 使用 role="img" 表示语义含义
• 聚焦时可用方向键控制调整器位置