TripleDots | CoUI
LogoCoUI

TripleDots

균등 간격의 원형 점 — 보통 3개 — 으로 "더 보기" 글리프를 표시하는 컴포넌트

원문 .md 보기 Open in Claude

TripleDots#

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

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

Live Preview#

default
Web
Flutter
Loading Flutter... 
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();
  }
}
vertical
Web
Flutter
Loading Flutter... 
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 int? null (→ 3) 렌더할 점 개수
direction CoreAxis horizontal 점이 배치되는 축
dotSize double? null (→ 2 px) 점 하나의 지름 (logical px)
spacing double? null (→ 2 px) 인접한 점 사이 간격 (logical px). Row.spacing / Column.spacing (Flutter), flex gap (Web) 로 전달
color CoreColor? null 점 색. null → 주변 텍스트 색 상속

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 균등 분포).

스타일 시스템 (Style System)#

TripleDots 는 순수 레이아웃 프리미티브라 별도 xxxStyle 슬롯이 없습니다 — 디자인 시스템 기본값은 CoreTripleDotsStyle 에 정의되고, 위젯의 count / dotSize / spacing / color 파라미터가 그 필드를 직접 override 합니다.

CoreTripleDotsStyle 필드#

필드타입설명
count int? Number of dots override. null → design-system default.
dotSize double? Dot diameter override (logical px). null → design-system default.
spacing double? Native inter-dot spacing (logical px). null defers to [defaultSpacing]. Consumed natively as Row.spacing / Column.spacing on Flutter and as flex gap on Web.
color CoreColor? Fill colour override. null → inherit the surrounding text colour ( DefaultTextStyle on Flutter, currentColor on Web). No defaultColor, deliberately — inheritance is the design, and it is not a value. The dots read as punctuation in whatever text they sit in, so null resolves per use site rather than per design system: the Flutter widget falls back to DefaultTextStyle.of(context).style.color and Web emits the CSS keyword currentColor . A constant here would pin every run of dots to one token and break that inheritance on both platforms — note [count], [dotSize] and [spacing] all do have defaults, because those are design decisions and this one is a deferral to the host.

변형 (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.

사용 가이드라인 (Usage Guidelines)#

✅ Do#

color 를 생략해 주변 텍스트 색을 상속받기

Button(
  child: Row(
    children: [
      const Text('More'),
      const Gap(size: CoreSpace.space4),
      const TripleDots(),
    ],
  ),
)

color 를 지정하지 않으면 점은 DefaultTextStyle(Flutter) / currentColor(Web) 를 그대로 상속하므로, 어떤 컨테이너에 넣어도 텍스트 색과 자동으로 맞습니다.

❌ Don't#

페이지 위치 표시에 TripleDots 사용 금지

// ❌ 활성 페이지를 강조할 방법이 없다
Row(children: [for (final _ in pages) const TripleDots()])

TripleDots 는 상태를 갖지 않는 순수 레이아웃 프리미티브라 어떤 점도 강조할 수 없습니다 — 캐러셀/페이지 위치 인디케이터에는 DotIndicator 를 쓰세요.

접근성 (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)) 가 담당합니다.

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