Collapse 접이식 패널

접이식 패널로 콘텐츠 영역을 깔끔하게 정리해요.

출처: 문서

본문

언제 사용하나요?

콘텐츠 영역을 접어서 정리해야 할 때 사용해요.

기본 사용법

여러 패널을 동시에 펼칠 수 있고, 패널끼리 서로 영향을 주지 않아요.

:::demo

<template>
  <div class="collapse-demo">
    <d-collapse v-model="collapseValue">
      <d-collapse-item title="沉浸 Immersive" name="immersive">
        <div>
          沉浸式体验包括人的感官体验和认知体验，当用户的个人技能与面对的挑战互相匹配，并且长时间处在稳定状态时，用户达到心流状态并且不易被外界因素所干扰。
        </div>
      </d-collapse-item>
      <d-collapse-item title="灵活 Flexible" name="flexible">
        <div>
          自带各类完整的模板和典型场景，与此同时，DevUI提供超过50个独立原子级组件，用户可以自由组合，用小组件拼接出符合自身产品需要的分子级控件；
        </div>
        <div>可以根据自身的产品需求灵活选择，既可以直接使用现有的典型页面模板，也可以从小控件做起，利用现有资源拼接自己的页面。</div>
      </d-collapse-item>
      <d-collapse-item title="至简 Simple" name="simple" disabled>
        <div>坚持以用户为中心去进行设计，注重直观可达性，把服务示例化以帮助用户快速融入到使用中去。</div>
        <div>同时，DevUI提供大量的快捷键，并且图形化信息反馈和引导，简化使用的流程、降低使用的门槛。</div>
        <div>让用户能够所见即所得，做到快速上手，便捷实用。</div>
      </d-collapse-item>
    </d-collapse>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const collapseValue = ref(['immersive']);
    return {
      collapseValue,
    };
  },
});
</script>
<style>
.collapse-demo {
  margin-bottom: 20px;
}
</style>

:::

아코디언 효과

한 번에 하나의 패널만 펼칠 수 있어요. accordion 속성으로 설정해요.

:::demo

<template>
  <div class="collapse-demo">
    <d-collapse v-model="collapseAccordionValue" accordion>
      <d-collapse-item title="沉浸 Immersive" name="immersive">
        <div>
          沉浸式体验包括人的感官体验和认知体验，当用户的个人技能与面对的挑战互相匹配，并且长时间处在稳定状态时，用户达到心流状态并且不易被外界因素所干扰。
        </div>
      </d-collapse-item>
      <d-collapse-item title="灵活 Flexible" name="flexible">
        <div>
          自带各类完整的模板和典型场景，与此同时，DevUI提供超过50个独立原子级组件，用户可以自由组合，用小组件拼接出符合自身产品需要的分子级控件；
        </div>
        <div>可以根据自身的产品需求灵活选择，既可以直接使用现有的典型页面模板，也可以从小控件做起，利用现有资源拼接自己的页面。</div>
      </d-collapse-item>
      <d-collapse-item title="至简 Simple" name="simple">
        <div>坚持以用户为中心去进行设计，注重直观可达性，把服务示例化以帮助用户快速融入到使用中去。</div>
        <div>同时，DevUI提供大量的快捷键，并且图形化信息反馈和引导，简化使用的流程、降低使用的门槛。</div>
        <div>让用户能够所见即所得，做到快速上手，便捷实用。</div>
      </d-collapse-item>
    </d-collapse>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const collapseAccordionValue = ref('immersive');
    return {
      collapseAccordionValue,
    };
  },
});
</script>

:::

패널 제목 커스터마이즈

CollapseItem의 title 슬롯으로 설정해요.

:::demo

<template>
  <div class="collapse-demo">
    <d-collapse v-model="collapseValue1">
      <d-collapse-item name="immersive">
        <template #title>
          沉浸 Immersive
          <d-icon name="like"></d-icon>
        </template>
        <div>
          沉浸式体验包括人的感官体验和认知体验，当用户的个人技能与面对的挑战互相匹配，并且长时间处在稳定状态时，用户达到心流状态并且不易被外界因素所干扰。
        </div>
      </d-collapse-item>
      <d-collapse-item title="灵活 Flexible" name="flexible">
        <div>
          自带各类完整的模板和典型场景，与此同时，DevUI提供超过50个独立原子级组件，用户可以自由组合，用小组件拼接出符合自身产品需要的分子级控件；
        </div>
        <div>可以根据自身的产品需求灵活选择，既可以直接使用现有的典型页面模板，也可以从小控件做起，利用现有资源拼接自己的页面。</div>
      </d-collapse-item>
      <d-collapse-item title="至简 Simple" name="simple">
        <div>坚持以用户为中心去进行设计，注重直观可达性，把服务示例化以帮助用户快速融入到使用中去。</div>
        <div>同时，DevUI提供大量的快捷键，并且图形化信息反馈和引导，简化使用的流程、降低使用的门槛。</div>
        <div>让用户能够所见即所得，做到快速上手，便捷实用。</div>
      </d-collapse-item>
    </d-collapse>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const collapseValue1 = ref('immersive');
    return {
      collapseValue1,
    };
  },
});
</script>

:::

Collapse 파라미터

Collapse 이벤트

Collapse 슬롯

Collapse Item 파라미터

Collapse Item 슬롯

더 알아보기 (Learn more)

Collapse로 콘텐츠 영역을 접었다 펼 수 있어요. 더 자세한 내용은 공식 문서를 참고하세요.