Collapse 折叠面板

折叠面板/手风琴

默认标题

• NPC-UI 是一个轻量高效的前端组件库
• 像游戏中的智能角色一样为开发者提供丰富的交互元素

插槽标题

• NPC-UI 是一个轻量高效的前端组件库
• 像游戏中的智能角色一样为开发者提供丰富的交互元素

默认标题

• NPC-UI 是一个轻量高效的前端组件库
• 像游戏中的智能角色一样为开发者提供丰富的交互元素

折叠面板

<script setup lang="ts">
import { ref } from 'vue'

const openValue = ref(['aa'])
</script>

<template>
  <div class="collapse-demo">
    <NpCollapse v-model="openValue">
      <NpCollapseItem name="aa" title="默认标题">
        <ul>
          <li>NPC-UI 是一个轻量高效的前端组件库</li>
          <li>像游戏中的智能角色一样为开发者提供丰富的交互元素</li>
        </ul>
      </NpCollapseItem>
      <NpCollapseItem name="cc" title="默认标题">
        <template #title>
          <p>插槽标题</p>
        </template>
        <ul>
          <li>NPC-UI 是一个轻量高效的前端组件库</li>
          <li>像游戏中的智能角色一样为开发者提供丰富的交互元素</li>
        </ul>
      </NpCollapseItem>
      <NpCollapseItem name="dd" title="默认标题" disabled>
        <ul>
          <li>NPC-UI 是一个轻量高效的前端组件库</li>
          <li>像游戏中的智能角色一样为开发者提供丰富的交互元素</li>
        </ul>
      </NpCollapseItem>
    </NpCollapse>
  </div>
</template>

<style scoped>
.collapse-demo {
  margin: 20px;
}
</style>

默认标题

• NPC-UI 是一个轻量高效的前端组件库
• 像游戏中的智能角色一样为开发者提供丰富的交互元素

插槽标题

• NPC-UI 是一个轻量高效的前端组件库
• 像游戏中的智能角色一样为开发者提供丰富的交互元素

默认标题

• NPC-UI 是一个轻量高效的前端组件库
• 像游戏中的智能角色一样为开发者提供丰富的交互元素

手风琴效果

<script setup lang="ts">
import { ref } from 'vue'

const openValue = ref(['aa'])
</script>

<template>
  <div class="collapse-demo">
    <NpCollapse v-model="openValue" accordion>
      <NpCollapseItem name="aa" title="默认标题">
        <ul>
          <li>NPC-UI 是一个轻量高效的前端组件库</li>
          <li>像游戏中的智能角色一样为开发者提供丰富的交互元素</li>
        </ul>
      </NpCollapseItem>
      <NpCollapseItem name="cc" title="默认标题">
        <template #title>
          <p>插槽标题</p>
        </template>
        <ul>
          <li>NPC-UI 是一个轻量高效的前端组件库</li>
          <li>像游戏中的智能角色一样为开发者提供丰富的交互元素</li>
        </ul>
      </NpCollapseItem>
      <NpCollapseItem name="dd" title="默认标题" disabled>
        <ul>
          <li>NPC-UI 是一个轻量高效的前端组件库</li>
          <li>像游戏中的智能角色一样为开发者提供丰富的交互元素</li>
        </ul>
      </NpCollapseItem>
    </NpCollapse>
  </div>
</template>

<style scoped>
.collapse-demo {
  margin: 20px;
}
</style>