TopBanner

보다 효과적인 고객 경험과 알림을 위해 정보를 제공합니다. 캐러샐을 사용하여 여러 개의 정보를 보여줄 수 있습니다.
TypescriptWAI-ARIA
Anatomy

탑 배너를 구성하는 요소를 설명합니다.

AnatomyImage
Rules of Use
  • RulesofUseImage
    Location

    탑 배너는 Service nav-bar 와 navbar 하단에 위치하며 마진 없이 사용을 권장합니다. 또한, 디바이스 넓이의 전체를 사용하는 것을 권장합니다.

  • RulesofUseImage
    Icon variation

    상황에 따라 왼쪽 아이콘을 변경하여 사용할 수 있습니다.

  • RulesofUseImage
    Shortening

    컨텐츠가 최대 영역 안에 들어갈 수 있도록 컨텐츠 제작에 주의합니다. 그럼에도 불구하고 컨텐츠가 캐러셀 영역까지 도달한 경우, 말줄임 표시를 통해 내용을 축약합니다.

Import
import { TopBanner } from '@goorm-dev/vapor-components';
Examples
Props
namedescriptiondefault
items배너에 표시할 아이템 목록. { key : string, color ?: 'primary' | 'danger' | 'dark', leftIcon ?: IconType, label : ReactElement | string (isRequired), buttonLabel :ReactElement | string (isRequired), onClick ?: () =>void }[] 형태로 구성되어야 합니다.[]
color

색상을 설정합니다.

primarydangercontrast
primary
className컴포넌트에 추가할 클래스 이름
itemClassName아이템에 추가할 클래스 이름
isOpen배너가 열려있는지 여부false
toggle배너를 열거나 닫을 수 있는 함수() => {}