Unvus Docs

Appearance

Panel ​

이 컴포넌트는 콘텐츠를 구분된 카드 형태로 시각적으로 표현하는 UI 박스입니다. 제목, 본문, 푸터 영역을 구분해서 구성할 수 있으며, 다양한 테마와 버튼 기능, 숨김 옵션 등을 제공합니다.

Props ​

Prop 이름타입기본값설명
titleString''패널 상단에 표시할 제목입니다.
bodyString''본문에 직접 텍스트를 표시할 경우 사용 (슬롯 사용 시 생략 가능).
footerString''하단에 직접 텍스트를 표시할 경우 사용 (슬롯 사용 시 생략 가능).
variantString''패널 테마를 지정 (default, inverse 등).
no-headerBooleanfalsetrue일 경우 헤더 영역을 숨깁니다.
no-bodyBooleanfalsetrue일 경우 본문 영역을 숨깁니다.
no-buttonBooleanfalsetrue일 경우 상단 버튼 영역 전체를 숨깁니다.
no-button-expandBooleanfalsetrue일 경우 "확장" 버튼을 숨깁니다.
no-button-reloadBooleanfalsetrue일 경우 "새로고침" 버튼을 숨깁니다.
no-button-collapseBooleanfalsetrue일 경우 "접기" 버튼을 숨깁니다.
no-button-removeBooleanfalsetrue일 경우 "삭제" 버튼을 숨깁니다.
outside-bodyBooleanfalse외부에서 본문 영역 외의 내용 삽입 시 사용 (outside-body 슬롯 활용).
header-classString''헤더 영역에 적용할 CSS 클래스.
body-classString''본문 영역에 적용할 CSS 클래스.
footer-classString''푸터 영역에 적용할 CSS 클래스.
panel-classString''패널 전체에 추가로 적용할 사용자 정의 클래스.

Slot ​

이름설명
(default)패널의 본문(body)에 표시할 기본 내용입니다.
header기본 title 대신 사용자 정의 헤더 내용을 삽입할 수 있습니다.
footer패널 하단(footer)에 표시할 내용을 정의합니다.
before-body본문 영역 위에 삽입할 내용을 정의합니다.
outside-bodypanel-body 영역 외부에 삽입할 내용을 정의합니다. (outside-body prop과 연계)
after-footer푸터 영역 하단에 삽입할 내용을 정의합니다.

기본 ​

  • variant prop을 사용하여 패널의 테마를 변경하는 방법을 보여줍니다. 기본적으로 어두운 inverse 테마가 적용되며, default 값을 사용하여 밝은 테마로 변경할 수 있습니다.

html
<panel>
</panel>

<panel variant="default">
</panel>

TIP

variant prop에 사용자 정의 값을 지정하면 panel-사용자정의값 클래스가 패널에 추가되어 CSS를 통해 완전히 새로운 테마를 만들 수 있습니다.

기본 슬롯 ​

  • title prop을 사용하여 패널의 상단에 제목을 표시합니다.
  • 기본 슬롯 (<panel>본문</panel>)을 통해 패널의 주요 내용을 삽입합니다.
  • <template #footer> 슬롯을 사용하여 패널 하단에 추가적인 정보나 액션 버튼 등을 배치할 수 있습니다.

TITLE

body
footer
html
<panel title="TITLE">
    body
    <template #footer>
        footer
    </template>
</panel>

Hidden ​

  • 다양한 no-* prop을 사용하여 패널의 특정 영역이나 기능을 숨기는 방법을 보여줍니다.

Header Hidden ​

  • no-header: 패널의 제목 영역 전체를 숨깁니다
body
html
<panel no-header>
    body
</panel>

body Hidden ​

  • no-body: 패널의 본문 영역을 숨깁니다.

html
<panel no-body>
    body
</panel>

button Hidden ​

모든 버튼 숨기기 ​

  • no-button: 패널 상단의 모든 기본 버튼 (확장, 새로고침, 접기, 삭제)을 숨깁니다.

TITLE

html
<panel no-button></panel>

특정 버튼 숨기기 ​

  • no-button-expand, no-button-reload, no-button-collapse, no-button-remove: 각각 특정 버튼 하나씩을 숨깁니다.

no-button-expand

"확장" 버튼을 숨깁니다.

no-button-reload

"새로고침" 버튼을 숨깁니다.

no-button-collapse

"접기" 버튼을 숨깁니다.

no-button-remove

"삭제" 버튼을 숨깁니다.
html
<!--"확장" 버튼을 숨깁니다.-->
<panel no-button-expand></panel>

<!--"새로고침" 버튼을 숨깁니다.-->
<panel no-button-reload></panel>

<!--"접기" 버튼을 숨깁니다.-->
<panel no-button-collapse></panel>

<!--"삭제" 버튼을 숨깁니다.-->
<panel no-button-remove></panel>

스타일 커스터마이징 ​

  • headerClass, bodyClass, footerClass prop을 사용하여 패널의 각 영역에 CSS 클래스를 적용하여 스타일을 변경하는 방법을 보여줍니다.
  • 예시에서는 배경색을 변경하는 클래스 (bg-lime, bg-blue, bg-purple)를 적용하여 각 영역의 스타일을 사용자 정의하는 방법을 쉽게 이해할 수 있도록 합니다. 이를 통해 텍스트 색상, 패딩, 마진 등 다양한 스타일을 적용할 수 있습니다.

Header

body
footer
html
<panel header-class="bg-lime" body-class="bg-blue" footer-class="bg-purple"></panel>