128 lines
3.2 KiB
Vue
128 lines
3.2 KiB
Vue
<template>
|
|
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
|
<div class="card">
|
|
<Accordion :activeIndex="0">
|
|
<AccordionTab
|
|
v-for="(tab, index) in tabs"
|
|
:key="tab.title"
|
|
:header="tab.title"
|
|
:pt="{
|
|
headerAction: ({ props, parent }) => ({
|
|
class: panelClass(props, parent, index)
|
|
})
|
|
}"
|
|
>
|
|
<p>{{ tab.content }}</p>
|
|
</AccordionTab>
|
|
</Accordion>
|
|
</div>
|
|
<DocSectionCode :code="code" />
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabs: Array.from({ length: 3 }, (_, i) => ({
|
|
title: `Header ${i + 1}`,
|
|
content: `Tab ${i + 1} Content`
|
|
})),
|
|
code: {
|
|
basic: `
|
|
<Accordion :activeIndex="0">
|
|
<AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
|
|
:pt="{
|
|
headerAction: ({ props, parent }) => ({
|
|
class: panelClass(props, parent, index)
|
|
})
|
|
}">
|
|
<p>{{ tab.content }}</p>
|
|
</AccordionTab>
|
|
</Accordion>
|
|
`,
|
|
options: `
|
|
<template>
|
|
<div class="card">
|
|
<Accordion :activeIndex="0">
|
|
<AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
|
|
:pt="{
|
|
headerAction: ({ props, parent }) => ({
|
|
class: panelClass(props, parent, index)
|
|
})
|
|
}">
|
|
<p>{{ tab.content }}</p>
|
|
</AccordionTab>
|
|
</Accordion>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabs: Array.from({ length: 3 }, (_, i) => ({
|
|
title: \`Header \${i + 1}\`,
|
|
content: \`Tab \${i + 1} Content\`
|
|
}))
|
|
}
|
|
},
|
|
methods: {
|
|
panelClass(props, parent, index) {
|
|
return [
|
|
{
|
|
'bg-primary': parent.state.d_activeIndex === index
|
|
}
|
|
];
|
|
}
|
|
}
|
|
}
|
|
<\/script>
|
|
`,
|
|
composition: `
|
|
<template>
|
|
<div class="card">
|
|
<Accordion :activeIndex="0">
|
|
<AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
|
|
:pt="{
|
|
headerAction: ({ props, parent }) => ({
|
|
class: panelClass(props, parent, index)
|
|
})
|
|
}">
|
|
<p>{{ tab.content }}</p>
|
|
</AccordionTab>
|
|
</Accordion>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const tabs = ref(Array.from({ length: 3 }, (_, i) => ({
|
|
title: \`Header \${i + 1}\`,
|
|
content: \`Tab \${i + 1} Content\`
|
|
})));
|
|
|
|
const panelClass = (props, parent, index) => {
|
|
return [
|
|
{
|
|
'bg-primary': parent.state.d_activeIndex === index
|
|
}
|
|
];
|
|
};
|
|
<\/script>
|
|
`
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
panelClass(props, parent, index) {
|
|
return [
|
|
{
|
|
'bg-primary': parent.state.d_activeIndex === index
|
|
}
|
|
];
|
|
}
|
|
}
|
|
};
|
|
</script>
|