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>
|
<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>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="pb-3">
|
<div class="flex mb-3 gap-2 justify-content-end">
|
||||||
<Button @click="active = 0" text label="Activate 1st" />
|
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||||
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
|
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||||
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
|
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Accordion v-model:activeIndex="active">
|
<Accordion v-model:activeIndex="active">
|
||||||
|
|
@ -40,10 +40,10 @@ export default {
|
||||||
active: 0,
|
active: 0,
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<div class="pb-3">
|
<div class="flex mb-3 gap-2 justify-content-end">
|
||||||
<Button @click="active = 0" text label="Activate 1st" />
|
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||||
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
|
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||||
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
|
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Accordion v-model:activeIndex="active">
|
<Accordion v-model:activeIndex="active">
|
||||||
|
|
@ -70,10 +70,10 @@ export default {
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="pb-3">
|
<div class="flex mb-3 gap-2 justify-content-end">
|
||||||
<Button @click="active = 0" text label="Activate 1st" />
|
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||||
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
|
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||||
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
|
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Accordion v-model:activeIndex="active">
|
<Accordion v-model:activeIndex="active">
|
||||||
|
|
@ -112,10 +112,10 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="pb-3">
|
<div class="flex mb-3 gap-2 justify-content-end">
|
||||||
<Button @click="active = 0" text label="Activate 1st" />
|
<Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
|
||||||
<Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
|
<Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
|
||||||
<Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
|
<Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Accordion v-model:activeIndex="active">
|
<Accordion v-model:activeIndex="active">
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,14 @@
|
||||||
<p>Title section of a tab is customized with the <i>header</i> slot.</p>
|
<p>Title section of a tab is customized with the <i>header</i> slot.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Accordion class="accordion-custom" :activeIndex="0">
|
<Accordion :activeIndex="0">
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-calendar"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header I</span>
|
<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>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-user"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header II</span>
|
<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>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-search"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header III</span>
|
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||||
<i class="pi pi-cog"></i>
|
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
|
||||||
|
<Badge value="2" class="ml-auto" />
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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 {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<Accordion class="accordion-custom" :activeIndex="0">
|
<Accordion :activeIndex="0">
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-calendar"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header I</span>
|
<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>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-user"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header II</span>
|
<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>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-search"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header III</span>
|
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||||
<i class="pi pi-cog"></i>
|
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
|
||||||
|
<Badge value="2" class="ml-auto" />
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Accordion class="accordion-custom" :activeIndex="0">
|
<Accordion :activeIndex="0">
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-calendar"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header I</span>
|
<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>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-user"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header II</span>
|
<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>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-search"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header III</span>
|
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||||
<i class="pi pi-cog"></i>
|
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
|
||||||
|
<Badge value="2" class="ml-auto" />
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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>
|
||||||
<\/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: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Accordion class="accordion-custom" :activeIndex="0">
|
<Accordion :activeIndex="0">
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-calendar"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header I</span>
|
<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>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-user"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header II</span>
|
<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>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<i class="pi pi-search"></i>
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
<span>Header III</span>
|
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||||
<i class="pi pi-cog"></i>
|
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
|
||||||
|
<Badge value="2" class="ml-auto" />
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<p class="m-0">
|
<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
|
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 setup>
|
||||||
<\/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>`
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</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>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue