Accordion

Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options

Examples

Accordion

A basic accordion function.

Code

<script setup lang="ts">
import { BaseAccordion, BaseAccordionItem } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseAccordion">
    <component
      :is="BaseAccordionItem"
      :item-id="1"
      title="Accordion #1"
      content="Hello World"
    ></component>
    <component
      :is="BaseAccordionItem"
      :item-id="2"
      title="Accordion #2"
      content="Hello World"
    ></component>
    <component
      :is="BaseAccordionItem"
      :item-id="3"
      title="Accordion #3"
      content="Hello World"
    ></component>
  </component>
</template>

Always Open

The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user.

Code

<script setup lang="ts">
import { BaseAccordion, BaseAccordionItem } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseAccordion" :alwaysOpen="true">
    <component
      :is="BaseAccordionItem"
      :item-id="1"
      title="Accordion #1"
      content="Hello World"
    ></component>
    <component
      :is="BaseAccordionItem"
      :item-id="2"
      title="Accordion #2"
      content="Hello World"
    ></component>
    <component
      :is="BaseAccordionItem"
      :item-id="3"
      title="Accordion #3"
      content="Hello World"
    ></component>
  </component>
</template>

Using Slot

Using slot for rendering accordion item title & content

Code

<script setup lang="ts">
import { BaseAccordion, BaseAccordionItem } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseAccordion">
    <component :is="BaseAccordionItem" :item-id="1">
      <template #title>Accordion #1</template>
      <template #default>Hello World</template>
    </component>
    <component :is="BaseAccordionItem" :item-id="2">
      <template #title>Accordion #2</template>
      <template #default>Hello World</template>
    </component>
    <component :is="BaseAccordionItem" :item-id="3">
      <template #title>Accordion #3</template>
      <template #default>Hello World</template>
    </component>
  </component>
</template>

Accordion API

Props

Name	Type	Default	Description
alwaysOpen	boolean	false	Disable behavior automatic close another accordion item

Slot

#default slot for rendering accordion item

Accordion Item API

Props

Name	Type	Default	Description
item-id	string		Accordion item identifier is required and should be unique. It used for calculate height each item and manage active state
title	string		Accordion item title.
content	string		Accordion item content.

Slot

#default slot for rendering accordion item content

#title slot for rendering accordion item title