Diff | CoUI
LogoCoUI

Diff

두 컨텐츠를 좌/우로 비교하는 split-view 컴포넌트 (이미지 / 텍스트 / 임의 위젯)

Diff#

두 개의 컨텐츠를 한 프레임 안에 겹쳐 놓고 가운데 분할선을 드래그해서 좌/우 비율을 조절하면서 비교하는 viewer 입니다. daisyUI 의 diff 컴포넌트와 동일한 사용 의도이며, 이미지·텍스트·임의 위젯을 슬롯으로 받습니다.

코드 변경 사항을 라인 단위로 비교하려면 CodeDiff 를 사용하세요.

Live Preview#

default
Web
Flutter
Loading Flutter... 
class DiffDefaultExample extends StatelessComponent {
  const DiffDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return const CoDiff(
      ariaLabel: 'Sharp vs blurred photo comparison',
      before: _DiffImg(
        url: 'https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp',
      ),
      after: _DiffImg(
        url: 'https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp',
      ),
    );
  }
}

class _DiffImg extends StatelessComponent {
  const _DiffImg({required this.url});

  final String url;

  @override
  Component build(BuildContext context) {
    return img(
      src: url,
      alt: '',
      classes: 'not-content',
      styles: const Styles(
        raw: {
          'display': 'block',
          'width': '100%',
          'height': '100%',
          'object-fit': 'cover',
        },
      ),
    );
  }
}

class DiffDefaultExample extends StatelessWidget {
  const DiffDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return CoDiff(
      ariaLabel: 'Sharp vs blurred photo comparison',
      before: Image.network(
        'https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp',
        fit: BoxFit.cover,
      ),
      after: Image.network(
        'https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp',
        fit: BoxFit.cover,
      ),
    );
  }
}
text
Web
CoUI
CoUI
Flutter
Loading Flutter... 
class DiffTextExample extends StatelessComponent {
  const DiffTextExample({super.key});

  @override
  Component build(BuildContext context) {
    final cs = context.colorScheme;
    return CoDiff(
      ariaLabel: 'Filled vs surface text comparison',
      before: Component.element(
        tag: 'div',
        classes: 'w-full h-full grid place-content-center bg-${cs.primary}',
        children: [Text('CoUI').displayLarge.onPrimary],
      ),
      after: Component.element(
        tag: 'div',
        classes:
            'w-full h-full grid place-content-center '
            'bg-${cs.surfaceContainer}',
        children: [Text('CoUI').displayLarge.onSurface],
      ),
    );
  }
}

class DiffTextExample extends StatelessWidget {
  const DiffTextExample({super.key});

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    return CoDiff(
      ariaLabel: 'Filled vs surface text comparison',
      before: ColoredBox(
        color: colors.primary,
        child: Center(child: const Text('CoUI').displayLarge.onPrimary),
      ),
      after: ColoredBox(
        color: colors.surfaceContainer!,
        child: Center(child: const Text('CoUI').displayLarge.onSurface),
      ),
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

  • 이미지 before/after 비교 (보정 전/후, 라이트/다크, 디자인 시안 비교)
  • 폰트나 디자인 토큰 두 가지를 동일한 텍스트로 비교
  • 어떤 두 컨텐츠든 좌/우 분할선으로 비율을 조절하며 보고 싶을 때

대신 다른 컴포넌트를 사용하세요:

  • CoCodeDiff: 코드 변경 사항을 라인 단위로 색상 강조 표시할 때
  • CoCarousel: 여러 컨텐츠를 순차적으로 넘기며 볼 때

Props / Parameters#

속성타입기본값설명
before Widget / Component 필수 좌측 (before) 슬롯
after Widget / Component 필수 우측 (after) 슬롯
aspectRatio double? null → 16/9 프레임 종횡비
initialPosition double 0.5 초기 분할 위치 (0~1)
onPositionChanged void Function(double)? null 분할 위치 변경 콜백
interactive bool true 드래그/키보드 인터랙션 활성화
ariaLabel String? null 스크린 리더 라벨
borderRadius BorderRadiusGeometry? / double? null → CoreRadius.box 컨테이너 보더 라운드

인터랙션#

  • 드래그: 분할선을 좌우로 드래그해서 비율 조정
  • 키보드: 컴포넌트가 포커스된 상태에서 ←/→ 키로 5%씩 이동
  • 모바일: 자식이 포커스 가능하면 탭으로 한쪽 영역을 빠르게 노출

관련 컴포넌트 (Related Components)#