Panel 패널

내용을 그룹으로 묶어 보여 주는 콘텐츠 패널이에요.

출처: 문서

본문

내용을 그룹으로 묶는 데 사용하는 콘텐츠 패널이에요.

언제 사용하나요?

페이지 내용을 그룹으로 나눠 보여 줘야 할 때 사용해요. 보통 헤더, 콘텐츠 영역, 푸터 세 부분으로 이루어져요.

기본 사용법

:::demo

<template>
  <d-panel>
    <d-panel-header>Click me to expand</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
</template>

:::

기본 상태

:::demo is-collapsed를 true로 설정하면 패널이 기본으로 펼쳐져 있어요.

<template>
  <d-panel :is-collapsed="true">
    <d-panel-header>Panel header</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
</template>

:::

패널 유형

:::demo 패널 유형은 5가지예요: primary / success / danger / warning / info, 기본값은 info예요.

<template>
  <d-panel :is-collapsed="true">
    <d-panel-header>Panel with info Type</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-panel type="primary" :is-collapsed="true">
    <d-panel-header>Panel with primary Type</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-panel type="success" :is-collapsed="true">
    <d-panel-header>Panel with success Type</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-panel type="warning" :is-collapsed="true">
    <d-panel-header>Panel with warning Type</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-panel type="danger" :is-collapsed="true">
    <d-panel-header>Panel with danger Type</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
</template>

:::

패널 스타일

:::demo

<template>
  <d-panel @toggle="toggle" :is-collapsed="true" :has-left-padding="false">
    <d-panel-header>
      Panel has no left padding
      <em :class="`icon icon-chevron-${toggleState ? 'down' : 'up'}`"></em>
    </d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-panel :is-collapsed="true">
    <d-panel-header>Panel with header and footer</d-panel-header>
    <d-panel-body>This is body</d-panel-body>
    <d-panel-footer>This is footer</d-panel-footer>
  </d-panel>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const toggleState = ref(true);

    const toggle = (value) => {
      toggleState.value = value;
    };

    return {
      toggle,
      toggleState
    };
  }
});
</script>

:::

접힘 막기

:::demo before-toggle을 사용하면 패널이 접히는 것을 막을 수 있어요. 조건을 판단해서 Panel이 펼쳐져 있을 때 접힘 방지 버튼을 누르면 Panel을 접을 수 없고, Panel이 펼쳐져 있을 때는 조작에 영향을 주지 않아요.

<template>
  <d-panel
    type="primary"
    :is-collapsed="isCollapsed"
    @toggle="handleToggle"
    :before-toggle="beforeToggle"
  >
    <d-panel-header>
      Panel header
      <i :class="`icon-chevron-${toggle ? 'down' : 'up'}`"></i>
    </d-panel-header>
    <d-panel-body>This is body</d-panel-body>
  </d-panel>
  <br>
  <d-button @click="panelToggle = !panelToggle">
    {{ panelToggle ? '阻止折叠' : '允许折叠' }}
  </d-button>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    let isCollapsed = ref(true);
    let panelToggle = ref(true);
    let toggle = ref(true);
    let showAnimation = ref(true);

    const handleToggle = (value) => {
      toggle.value = value;
    };
    
    const beforeToggle = () => {
      return panelToggle.value;
    };

    return {
      toggle,
      panelToggle,
      beforeToggle,
      isCollapsed,
      handleToggle,
    };
  }
});
</script>

:::

Panel 파라미터

Panel 이벤트

Panel 타입 정의

PanelType

export type PanelType = 'primary' | 'success' | 'danger' | 'warning' | 'info';

더 알아보기 (Learn more)

d-panel은 헤더를 눌러 접었다 펼칠 수 있는 콘텐츠 묶음이에요. before-toggle 콜백에서 조건을 검사해 특정 상황에서는 접히지 않도록 막을 수 있다는 점이 특히 유용해요.