Diff

Comparação lado a lado com um redimensionador interativo.

Importação

import { Diff } from 'asterui'

Exemplos

Comparação de Imagens

Compare duas imagens com um controle deslizante arrastável.

</>

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

Comparação de Texto

Compare texto com diferentes estilos.

</>

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

Proporção Personalizada

Use diferentes proporções de aspecto.

</>

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

Propriedade	Descrição	Tipo	Padrão
left	Conteúdo do lado esquerdo (revelado ao arrastar)	React.ReactNode	-
right	Conteúdo do lado direito (oculto ao arrastar)	React.ReactNode	-
aspect	Classe de proporção de aspecto	string	'aspect-16/9'
className	Classes CSS adicionais	string	-

Acessibilidade

• Acessível via teclado com navegação por tab
• Usa role="img" para significado semântico
• Teclas de seta controlam a posição do redimensionador quando em foco