Diff

Comparaison côte à côte avec un redimensionneur interactif.

Importation

import { Diff } from 'asterui'

Exemples

Comparaison d'images

Comparer deux images avec un curseur déplaçable.

</>

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

Comparaison de texte

Comparer du texte avec différents styles.

</>

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

Rapport d'aspect personnalisé

Utiliser différents rapports d'aspect.

</>

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

Propriété	Description	Type	Défaut
left	Contenu du côté gauche (révélé lors du glissement)	React.ReactNode	-
right	Contenu du côté droit (masqué lors du glissement)	React.ReactNode	-
aspect	Classe de rapport d’aspect	string	'aspect-16/9'
className	Classes CSS supplémentaires	string	-

Accessibilité

• Accessible au clavier avec navigation par tabulation
• Utilise role="img" pour une signification sémantique
• Les touches fléchées contrôlent la position du redimensionneur lorsque focalisé