If we want to personalize the AccordionTab component by adding a new variant prop, we can achieve this by creating a separate component that extends the original one and includes the prop:
<!-- MyAccordionTab.vue -->
<script>
import { defineComponent } from 'vue'
import AccordionTab from 'primevue/accordiontab'
export default defineComponent({
name: 'CustomizedAccordionTab',
extends: AccordionTab,
props: {
variant: Number, 👈
},
render: AccordionTab.render,
})
</script>
Following a similar approach as above, we can also extend the Accordion component to modify its getTabHeaderClass() method so it can apply a specific class based on the variant prop of each tab:
<!-- MyAccordion.vue -->
<script>
import { defineComponent } from 'vue'
import Accordion from 'primevue/accordion'
export default defineComponent({
extends: Accordion,
methods: {
getTabHeaderClass(tab, i) {
const headerClasses = Accordion.methods.getTabHeaderClass.call(this, tab, i)
const variantClass = this.getCurrentVariantClass(tab.props.variant)
return headerClasses.concat(variantClass)
},
getCurrentVariantClass(variantNumber) {
switch (variantNumber) {
case 1:
return 'p-accordion-header-variant-a'
case 2:
return 'p-accordion-header-variant-b'
case 3:
return 'p-accordion-header-variant-c'
}
},
},
render: Accordion.render,
})
</script>
<style scoped>
.p-accordion-header-variant-a .p-accordion-header-link {
border: solid 1px red;
}
.p-accordion-header-variant-b .p-accordion-header-link {
border: solid 1px green;
}
.p-accordion-header-variant-c .p-accordion-header-link {
border: solid 1px blue;
}
</style>
Finally, integrate these customized components into your application:
<!-- App.vue -->
<script setup>
import Accordion from '@/components/MyAccordion.vue'
import AccordionTab from '@/components/MyAccordionTab.vue'
const tabs = [/*...*/]
</script>
<template>
<Accordion multiple>
<AccordionTab v-for="tab in tabs" :key="tab.title" :variant="tab.variant" :header="tab.title">
<p>{{ tab.content }}</p>
</AccordionTab>
</Accordion>
</template>
Check out the demo here!