Make each day your masterpiece.
讓每一天成為你的傑作。

Accordion 名為可折疊的面板，根據用戶的操作展開或折疊。

適用情境:
管理大量的資訊，並且讓使用者可以輕鬆地在不同的內容區域之間切換。

配置文件

1. 配置 nuxt.config.ts**： 在 nuxt.config.ts 設定

export default defineNuxtConfig({
  primevue: {
    components: {
      prefix: "p-",
      include: [
        "Accordion",
        "AccordionTab"
      ]
    },
  },
  plugins: [{ src: '~/plugins/primevue.js', ssr: false }],
});

組件撰寫

使用 PrimeVue 的 Accordion 和 AccordionTab 組件來實現面板的折疊式內容。每個面板顯示不同的內容，且其中一個面板的標題使用了自定義的插槽。

HTML 部分 (template)

<template>
  <div class="card">
    <Accordion :multiple="true" :activeIndex="[0]">
      <AccordionTab header="白雪公主">
        <p class="m-0">
          《白雪公主》（Snow
          White）是德國格林兄弟收錄在《格林童話》中的一個著名童話故事。故事內容圍繞一位美麗的公主和她的邪惡繼母之間的衝突。
        </p>
      </AccordionTab>
      <AccordionTab>
        <template v-slot:header>
          <div class="d-flex">
            <span>睡美人</span>
            <span><i class="pi pi-user"></i></span>
          </div>
        </template>
        <p class="m-0">
          《睡美人》（Sleeping
          Beauty）是一個著名的童話故事，源於歐洲的民間傳說和文學作品。最著名的版本是由查爾斯·佩羅（Charles
          Perrault）於 1697 年發表的《睡美人》，以及格林兄弟（Brothers
          Grimm）收錄在《格林童話》中的版本
        </p>
      </AccordionTab>
    </Accordion>
  </div>
</template>

Accordion 組件用來實現折疊式面板。

1. :multiple="true"：
   允許多個面板同時展開。 false為默認值，一次只能展開一個面板。
2. :activeIndex="[0]"：設置默認打開的面板。
   這裡設為 [0]，意味著第一次渲染時，第一個面板（即 "白雪公主" 面板）會是展開狀態。
3. header 使用了自定義的插槽來設置標題。
   v-slot:header：自定義插槽 header

JavaScript 部分 (script setup)

<script setup>
import Accordion from "primevue/accordion";
import AccordionTab from "primevue/accordiontab";
</script>

從 PrimeVue 中引入 Accordion 和 AccordionTab 組件，用來實現折疊式面板功能。

每天都有不斷地進步，給自己一個讚，
明天見～

參考資料:
https://v3.primevue.org/accordion/