TopBanner
보다 효과적인 고객 경험과 알림을 위해 정보를 제공합니다. 캐러샐을 사용하여 여러 개의 정보를 보여줄 수 있습니다.Anatomy
탑 배너를 구성하는 요소를 설명합니다.
Rules of Use
Location
탑 배너는 Service nav-bar 와 navbar 하단에 위치하며 마진 없이 사용을 권장합니다. 또한, 디바이스 넓이의 전체를 사용하는 것을 권장합니다.
Icon variation
상황에 따라 왼쪽 아이콘을 변경하여 사용할 수 있습니다.
Shortening
컨텐츠가 최대 영역 안에 들어갈 수 있도록 컨텐츠 제작에 주의합니다. 그럼에도 불구하고 컨텐츠가 캐러셀 영역까지 도달한 경우, 말줄임 표시를 통해 내용을 축약합니다.
Import
Examples
Props
name | description | default |
---|---|---|
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 | 배너를 열거나 닫을 수 있는 함수 | () => {} |