Update accordion sample for template and controlled
Cagatay Civici
parent
6da88e001b
commit
eaa0212ea0
|
|
@ -3,10 +3,10 @@
|
|||
<p>Accordion can be controlled programmatically using a binding to <i>activeIndex</i> along with <i>v-model</i> to update the active index.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="pb-3">
|
||||
<Button @click="active = 0" text label="Activate 1st" />
|
||||
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
|
||||
<div class="flex mb-3 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
|
||||
<Accordion v-model:activeIndex="active">
|
||||
|
|
@ -40,10 +40,10 @@ export default {
|
|||
active: 0,
|
||||
code: {
|
||||
basic: `
|
||||
<div class="pb-3">
|
||||
<Button @click="active = 0" text label="Activate 1st" />
|
||||
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
|
||||
<div class="flex mb-3 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
|
||||
<Accordion v-model:activeIndex="active">
|
||||
|
|
@ -70,10 +70,10 @@ export default {
|
|||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="pb-3">
|
||||
<Button @click="active = 0" text label="Activate 1st" />
|
||||
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
|
||||
<div class="flex mb-3 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
|
||||
<Accordion v-model:activeIndex="active">
|
||||
|
|
@ -112,10 +112,10 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="pb-3">
|
||||
<Button @click="active = 0" text label="Activate 1st" />
|
||||
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
|
||||
<div class="flex mb-3 gap-2 justify-content-end">
|
||||
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||
</div>
|
||||
|
||||
<Accordion v-model:activeIndex="active">
|
||||
|
|
|
|||
|
|
@ -3,11 +3,14 @@
|
|||
<p>Title section of a tab is customized with the <i>header</i> slot.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Accordion class="accordion-custom" :activeIndex="0">
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Amy Elsner</span>
|
||||
<Badge value="3" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
|
|
@ -16,8 +19,11 @@
|
|||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Header II</span>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Onyama Limba</span>
|
||||
<Badge value="4" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
|
|
@ -26,9 +32,11 @@
|
|||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Header III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
|
||||
<Badge value="2" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
|
|
@ -46,11 +54,14 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Accordion class="accordion-custom" :activeIndex="0">
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Amy Elsner</span>
|
||||
<Badge value="3" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
|
|
@ -59,8 +70,11 @@ export default {
|
|||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Header II</span>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Onyama Limba</span>
|
||||
<Badge value="4" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
|
|
@ -69,9 +83,11 @@ export default {
|
|||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Header III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
|
||||
<Badge value="2" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
|
|
@ -83,11 +99,14 @@ export default {
|
|||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion class="accordion-custom" :activeIndex="0">
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Amy Elsner</span>
|
||||
<Badge value="3" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
|
|
@ -96,8 +115,11 @@ export default {
|
|||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Header II</span>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Onyama Limba</span>
|
||||
<Badge value="4" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
|
|
@ -106,9 +128,11 @@ export default {
|
|||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Header III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
|
||||
<Badge value="2" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
|
|
@ -121,30 +145,18 @@ export default {
|
|||
|
||||
<script>
|
||||
<\/script>
|
||||
|
||||
<style scoped>
|
||||
.accordion-custom i span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.accordion-custom span {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.p-accordion p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion class="accordion-custom" :activeIndex="0">
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Amy Elsner</span>
|
||||
<Badge value="3" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
|
|
@ -153,8 +165,11 @@ export default {
|
|||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Header II</span>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Onyama Limba</span>
|
||||
<Badge value="4" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
|
|
@ -163,9 +178,11 @@ export default {
|
|||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Header III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
<span class="flex align-items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
|
||||
<Badge value="2" class="ml-auto" />
|
||||
</span>
|
||||
</template>
|
||||
<p class="m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
|
|
@ -178,38 +195,9 @@ export default {
|
|||
|
||||
<script setup>
|
||||
<\/script>
|
||||
|
||||
<style scoped>
|
||||
.accordion-custom i span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.accordion-custom span {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.p-accordion p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
</style>`
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.accordion-custom i span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.accordion-custom span {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.p-accordion p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue