Indicator#

Indicator 는 child 위젯/컴포넌트를 감싸고 그 모서리·가장자리에 item 을 띄우는 wrapper 입니다. 아바타 우상단의 온라인 점, 아이콘 우상단의 카운트 배지, 카드 좌상단의 "NEW" 라벨 같은 패턴에 적합합니다.

Live Preview#

class IndicatorDefaultExample extends StatelessComponent {
  const IndicatorDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return CoIndicator(
      item: CoStatus(
        color: CoreStatusColor.success,
        size: CoreStatusSize.lg,
      ),
      child: CoAvatar(initials: 'DW'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const CoIndicator(
      item: CoStatus(
        color: CoreStatusColor.success,
        size: CoreStatusSize.lg,
      ),
      child: CoAvatar(initials: 'DW'),
    );
  }
}

class IndicatorBottomStartExample extends StatelessComponent {
  const IndicatorBottomStartExample({super.key});

  @override
  Component build(BuildContext context) {
    return CoIndicator(
      horizontalPosition: CoreIndicatorHorizontalPosition.start,
      verticalPosition: CoreIndicatorVerticalPosition.bottom,
      item: CoStatus(
        color: CoreStatusColor.warning,
        size: CoreStatusSize.lg,
      ),
      child: CoAvatar(initials: 'DW'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const CoIndicator(
      horizontalPosition: CoreIndicatorHorizontalPosition.start,
      verticalPosition: CoreIndicatorVerticalPosition.bottom,
      item: CoStatus(
        color: CoreStatusColor.warning,
        size: CoreStatusSize.lg,
      ),
      child: CoAvatar(initials: 'DW'),
    );
  }
}

사용 시기 (When to Use)#

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

• 아바타에 온라인 상태 점 (status dot) 을 표시할 때
• 아이콘 위에 알림 카운트 배지를 띄울 때
• 카드/이미지 위에 "NEW" / "HOT" 라벨을 오버레이할 때

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

• Badge: 인라인 배지가 필요할 때 (다른 요소를 감싸지 않음)
• DotIndicator: 캐러셀 위치 표시 점들이 필요할 때

기본 사용법 (Basic Usage)#

// 기본 — 우상단 (end + top)
CoIndicator(
  item: CoBadge(child: Text('99+')),
  child: CoAvatar(initials: 'DW'),
)

// 좌하단 (start + bottom) + 4px offset
CoIndicator(
  horizontalPosition: CoreIndicatorHorizontalPosition.start,
  verticalPosition: CoreIndicatorVerticalPosition.bottom,
  offset: 4,
  item: CoStatus(),
  child: CoIcon(CoLucideIcons.bell),
)

// 기본 — 우상단
CoIndicator(
  item: CoBadge(child: Component.text('99+')),
  child: CoAvatar(initials: 'DW'),
)

// 좌하단 + 4px offset
CoIndicator(
  horizontalPosition: CoreIndicatorHorizontalPosition.start,
  verticalPosition: CoreIndicatorVerticalPosition.bottom,
  offset: 4,
  item: CoStatus(),
  child: CoIcon(CoLucideIcons.bell),
)

Props / Parameters#

변형 (Variants)#

Default#

우상단 (end + top) 에 item 을 배치 — 가장 흔한 알림 배지 패턴.

CoIndicator(
  item: CoBadge(child: Text('99+')),
  child: CoAvatar(initials: 'DW'),
)

Bottom Start#

좌하단 (start + bottom) — "NEW" 라벨 같은 라벨 배지에 적합.

CoIndicator(
  horizontalPosition: CoreIndicatorHorizontalPosition.start,
  verticalPosition: CoreIndicatorVerticalPosition.bottom,
  item: CoBadge(child: Text('NEW')),
  child: CoAvatar(initials: 'DW'),
)

위치 조합 (Position Matrix)#

center / middle 일 땐 transform: translate(-50%, -50%) (Web) 또는 Align(Alignment(0, 0)) (Flutter) 으로 anchor 를 자식의 중심에 맞춥니다.

동작 스펙 (Behavior)#

• 표시 전용 wrapper. 인터랙션 없음.
• Flutter: Stack(clipBehavior: .none) + Positioned. item 이 child 의 bounding box 를 넘어가도 잘리지 않음.
• Web: position: relative; overflow: visible 컨테이너 + position: absolute overlay div. 동일 시맨틱.
• offset 은 양수일수록 item 이 child 안쪽으로 들어옴 (CSS top: Npx, right: Npx 와 동일).

접근성 (Accessibility)#

• Indicator 자체는 시맨틱 의미가 없음. item 자체가 의미를 가져야 함 (예: CoBadge(child: Text('3 unread'))).

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• Badge: Indicator.item 으로 가장 흔히 쓰이는 컴포넌트.
• Avatar: Indicator.child 로 가장 흔히 쓰이는 컴포넌트.
• DotIndicator: 캐러셀 위치 점들.