CarouselBanner#

썸네일 하나와 제목·보조 문구가 가로로 붙는 얇은 홍보 띠입니다. Carousel(variant: .banner) 의 슬라이드로 들어갑니다.

Live Preview#

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

  @override
  Component build(BuildContext context) {
    return CarouselBanner(
      thumbnail: const Icon(LucideIcons.image),
      title: Text('New this week'),
      description: Text('Three titles just landed'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return CarouselBanner(
      thumbnail: const Icon(LucideIcons.image),
      title: Text('New this week'),
      description: Text('Three titles just landed'),
    );
  }
}

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

  @override
  Component build(BuildContext context) {
    return CarouselBanner(
      size: CoreCarouselBannerSize.md,
      thumbnail: const Icon(LucideIcons.image),
      title: Text('Members save'),
      description: Text('Bundles at 20% off through April'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return CarouselBanner(
      size: CoreCarouselBannerSize.md,
      thumbnail: const Icon(LucideIcons.image),
      title: Text('Members save'),
      description: Text('Bundles at 20% off through April'),
    );
  }
}

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

  @override
  Component build(BuildContext context) {
    return CarouselBanner(
      thumbnail: const Icon(LucideIcons.image),
      title: Text('Members save'),
      description: Text('Bundles at 20% off'),
    ).withStyle(
      const CoreCarouselBannerStyle(
        backgroundColor: CoreColor.token(CoreColors.secondaryContainer),
        thumbnailBackgroundColor: CoreColor.token(CoreColors.surfaceContainer),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return CarouselBanner(
      thumbnail: const Icon(LucideIcons.image),
      title: Text('Members save'),
      description: Text('Bundles at 20% off'),
    ).withStyle(
      const CoreCarouselBannerStyle(
        backgroundColor: CoreColor.token(CoreColors.secondaryContainer),
        thumbnailBackgroundColor: CoreColor.token(CoreColors.surfaceContainer),
      ),
    );
  }
}

사용 시기 (When to Use)#

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

• 본문 위에 얇게 얹는 홍보 띠가 필요할 때 — 콘텐츠를 가리지 않는 높이(sm 88 / md 112)입니다.
• 여러 개를 순환시킬 때 — Carousel(variant: .banner, items: [...]) 에 넣으면 점이 띠 아래에 놓이고 좌우 버튼은 기본으로 꺼집니다.

다른 것을 쓰세요:

• 미디어가 위에 오는 세로 카드가 필요하면 Card. 이 컴포넌트는 가로 띠이고, 그 둘은 값으로 서로의 모양이 되지 않습니다.
• 순환 없이 한 번만 알리는 공지라면 Banner — 그쪽은 심각도 variant 와 닫기 버튼을 갖습니다.

왜 별도 컴포넌트인가#

띠의 내용은 슬라이드마다 다릅니다. 배너 세 장은 이것 세 개이고 각각 자기 그림과 문구를 갖습니다 — Carousel 의 필드로는 한 벌밖에 담을 수 없습니다. 그래서 캐러셀은 점이 어디 놓이는지를 말하고, 이 컴포넌트는 한 슬라이드가 무엇을 담는지 말합니다.

크기#

두 가지뿐입니다. 폼 안에서 커지고 작아지는 컨트롤이 아니라 화면 폭을 차지하는 띠라서, 선택은 "어느 화면인가" 이고 그 안의 모든 수치가 함께 움직입니다.

높이는 썸네일이 정합니다 — 여백 + 썸네일 + 여백. 보조 문구를 끄거나 제목이 길어져도 높이는 그대로입니다.

기본 사용법#

Flutter#

Carousel(
  variant: CoreCarouselVariant.banner,
  items: [
    CarouselBanner(
      thumbnail: Image.asset('promo.png'),
      title: Text('여름 세일'),
      description: Text('전 품목 30% 할인'),
      onTap: openSale,
    ),
  ],
)

Web#

Carousel(
  variant: CoreCarouselVariant.banner,
  items: [
    CarouselBanner(
      thumbnail: img(src: 'promo.png'),
      title: Text('여름 세일'),
      description: Text('전 품목 30% 할인'),
      onTap: openSale,
    ),
  ],
)

Props#

스타일 시스템#

• 시맨틱 식별자: size — 위젯 파라미터로 남습니다.
• chrome / dimensional / 슬롯 스타일: CoreCarouselBannerStyle 한 곳으로.

withStyle 체인도 양 플랫폼 동일하게 씁니다.

CarouselBanner(title: Text('여름 세일')).withStyle(
  CoreCarouselBannerStyle(
    backgroundColor: CoreColor.token(CoreColors.secondaryContainer),
  ),
)

Resolve chain: CoreCarouselBannerStyle.defaultsBySize[size] → theme.carouselBanner.style → 인스턴스 carouselBannerStyle.

CoreCarouselBannerStyle 필드#

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

• 문구는 짧게. 제목은 한 줄, 보조 문구도 한 줄입니다 — 띠 높이는 썸네일이 정하고 텍스트가 두 줄이 되면 줄이 잘립니다.
• 썸네일은 정사각 그림. 박스가 정사각이고 넘치는 부분은 잘립니다. 세로 사진을 넣으면 가운데만 보입니다.
• 순환은 자동 재생과 스와이프로. banner 는 좌우 버튼이 기본으로 꺼져 있습니다. 버튼이 필요하면 showNavigation: true 로 명시하되, 88 높이에서는 원판이 띠를 덮습니다.
• 본문 흐름을 가리지 않는 자리에. 이 컴포넌트가 얇은 이유가 그것입니다 — 화면을 채우는 홍보에는 Carousel(variant: .slide) 를 쓰세요.

접근성 (Accessibility)#

• onTap 을 주면 Clickable 이 role="button" 과 탭 순서를 붙이고 키보드 활성화를 받습니다. 마우스로만 되는 띠가 되지 않습니다.
• 제목과 보조 문구는 같은 onPrimaryContainer 토큰을 씁니다 — 색이 있는 배경에서 회색은 두 번째 단계로 읽히지 않고 읽히지 않는 것으로 읽히므로, 위계는 굵기가 담당합니다.