DashboardFrame

대시보드는 복잡한 정보들을 사용자가 이해하기 쉬운 형태로 전달합니다. navbar, sidebar, title, card 등으로 구성되어 있습니다.

TypescriptWAI-ARIA

대시보드 프레임을 구성하는 요소를 설명합니다.

Card,title width
경우에 따라 Card, title width를 fluid로 적용하거나, max-width를 적용할 수 있습니다.
Card split
padding을 제외한 영역에서 Card를 split해서 사용할 수 있습니다. 이때, Split된 card width의 비율은 경우에 따라 다르게 적용할 수 있습니다.
Button / Nav tab
타이틀과 card 사이에 Button, Nav tab 등등을 추가하여 사용할 수 있습니다. Button, Nav tab등이 그룹핑되는 영역에 따라 사이 간격을 조절하여 적용합니다.
Dashboard Contents max-width
데스크탑 기준 Dashboard contents 영역의 max width는 1140px을 기본으로 하며, contents 영역에 많은 정보를 한 눈에 보여줘야 하는 테이블 형태가 들어갈 땐 unset으로 정합니다. 단, 특정 페이지 내에서 nav tab으로 이동하는 페이지의 max width는 동일하게 사용합니다.

import { DashboardFrame } from '@goorm-dev/vapor-components';

name	description	default
sideBarState	sidebar의 상태를 설정합니다. openclose	open

name	description	default
innerClassName	sidebar의 내부 컨텐츠에 적용할 className입니다. string
innerHeaderClassName	sidebar의 header에 적용할 className입니다. string
innerTitleClassName	sidebar의 title에 적용할 className입니다. string
isResizeAble	sidebar의 사이즈 조절을 가능하게 합니다. boolean	true
onClickCollapseButton	sidebar의 사이즈 조절 버튼을 클릭했을 때의 이벤트입니다. boolean
titleName	sidebar의 좌측 상단에 표시할 title입니다. string	Text
TitleIcon	sidebar의 좌측 상단에 표시할 icon입니다. React.ReactNode	OrganizationIcon
Title	sidebar의 좌측 상단에 [OrganizationIcon + 조직명 \| 회사명] 대신 표시할 컴포넌트입니다. React.ReactNodestring	null

name	description	default
innerClassName	contents의 내부 컨텐츠에 적용할 className입니다. string
maxWidth	contents의 최대 너비를 설정합니다. 71.25rem49.125remunset	unset

name	description	default
title	contents header의 title입니다. string
titleClassName	contents header의 title에 적용할 className입니다. string
className	contents header의 className입니다. string

name	description	default
className	navbar의 className입니다. string
innerClassName	navbar의 내부 컨텐츠에 적용할 className입니다. string