PubAccordion

This is an accordion component that can be used to display content in an accordion. It provides various options for customizing the accordion, such as adding a border, shadow, and rounded corners.

Default accordion

vue

<template>
  <pub-accordion>
    <pub-accordion-panel>
      <pub-accordion-header>What is PehliBazar?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          PehliBazar is a premier online marketplace dedicated to bringing you the finest selection of local
          handicrafts, modern fashion, and daily essentials.
        </p>
        <p class="text-grey-500">
          Our mission is to support local artisans while providing customers with a seamless shopping
          experience and high-quality products.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
    <pub-accordion-panel>
      <pub-accordion-header>How can I track my order?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          Tracking your order is easy! Once your package is dispatched, you will receive a confirmation email
          containing a tracking ID.
        </p>
        <p class="text-grey-500">
          You can enter this ID on our
          <a
            href="/track-order"
            class="text-blue-600 hover:underline"
          >Order Tracking</a> page to see the
          real-time status of your delivery.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
    <pub-accordion-panel>
      <pub-accordion-header>What is your return policy?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          At PehliBazar, we want you to be completely satisfied with your purchase. If for any reason you are
          not happy, you can return most items within 30 days of delivery.
        </p>
        <p class="text-grey-500">
          Please visit our <a
            href="/returns"
            class="text-blue-600 hover:underline"
          >Returns Portal</a> to
          review eligibility and start your return process.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
  </pub-accordion>
</template>

<script lang="ts" setup>
import { PubAccordion, PubAccordionContent, PubAccordionHeader, PubAccordionPanel } from 'vuelicity'
</script>

Persistent accordion

Prop - `persistent` Usage

The persistent prop can be used to keep the items open when another item is clicked.

vue

<template>
  <pub-accordion persistent>
    <pub-accordion-panel>
      <pub-accordion-header>What is PehliBazar?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          PehliBazar is a premier online marketplace dedicated to bringing you the finest selection of local
          handicrafts, modern fashion, and daily essentials.
        </p>
        <p class="text-grey-500">
          Our mission is to support local artisans while providing customers with a seamless shopping
          experience and high-quality products.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
    <pub-accordion-panel>
      <pub-accordion-header>How can I track my order?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          Tracking your order is easy! Once your package is dispatched, you will receive a confirmation email
          containing a tracking ID.
        </p>
        <p class="text-grey-500">
          You can enter this ID on our
          <a
            href="/track-order"
            class="text-blue-600 hover:underline"
          >Order Tracking</a>
          page to see the real-time status of your delivery.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
    <pub-accordion-panel>
      <pub-accordion-header>What is your return policy?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          At PehliBazar, we want you to be completely satisfied with your purchase. If for any reason you are
          not happy, you can return most items within 30 days of delivery.
        </p>
        <p class="text-grey-500">
          Please visit our
          <a
            href="/returns"
            class="text-blue-600 hover:underline"
          >Returns Portal</a>
          to review eligibility and start your return process.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
  </pub-accordion>
</template>

<script lang="ts" setup>
import { PubAccordion, PubAccordionContent, PubAccordionHeader, PubAccordionPanel } from 'vuelicity'
</script>

Flushed accordion

Prop - `flushed` Usage

The flushed prop can be used to remove the default background-color and rounded corners.

vue

<template>
  <pub-accordion flushed>
    <pub-accordion-panel>
      <pub-accordion-header>What is PehliBazar?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          PehliBazar is a premier online marketplace dedicated to bringing you the finest selection of local
          handicrafts, modern fashion, and daily essentials.
        </p>
        <p class="text-grey-500">
          Our mission is to support local artisans while providing customers with a seamless shopping
          experience and high-quality products.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
    <pub-accordion-panel>
      <pub-accordion-header>How can I track my order?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          Tracking your order is easy! Once your package is dispatched, you will receive a confirmation email
          containing a tracking ID.
        </p>
        <p class="text-grey-500">
          You can enter this ID on our
          <a
            href="/track-order"
            class="text-blue-600 hover:underline"
          >Order Tracking</a>
          page to see the real-time status of your delivery.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
    <pub-accordion-panel>
      <pub-accordion-header>What is your return policy?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          At PehliBazar, we want you to be completely satisfied with your purchase. If for any reason you are
          not happy, you can return most items within 30 days of delivery.
        </p>
        <p class="text-grey-500">
          Please visit our
          <a
            href="/returns"
            class="text-blue-600 hover:underline"
          >Returns Portal</a>
          to review eligibility and start your return process.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
  </pub-accordion>
</template>

<script lang="ts" setup>
import { PubAccordion, PubAccordionContent, PubAccordionHeader, PubAccordionPanel } from 'vuelicity'
</script>

Initially collapsed

Prop - `collapsed` Usage

The collapsed prop can be used to collapse the accordion to the first open item.

vue

<template>
  <pub-accordion collapsed>
    <pub-accordion-panel>
      <pub-accordion-header>What is PehliBazar?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          PehliBazar is a premier online marketplace dedicated to bringing you the finest selection of local
          handicrafts, modern fashion, and daily essentials.
        </p>
        <p class="text-grey-500">
          Our mission is to support local artisans while providing customers with a seamless shopping
          experience and high-quality products.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
    <pub-accordion-panel>
      <pub-accordion-header>How can I track my order?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          Tracking your order is easy! Once your package is dispatched, you will receive a confirmation email
          containing a tracking ID.
        </p>
        <p class="text-grey-500">
          You can enter this ID on our
          <a
            href="/track-order"
            class="text-blue-600 hover:underline"
          >Order Tracking</a> page to see the
          real-time status of your delivery.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
    <pub-accordion-panel>
      <pub-accordion-header>What is your return policy?</pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          At PehliBazar, we want you to be completely satisfied with your purchase. If for any reason you are
          not happy, you can return most items within 30 days of delivery.
        </p>
        <p class="text-grey-500">
          Please visit our <a
            href="/returns"
            class="text-blue-600 hover:underline"
          >Returns Portal</a> to
          review eligibility and start your return process.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
  </pub-accordion>
</template>

<script lang="ts" setup>
import { PubAccordion, PubAccordionContent, PubAccordionHeader, PubAccordionPanel } from 'vuelicity'
</script>

Colouring Options

vue

<template>
  <pub-accordion>
    <pub-accordion-panel>
      <pub-accordion-header
        class="hover:bg-blue-200 hover:text-blue-900"
        active-class="bg-blue-100 text-blue-900"
      >
        What is PehliBazar?
      </pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          PehliBazar is a premier online marketplace dedicated to bringing you the finest selection of local
          handicrafts, modern fashion, and daily essentials.
        </p>
        <p class="text-grey-500">
          Our mission is to support local artisans while providing customers with a seamless shopping
          experience and high-quality products.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
    <pub-accordion-panel>
      <pub-accordion-header
        class="hover:bg-blue-200 hover:text-blue-900"
        active-class="bg-blue-100 text-blue-900"
      >
        How can I track my order?
      </pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          Tracking your order is easy! Once your package is dispatched, you will receive a confirmation email
          containing a tracking ID.
        </p>
        <p class="text-grey-500">
          You can enter this ID on our
          <a
            href="/track-order"
            class="text-blue-600 hover:underline"
          >Order Tracking</a> page to see the
          real-time status of your delivery.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
    <pub-accordion-panel>
      <pub-accordion-header
        class="hover:bg-blue-200 hover:text-blue-900"
        active-class="bg-blue-100 text-blue-900"
      >
        What is your return policy?
      </pub-accordion-header>
      <pub-accordion-content>
        <p class="mb-2 text-grey-500">
          At PehliBazar, we want you to be completely satisfied with your purchase. If for any reason you are
          not happy, you can return most items within 30 days of delivery.
        </p>
        <p class="text-grey-500">
          Please visit our <a
            href="/returns"
            class="text-blue-600 hover:underline"
          >Returns Portal</a> to
          review eligibility and start your return process.
        </p>
      </pub-accordion-content>
    </pub-accordion-panel>
  </pub-accordion>
</template>

<script lang="ts" setup>
import { PubAccordion, PubAccordionContent, PubAccordionHeader, PubAccordionPanel } from 'vuelicity'
</script>

Reference

PubAccordion

Properties

Name	Type	Default	Description
flushed	Boolean	`false`	Whether to remove the default background-color and rounded corners.
persistent	Boolean	`false`	Whether to keep the items open when another item is clicked.
collapsed	Boolean	`false`	Whether to collapse the accordion to the first open item.
class	String	`''`	Additional CSS classes to apply.

Slots

Name	Description
default	Slot for `PubAccordionPanel` components.

PubAccordionPanel

Properties

Name	Type	Default	Description	Options
activeClass	String	`''`	Additional CSS classes to apply to the active panel.

Slots

Name	Description
default	Slot for `PubAccordionHeader` and `PubAccordionContent` components.

Emits

Name	Description
show	Emitted when the panel is shown.
hide	Emitted when the panel is hidden.

PubAccordionHeader

Properties

Name	Type	Default	Description	Options
activeClass	String	`''`	Additional CSS classes to apply to the active panel.
class	String	`''`	Additional CSS classes to apply.

Slots

Name	Description
default	The header content of the accordion panel.

PubAccordionContent

Properties

Name	Type	Default	Description	Options
class	String	`''`	Additional CSS classes to apply.
activeClass	String	`''`	Additional CSS classes to apply to the active panel.

Slots

Name	Description
default	The body content of the accordion panel.

PubAccordion ​

Default accordion ​

Persistent accordion ​

Prop - persistent Usage ​

Flushed accordion ​

Prop - flushed Usage ​

Initially collapsed ​

Prop - collapsed Usage ​

Colouring Options ​

Reference ​

PubAccordion ​

Properties ​

Slots ​

PubAccordionPanel ​

Properties ​

Slots ​

Emits ​

PubAccordionHeader ​

Properties ​

Slots ​

PubAccordionContent ​

Properties ​

Slots ​

PubAccordion

Default accordion

Persistent accordion

Prop - `persistent` Usage

Flushed accordion

Prop - `flushed` Usage

Initially collapsed

Prop - `collapsed` Usage

Colouring Options

Reference

PubAccordion

Properties

Slots

PubAccordionPanel

Properties

Slots

Emits

PubAccordionHeader

Properties

Slots

PubAccordionContent

Properties

Slots