Diff

Comparación lado a lado con un redimensionador interactivo.

Importar

import { Diff } from 'asterui'

Ejemplos

Comparación de Imágenes

Compara dos imágenes con un control deslizante arrastrable.

</>

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

Comparación de Texto

Compara texto con 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

Relación de Aspecto Personalizada

Usa diferentes relaciones 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

Propiedad	Descripción	Tipo	Predeterminado
left	Contenido del lado izquierdo (revelado al arrastrar)	React.ReactNode	-
right	Contenido del lado derecho (oculto al arrastrar)	React.ReactNode	-
aspect	Clase de relación de aspecto	string	'aspect-16/9'
className	Clases CSS adicionales	string	-

Accesibilidad

• Accesible mediante teclado con navegación por tabulación
• Usa role="img" para significado semántico
• Las teclas de flecha controlan la posición del redimensionador cuando está enfocado