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 Diff(
      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 Diff(
      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 Diff(
      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 Diff(
      ariaLabel: 'Filled vs surface text comparison',
      before: ColoredBox(
        color: colors.primary.toValue(),
        child: Center(child: const Text('CoUI').displayLarge.onPrimary),
      ),
      after: ColoredBox(
        color: colors.surfaceContainer!.toValue(),
        child: Center(child: const Text('CoUI').displayLarge.onSurface),
      ),
    );
  }
}

사용 시기 (When to Use)#

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

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

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

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

Props / Parameters#

속성타입기본값설명
before Widget / Component 필수 좌측 (before) 슬롯
after Widget / Component 필수 우측 (after) 슬롯
onPositionChanged void Function(double)? null 분할 위치 변경 콜백
interactive bool true 드래그/키보드 인터랙션 활성화
ariaLabel String? null 스크린 리더 라벨
diffStyle CoreDiffStyle? null chrome / dimensional override — Epic #1302 / #1370 Phase 4 nested Style API

스타일 시스템 (Style System)#

Epic #1302 / #1370 Phase 4 nested Style API. 모든 chrome / 치수 / layout override 는 diffStyle 슬롯 하나로 흐릅니다.

슬롯타입기본값비고
borderRadius CoreBorderRadius? radius16 컨테이너 보더 라운드.
resizerColor CoreColor? outline 토큰 분할 리사이저 핸들 색상.
resizerWidth double? 2.0 (logical px) 분할 리사이저 핸들 너비.
aspectRatio double? 16/9 프레임 종횡비 (width / height).
initialPosition double? 0.5 초기 분할 위치 (0.0 ~ 1.0).

Resolve chain#

CoreDiffStyle.defaultX (design system default)
  → CoreDiffTheme.style                           // 프로젝트 공통
  → widget.diffStyle                              // 인스턴스별

인터랙션#

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

관련 컴포넌트 (Related Components)#