SidePanel

Sidepanel은 화면 옆쪽에서 슬라이드 되어 나타나는 컴포넌트로, 보충 정보를 제공하거나 사용자에 정보 입력을 요청할 경우 사용됩니다.
TypescriptWAI-ARIA
Anatomy

사이드 패널을 구성하는 요소를 설명합니다.

AnatomyImage
Rules of Use
  • RulesofUseImage
    Animation

    화면 우측에서 슬라이드 되어 나타납니다.

  • RulesofUseImage
    Close

    화면의 빈공간을 클릭했을 경우, sidepanel header의 close 버튼을 클릭했을 경우 sidepanel이 좌측으로 슬라이드 되어 sidepanel이 닫힙니다.

  • RulesofUseImage
    Header text

    버튼 내에서 스피너를 사용하여 현재 작업이 처리중이거나 발생하고 있음을 나타냅니다.

Import
import { SidePanel } from '@goorm-dev/vapor-components';
Examples
Props
SidePanel
namedescriptiondefault
className

string
isOpen

bool
false
onClose

func
children

node
size

mdlgxlxxl
lg
SidePanel.Header
namedescriptiondefault
children

node
innerClassName

string
className

string
SidePanel.Body
namedescriptiondefault
children

node
className

string
SidePanel.Footer
namedescriptiondefault
children

node
className

string