Skip to content

Accordion

Display content with collapse behavior

Usage

Basic Usage

preview
vue
<template>
  <p-accordion>
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 3">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

Multiple Open Item

preview
vue
<template>
  <p-accordion :multiple="true">
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 3">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

Disabled Item

preview
vue
<template>
  <p-accordion>
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2" disabled>
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 3">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

With Defined Items

preview
vue
<template>
  <p-accordion :items="items" />
</template>

<script setup>
import { defineAccordion } from '@privyid/persona/core'

const items = defineAccordion([
  {
    title  : 'Item Title 1',
    content: 'Content Item 1',
  },
  {
    title  : 'Item Title 2',
    content: 'Content Item 2',
  },
  {
    title   : 'Item Title 3',
    content : 'Content Item 3',
    disabled: true,
  },
  {
    title  : 'Item Title 4',
    content: 'Content Item 4',
  },
])
</script>

Variant

Pill Mode

preview
vue
<template>
  <p-accordion pill>
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 3">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

Flush Mode

preview
vue
<template>
  <p-accordion flush>
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 3">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

Hide Caret

Add props no-caret to hide caret icon. Add on p-accordion to hide globally, or add on p-accordion-item to hide spesific item.

preview
vue
<template>
  <p-accordion no-caret>
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

Single Accordion Item

preview
vue
<template>
  <p-accordion-item title="Item 1">
    <div class="p-4">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </div>
  </p-accordion-item>
</template>

Custom Caret

preview
vue
<template>
  <p-accordion-item title="Item 1">
    <template #caret="{ expanded }">
      <CaretUp v-if="expanded" />
      <CaretDown v-else />
    </template>
    <div class="p-4">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </div>
  </p-accordion-item>
</template>

Binding v-model

v-model on p-accordion

preview

Active :

-
vue
<template>
  <p-accordion v-model="active">
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

<script setup>
const active = ref('')
</script>

v-model on p-accordion-item

preview

Expanded :

false
vue
<template>
  <p-accordion-item
    v-model="expanded"
    title="Item 1">
    <div class="p-4">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </div>
  </p-accordion-item>
</template>
<script setup>
const expanded = ref(false)
</script>

API

Props <p-accordion>

PropsTypeDefaultDescription
flushBooleanfalseEnable flush, accordion without container-border
pillBooleanfalseEnable pill, accordion with space on each accordion item
multipleBooleanfalseAllow expand multiple accordion item
no-caretBooleanfalseHide caret icon
itemsArray-Accordion items
v-modelString-ID of current expanded accordion item

Slots <p-accordion>

NameDescription
defaultAccordion content

Props <p-accordion-item>

PropsTypeDefaultDescription
titleString-Accordion Item Header Title
disabledBooleanfalseDisable state of accordion item
no-caretBooleanfalseHide caret icon
v-modelBooleanfalsev-model value for expand or collapse the accordion item

Slots <p-accordion-item>

NameDescription
defaultAccordion item content
activatorContent to replace Item Activator
caretContent to replace Caret Icon

Events <p-accordion-item>

NameArgumentsDescription
expand-Event when accordion item expanded
collapse-Event when accordion item collapsed

Released under the MIT License.