TripleDots#

균등 간격의 원형 점을 한 축으로 늘어놓아 "더 보기(more)" 글리프를 표시하는 컴포넌트입니다. 보통 3개의 점으로 ellipsis 를 표현하며, 페이지네이션의 생략 표시나 오버플로 메뉴 트리거 등에 사용합니다.

TripleDots는 레거시 Flutter MoreDots와 Web TripleDots를 통일한 컴포넌트입니다. Flutter와 Web이 동일한 파라미터 이름·동작·시각을 갖습니다.

Live Preview#

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

  @override
  Component build(BuildContext context) {
    return const TripleDots();
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const TripleDots();
  }
}

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

  @override
  Component build(BuildContext context) {
    return const TripleDots(direction: CoreAxis.vertical);
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const TripleDots(direction: CoreAxis.vertical);
  }
}

사용 시기 (When to Use)#

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

• 페이지네이션에서 생략된 페이지 범위를 표시할 때
• 오버플로 메뉴(...) 트리거의 글리프가 필요할 때
• 콘텐츠가 더 있음을 암시하는 미니멀한 인디케이터가 필요할 때

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

• DotIndicator: 캐러셀 / 페이지 위치 인디케이터에
• Icon: 의미가 있는 아이콘 글리프에

기본 사용법 (Basic Usage)#

TripleDots()

TripleDots()

Props / Parameters#

TripleDots#

count / dotSize / spacing 의 null 기본값은 CoreTripleDotsTheme 프로젝트 오버라이드 → CoreTripleDotsStyle.defaultX 디자인 시스템 기본값 순으로 해결됩니다. spacing 은 native paint API (Row.spacing / Column.spacing (Flutter), flex gap (Web)) 로 흐르므로 per-gap 위젯이 삽입되지 않습니다 (Epic four-principle naming sub-rule — N-sibling 균등 분포).

변형 (Variants)#

세로 배치 (Vertical)#

direction: CoreAxis.vertical 로 점을 세로로 늘어놓습니다.

TripleDots(direction: CoreAxis.vertical)

점 개수 / 색#

TripleDots(count: 5)
TripleDots(color: CoreColor.token(CoreColors.primary))

동작 스펙 (Behavior)#

TripleDots는 순수한 레이아웃 프리미티브로 인터랙션이 없습니다. 각 점은 지름 dotSize의 완전한 원이며, 인접한 점 사이는 native paint API (Row.spacing / Column.spacing (Flutter), flex gap (Web)) 로 균등하게 분리됩니다. color가 null이면 점은 주변 텍스트 색을 상속합니다 — Flutter는 DefaultTextStyle 색, Web은 currentColor.

접근성 (Accessibility)#

• Flutter: Semantics(label: 'More')로 스크린 리더에 전달
• Web: role="img" + aria-label="More"

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

TripleDots는 Flutter와 Web이 동일한 count / direction / dotSize / spacing / color API와 동작을 갖습니다. 점은 양쪽 모두 완전한 원 (border-radius 50%)으로 렌더링되며, 점 사이 간격은 native paint API (Row.spacing / Column.spacing (Flutter), flex gap (Web)) 가 담당합니다.

관련 컴포넌트 (Related Components)#

• Icon: 의미가 있는 아이콘 글리프
• DotIndicator: 캐러셀 위치 인디케이터
• Pagination: 생략 표시를 포함하는 페이지네이션