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

PehliBazar is a premier online marketplace dedicated to bringing you the finest selection of local handicrafts, modern fashion, and daily essentials.

Our mission is to support local artisans while providing customers with a seamless shopping experience and high-quality products.

Tracking your order is easy! Once your package is dispatched, you will receive a confirmation email containing a tracking ID.

You can enter this ID on our Order Tracking page to see the real-time status of your delivery.

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.

Please visit our Returns Portal to review eligibility and start your return process.

<template>
    <pub-accordion>
        <pub-accordion-panel>
            <pub-accordion-header>What is PehliBazar?</pub-accordion-header>
            <pub-accordion-content>
                <p class="mb-2 text-gray-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-gray-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-gray-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-gray-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-gray-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-gray-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 setup>
import { PubAccordion, PubAccordionPanel, PubAccordionHeader, PubAccordionContent } from "vuelicity";
</script>

Persistent accordion

Prop - persistent Usage

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

PehliBazar is a premier online marketplace dedicated to bringing you the finest selection of local handicrafts, modern fashion, and daily essentials.

Our mission is to support local artisans while providing customers with a seamless shopping experience and high-quality products.

Tracking your order is easy! Once your package is dispatched, you will receive a confirmation email containing a tracking ID.

You can enter this ID on our Order Tracking page to see the real-time status of your delivery.

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.

Please visit our Returns Portal to review eligibility and start your return process.

<template>
    <pub-accordion persistent>
        <pub-accordion-panel>
            <pub-accordion-header>What is PehliBazar?</pub-accordion-header>
            <pub-accordion-content>
                <p class="mb-2 text-gray-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-gray-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-gray-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-gray-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-gray-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-gray-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 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.

PehliBazar is a premier online marketplace dedicated to bringing you the finest selection of local handicrafts, modern fashion, and daily essentials.

Our mission is to support local artisans while providing customers with a seamless shopping experience and high-quality products.

Tracking your order is easy! Once your package is dispatched, you will receive a confirmation email containing a tracking ID.

You can enter this ID on our Order Tracking page to see the real-time status of your delivery.

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.

Please visit our Returns Portal to review eligibility and start your return process.

<template>
    <pub-accordion flushed>
        <pub-accordion-panel>
            <pub-accordion-header>What is PehliBazar?</pub-accordion-header>
            <pub-accordion-content>
                <p class="mb-2 text-gray-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-gray-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-gray-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-gray-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-gray-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-gray-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 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.

PehliBazar is a premier online marketplace dedicated to bringing you the finest selection of local handicrafts, modern fashion, and daily essentials.

Our mission is to support local artisans while providing customers with a seamless shopping experience and high-quality products.

Tracking your order is easy! Once your package is dispatched, you will receive a confirmation email containing a tracking ID.

You can enter this ID on our Order Tracking page to see the real-time status of your delivery.

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.

Please visit our Returns Portal to review eligibility and start your return process.

<template>
    <pub-accordion collapsed>
        <pub-accordion-panel>
            <pub-accordion-header>What is PehliBazar?</pub-accordion-header>
            <pub-accordion-content>
                <p class="mb-2 text-gray-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-gray-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-gray-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-gray-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-gray-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-gray-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 setup>
import { PubAccordion, PubAccordionContent, PubAccordionHeader, PubAccordionPanel } from "vuelicity";
</script>

Colouring Options

PehliBazar is a premier online marketplace dedicated to bringing you the finest selection of local handicrafts, modern fashion, and daily essentials.

Our mission is to support local artisans while providing customers with a seamless shopping experience and high-quality products.

Tracking your order is easy! Once your package is dispatched, you will receive a confirmation email containing a tracking ID.

You can enter this ID on our Order Tracking page to see the real-time status of your delivery.

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.

Please visit our Returns Portal to review eligibility and start your return process.

<template>
    <pub-accordion>
        <pub-accordion-panel>
            <pub-accordion-header class="hover:bg-blue-200 hover:text-blue-900" activeClass="bg-blue-100 text-blue-900">
                What is PehliBazar?
            </pub-accordion-header>
            <pub-accordion-content>
                <p class="mb-2 text-gray-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-gray-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" activeClass="bg-blue-100 text-blue-900">
                How can I track my order?
            </pub-accordion-header>
            <pub-accordion-content>
                <p class="mb-2 text-gray-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-gray-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" activeClass="bg-blue-100 text-blue-900">
                What is your return policy?
            </pub-accordion-header>
            <pub-accordion-content>
                <p class="mb-2 text-gray-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-gray-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 setup>
import { PubAccordion, PubAccordionPanel, PubAccordionHeader, PubAccordionContent } from "vuelicity";
</script>

Reference

PubAccordion

Properties

Name	Type	Default	Description	Options
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.