TobBar

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

<TopBar title="Title" renderLeft={() => [ <Icon.ChevronLeft.Regular key={1} size={24} />, ]} renderRight={() => [ <Icon.Bell.Regular key={1} size={24} />, <Icon.Gear.Regular key={2} size={24} />, ]} kind="default" />

<TopBar
  title="Title"
  renderLeft={() => [
    <Icon.ChevronLeft.Regular key={1} size={24} />,
  ]}
  renderRight={() => [
    <Icon.Bell.Regular key={1} size={24} />,
    <Icon.Gear.Regular key={2} size={24} />,
  ]}
  kind="default"
/>

Loading...

How to use

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

Properties

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

Usage

타입

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

<VStack spacing={20}> <TopBar kind="emphasis" title="Title" titleAs="h6" renderRight={() => [ <Icon.Gear.Regular key={1} size={24} />, ]} /> <TopBar kind="default" title="Title" titleAs="h6" renderLeft={() => [ <Icon.ChevronLeft.Regular key={1} size={24} />, ]} renderRight={() => [ <Icon.Gear.Regular key={1} size={24} />, ]} /> </VStack>

<VStack spacing={20}>
  <TopBar
    kind="emphasis"
    title="Title"
    titleAs="h6"
    renderRight={() => [
      <Icon.Gear.Regular key={1} size={24} />,
    ]}
  />

  <TopBar
    kind="default"
    title="Title"
    titleAs="h6"
    renderLeft={() => [
      <Icon.ChevronLeft.Regular key={1} size={24} />,
    ]}
    renderRight={() => [
      <Icon.Gear.Regular key={1} size={24} />,
    ]}
  />
</VStack>

Loading...

제목

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

<TopBar kind="default" title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto totam iure impedit recusandae eius saepe quisquam debitis id temporibus enim at dolorum ullam doloremque magnam sit et, quasi facilis dignissimos?" titleAs="h6" renderLeft={() => [ <Icon.ChevronLeft.Regular key={1} size={24} />, ]} renderRight={() => [ <Icon.Bell.Regular key={1} size={24} />, <Icon.Gear.Regular key={2} size={24} />, ]} />

<TopBar
  kind="default"
  title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto totam iure impedit recusandae eius saepe quisquam debitis id temporibus enim at dolorum ullam doloremque magnam sit et, quasi facilis dignissimos?"
  titleAs="h6"
  renderLeft={() => [
    <Icon.ChevronLeft.Regular key={1} size={24} />,
  ]}
  renderRight={() => [
    <Icon.Bell.Regular key={1} size={24} />,
    <Icon.Gear.Regular key={2} size={24} />,
  ]}
/>

Loading...

액션

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

<VStack spacing={20}> <TopBar kind="emphasis" title="Title" titleAs="h6" renderRight={() => [ <Icon.Bell.Regular key={1} size={24} />, <GhostButton key={2} size="md"> 로그인 </GhostButton>, ]} /> <TopBar kind="default" title="Title" titleAs="h6" renderLeft={() => [ <Icon.ChevronDown.Regular key={1} size={24} />, ]} renderRight={() => [ <Icon.Gear.Regular key={1} size={24} />, <GhostButton key={2} size="md"> 로그인 </GhostButton>, ]} /> </VStack>

<VStack spacing={20}>
  <TopBar
    kind="emphasis"
    title="Title"
    titleAs="h6"
    renderRight={() => [
      <Icon.Bell.Regular key={1} size={24} />,
      <GhostButton key={2} size="md">
        로그인
      </GhostButton>,
    ]}
  />

  <TopBar
    kind="default"
    title="Title"
    titleAs="h6"
    renderLeft={() => [
      <Icon.ChevronDown.Regular key={1} size={24} />,
    ]}
    renderRight={() => [
      <Icon.Gear.Regular key={1} size={24} />,
      <GhostButton key={2} size="md">
        로그인
      </GhostButton>,
    ]}
  />
</VStack>

Loading...