Skip to main content

TobBar

TobBar는 모바일 환경에서 현재 페이지의 정보와 함께 관련된 액션을 보여주는데 사용하는 컴포넌트입니다.

Loading...

How to use

import { TobBar } from '@vibrant-ui/components';

Properties

PropTypeDefaultDescription
kinddefault | emphasisdefault페이지 깊이가 1 이상인 곳에서 활용되는 default와 메인 페이지에서 활용되는 emphasis 두 가지 타입이 있습니다.
titlestring초기 열림 상태를 설정합니다. open 속성과 함께 사용할 수 없습니다.
ash6 | header컨테이너의 html 요소를 지정합니다.
titleAsh1 | h2 | h3 | h4 | h5 | h6h1제목의 html 요소를 지정합니다
renderLeft() => ReactElementChild[]왼편에 렌더할 액션 요소를 지정합니다.
renderRight() => ReactElementChild[]오른편에 렌더할 액션 요소를 지정합니다.
backgroundColorBaseColorToken'background'배경 색상을 지정합니다.

Usage

타입

TobBar는 Default, Emphasis 두 가지 타입이 있습니다. Emphasis 타입은 내 클래스, 공개 예정 등 메인 페이지의 상단에서 활용되기 위한 타입입니다. Default 타입은 페이지 뎁스가 1 이상인 곳에서 활용하기 위하여 제공되는 타입 입니다.

Loading...

제목

TobBar의 제목 요소를 지정합니다. 문자만 지정될 수 있으며 긴 문자열이 지정될 경우 renderLeftrenderRight요소와 부딛히지 않는 영역까지 확장된 후 말줄임 처리됩니다.

Loading...

액션

TobBar의 액션 요소는 renderLeft, renderRight 속성을 통해 전달됩니다. 모든 요소는 자유롭게 지정 가능하나 주로 IconButton, GhostButton 등이 올 수 있습니다.

Loading...
Previous
Tooltip