Migrated accordion to V3
Cagatay Civici
parent
874102e8bc
commit
eb52d41e4f
|
|
@ -1,24 +1,110 @@
|
|||
<template>
|
||||
<div class="p-accordion p-component">
|
||||
<slot></slot>
|
||||
<div v-for="(tab,i) of tabs" :key="getKey(tab,i)" :class="getTabClass(i)">
|
||||
<div :class="getTabHeaderClass(tab, i)">
|
||||
<a role="tab" class="p-accordion-header-link" @click="onTabClick($event, tab, i)" @keydown="onTabKeydown($event, tab, i)" :tabindex="isTabDisabled(tab) ? null : '0'"
|
||||
:aria-expanded="isTabActive(i)" :id="getTabAriaId(i) + '_header'" :aria-controls="getTabAriaId(i) + '_content'">
|
||||
<span :class="getHeaderIcon(i)"></span>
|
||||
<span class="p-accordion-header-text" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
|
||||
<component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
|
||||
</a>
|
||||
</div>
|
||||
<transition name="p-toggleable-content">
|
||||
<div class="p-toggleable-content" v-show="isTabActive(i)"
|
||||
role="region" :id="getTabAriaId(i) + '_content'" :aria-labelledby="getTabAriaId(i) + '_header'">
|
||||
<div class="p-accordion-content">
|
||||
<component :is="tab"></component>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UniqueComponentId from '../utils/UniqueComponentId';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
multiple: Boolean
|
||||
multiple: Boolean,
|
||||
activeIndex: [Number,Array]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d_activeIndex: this.activeIndex
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeIndex(newValue) {
|
||||
this.d_activeIndex = newValue;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onToggle(tab) {
|
||||
if (!this.multiple && !tab.d_active) {
|
||||
this.$children.forEach(tab => tab.d_active = false);
|
||||
onTabClick(event, tab, i) {
|
||||
if (!this.isTabDisabled(tab)) {
|
||||
const active = this.isTabActive(i);
|
||||
const eventName = active ? 'tab-close' : 'tab-open';
|
||||
|
||||
if (this.multiple) {
|
||||
if (active) {
|
||||
this.d_activeIndex = this.d_activeIndex.filter(index => index !== i);
|
||||
}
|
||||
else {
|
||||
if (this.d_activeIndex)
|
||||
this.d_activeIndex.push(i);
|
||||
else
|
||||
this.d_activeIndex = [i];
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.d_activeIndex = this.d_activeIndex === i ? null : i;
|
||||
}
|
||||
|
||||
this.$emit('update:activeIndex', this.d_activeIndex);
|
||||
|
||||
this.$emit(eventName, {
|
||||
originalEvent: event,
|
||||
index: i
|
||||
});
|
||||
}
|
||||
},
|
||||
onTabKeydown(event, tab, i) {
|
||||
if (event.which === 13) {
|
||||
this.onTabClick(event, i);
|
||||
}
|
||||
},
|
||||
isTabActive(index) {
|
||||
if (this.multiple)
|
||||
return this.d_activeIndex && this.d_activeIndex.includes(index);
|
||||
else
|
||||
return index === this.d_activeIndex;
|
||||
},
|
||||
getKey(tab, i) {
|
||||
return tab.props && tab.props.header ? tab.props.header : i;
|
||||
},
|
||||
isTabDisabled(tab) {
|
||||
return tab.props && tab.props.disabled;
|
||||
},
|
||||
getTabClass(i) {
|
||||
return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive(i)}];
|
||||
},
|
||||
getTabHeaderClass(tab, i) {
|
||||
return ['p-accordion-header', {'p-highlight': this.isTabActive(i), 'p-disabled': this.isTabDisabled(tab)}];
|
||||
},
|
||||
getTabAriaId(i) {
|
||||
return this.ariaId + + '_' + i;
|
||||
},
|
||||
getHeaderIcon(i) {
|
||||
const active = this.isTabActive(i);
|
||||
return ['p-accordion-toggle-icon pi', {'pi-chevron-right': !active, 'pi-chevron-down': active}];
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return this.$children.filter(child => child.$vnode.tag.indexOf('accordiontab') !== -1);
|
||||
return this.$slots.default().filter(child => child.type.name === 'accordiontab');
|
||||
},
|
||||
ariaId() {
|
||||
return UniqueComponentId();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +1,13 @@
|
|||
<template>
|
||||
<div :class="['p-accordion-tab', {'p-accordion-tab-active': d_active}]">
|
||||
<div :class="['p-accordion-header', {'p-highlight': d_active, 'p-disabled': disabled}]">
|
||||
<a role="tab" class="p-accordion-header-link" @click="onTabClick" @keydown="onTabKeydown" :tabindex="disabled ? null : '0'"
|
||||
:aria-expanded="d_active" :id="ariaId + '_header'" :aria-controls="ariaId + '_content'">
|
||||
<span :class="['p-accordion-toggle-icon pi', {'pi-chevron-right': !d_active, 'pi-chevron-down': d_active}]"></span>
|
||||
<span class="p-accordion-header-text" v-if="header">{{header}}</span>
|
||||
<slot name="header"></slot>
|
||||
</a>
|
||||
</div>
|
||||
<transition name="p-toggleable-content">
|
||||
<div class="p-toggleable-content" v-show="d_active"
|
||||
role="region" :id="ariaId + '_content' " :aria-labelledby="ariaId + '_header'">
|
||||
<div class="p-accordion-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UniqueComponentId from '../utils/UniqueComponentId';
|
||||
|
||||
export default {
|
||||
name: 'accordiontab',
|
||||
props: {
|
||||
header: null,
|
||||
active: Boolean,
|
||||
disabled: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d_active: this.active
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
active(newValue) {
|
||||
this.d_active = newValue;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTabClick(event) {
|
||||
if (!this.disabled) {
|
||||
this.$parent.onToggle(this);
|
||||
|
||||
const newActiveState = !this.d_active;
|
||||
this.d_active = newActiveState;
|
||||
this.$emit('update:active', newActiveState);
|
||||
|
||||
let eventName = newActiveState ? 'tab-open' : 'tab-close';
|
||||
this.$parent.$emit(eventName, {
|
||||
originalEvent: event,
|
||||
tab: this
|
||||
});
|
||||
}
|
||||
},
|
||||
onTabKeydown(event) {
|
||||
if (event.which === 13) {
|
||||
this.onTabClick(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ariaId() {
|
||||
return UniqueComponentId();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Default</h5>
|
||||
<Accordion>
|
||||
<AccordionTab header="Header I" :active="true">
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab header="Header I">
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
</Accordion>
|
||||
|
||||
<h5>Multiple</h5>
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Header I" :active="true">
|
||||
<Accordion :multiple="true" :activeIndex="[0]">
|
||||
<AccordionTab header="Header I">
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
|
@ -50,24 +50,24 @@
|
|||
</Accordion>
|
||||
|
||||
<h5>Programmatic</h5>
|
||||
<div style="padding: .5em 0 1em 0">
|
||||
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-text" />
|
||||
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-text" style="margin-left: .5em" />
|
||||
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-text" style="margin-left: .5em" />
|
||||
<div class="p-pb-3">
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
|
||||
</div>
|
||||
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Header I" :active="active1">
|
||||
<Accordion v-model:activeIndex="active">
|
||||
<AccordionTab header="Header I">
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II" :active="active2">
|
||||
<AccordionTab header="Header II">
|
||||
<p>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 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III" :active="active3">
|
||||
<AccordionTab header="Header III">
|
||||
<p>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 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
|
|
@ -75,9 +75,9 @@
|
|||
</Accordion>
|
||||
|
||||
<h5>Custom Headers</h5>
|
||||
<Accordion class="accordion-custom">
|
||||
<AccordionTab :active="true">
|
||||
<template v-slot:header>
|
||||
<Accordion class="accordion-custom" :activeIndex="0">
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
</template>
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template v-slot:header>
|
||||
<template #header>
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Header II</span>
|
||||
</template>
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template v-slot:header>
|
||||
<template #header>
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Header III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
|
|
@ -118,9 +118,7 @@ import AccordionDoc from './AccordionDoc';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
active1: true,
|
||||
active2: false,
|
||||
active3: false
|
||||
active: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,17 @@
|
|||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h5>Import</h5>
|
||||
<CodeHighlight lang="javascript">
|
||||
<pre v-code.script>
|
||||
<code>
|
||||
import Accordion from 'primevue/accordion';
|
||||
import AccordionTab from 'primevue/accordiontab';
|
||||
</CodeHighlight>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
|
||||
<CodeHighlight>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Accordion>
|
||||
<AccordionTab header="Header I">
|
||||
Content
|
||||
|
|
@ -22,13 +25,15 @@ import AccordionTab from 'primevue/accordiontab';
|
|||
Content
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</CodeHighlight>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Active</h5>
|
||||
<p>Visibility of the content is specified with the active property that supports one or two-way binding.</p>
|
||||
<CodeHighlight>
|
||||
<Accordion>
|
||||
<AccordionTab header="Header I" :active="true">
|
||||
<p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab header="Header I">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
|
|
@ -38,28 +43,32 @@ import AccordionTab from 'primevue/accordiontab';
|
|||
Content
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Two-way binding requires the sync operator.</p>
|
||||
<CodeHighlight>
|
||||
<Accordion>
|
||||
<AccordionTab header="Header I" :active.sync="active1">
|
||||
</code></pre>
|
||||
|
||||
<p>Two-way binding requires v-model.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Accordion v-model:activeIndex="activeIndex">
|
||||
<AccordionTab header="Header I">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II" :active.sync="active2">
|
||||
<AccordionTab header="Header II">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III" :active.sync="active3">
|
||||
<AccordionTab header="Header III">
|
||||
Content
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</CodeHighlight>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Multiple</h5>
|
||||
<p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple
|
||||
tabs be active at the same time.</p>
|
||||
<CodeHighlight>
|
||||
<Accordion :multiple="true" >
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Header I">
|
||||
Content
|
||||
</AccordionTab>
|
||||
|
|
@ -70,11 +79,13 @@ import AccordionTab from 'primevue/accordiontab';
|
|||
Content
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</CodeHighlight>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Disabled</h5>
|
||||
<p>A tab can be disabled by setting the disabled property to true.</p>
|
||||
<CodeHighlight>
|
||||
<p>A tab can be disabled by setting the <i>disabled</i> property to true.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Accordion>
|
||||
<AccordionTab header="Header I">
|
||||
Content
|
||||
|
|
@ -86,69 +97,72 @@ import AccordionTab from 'primevue/accordiontab';
|
|||
Content
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</CodeHighlight>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Custom Content at Headers</h5>
|
||||
<p>Custom content for the title section of a panel is defined using the header template.</p>
|
||||
<CodeHighlight>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Accordion>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
</template>
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header II</span>
|
||||
</template>
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header III</span>
|
||||
</template>
|
||||
Content
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</CodeHighlight>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Programmatic Control</h5>
|
||||
<p>Tabs can be controlled programmatically using active property.</p>
|
||||
<CodeHighlight>
|
||||
<div>
|
||||
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-text" />
|
||||
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-text" style="margin-left: .5em" />
|
||||
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-text" style="margin-left: .5em" />
|
||||
</div>
|
||||
<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text" label="Activate 3rd" />
|
||||
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Header I" :active="active1">
|
||||
<Accordion :multiple="true" :activeIdex="active">
|
||||
<AccordionTab header="Header I">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II" :active="active2">
|
||||
<AccordionTab header="Header II">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III" :active="active3">
|
||||
<AccordionTab header="Header III">
|
||||
Content
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.script>
|
||||
<code>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active1: true,
|
||||
active2: false,
|
||||
active3: false
|
||||
active: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Properties of AccordionTab</h5>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
@ -202,6 +216,12 @@ export default {
|
|||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When enabled, multiple tabs can be activated at the same time.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>activeIndex</td>
|
||||
<td>number|array</td>
|
||||
<td>null</td>
|
||||
<td>Index of the active tab or an array of indexes in multiple mode.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -221,14 +241,14 @@ export default {
|
|||
<tr>
|
||||
<td>tab-open</td>
|
||||
<td>event.originalEvent: Browser event <br/>
|
||||
event.tab: Opened tab
|
||||
event.index: Opened tab index
|
||||
</td>
|
||||
<td>Callback to invoke when a tab gets expanded.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tab-close</td>
|
||||
<td>event.originalEvent: Browser event <br/>
|
||||
event.tab: closed tab
|
||||
event.index: Closed tab index
|
||||
</td>
|
||||
<td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
|
||||
</tr>
|
||||
|
|
@ -271,120 +291,122 @@ export default {
|
|||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/accordion" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h5>Default</h5>
|
||||
<Accordion>
|
||||
<AccordionTab header="Header I" :active="true">
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<p>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 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<p>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 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
</AccordionTab>
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab header="Header I">
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<p>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 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<p>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 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
|
||||
<h5>Multiple</h5>
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Header I" :active="true">
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<p>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 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<p>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 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header IV" :disabled="true">
|
||||
</AccordionTab>
|
||||
<Accordion :multiple="true" :activeIndex="[0]">
|
||||
<AccordionTab header="Header I">
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<p>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 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<p>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 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header IV" :disabled="true">
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
|
||||
<h5>Programmatic</h5>
|
||||
<div style="padding: .5em 0 1em 0">
|
||||
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-text" />
|
||||
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-text" style="margin-left: .5em" />
|
||||
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-text" style="margin-left: .5em" />
|
||||
<div class="p-pb-3">
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
|
||||
</div>
|
||||
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Header I" :active="active1">
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II" :active="active2">
|
||||
<p>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 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III" :active="active3">
|
||||
<p>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 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
</AccordionTab>
|
||||
<Accordion v-model:activeIndex="active">
|
||||
<AccordionTab header="Header I">
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<p>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 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<p>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 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
|
||||
<h5>Custom Headers</h5>
|
||||
<Accordion class="accordion-custom">
|
||||
<AccordionTab :active="true">
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
</template>
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Header II</span>
|
||||
</template>
|
||||
<p>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 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Header III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
</template>
|
||||
<p>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 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
</AccordionTab>
|
||||
<Accordion class="accordion-custom" :activeIndex="0">
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
</template>
|
||||
<p>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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Header II</span>
|
||||
</template>
|
||||
<p>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 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template #header>
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Header III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
</template>
|
||||
<p>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 officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.script>
|
||||
<code>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active1: true,
|
||||
active2: false,
|
||||
active3: false
|
||||
}
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.css>
|
||||
<code>
|
||||
.accordion-custom {
|
||||
i, span {
|
||||
vertical-align: middle;
|
||||
|
|
@ -394,7 +416,8 @@ export default {
|
|||
margin: 0 .5rem;
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,10 +31,10 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Programmatic</h5>
|
||||
<div style="padding: .5rem 0 1rem 0" class="p-t-2 p-b-3">
|
||||
<div class="p-py-2">
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text" label="Activate 3rd" />
|
||||
<Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
|
||||
</div>
|
||||
|
||||
<TabView ref="tabview2" v-model:activeIndex="active">
|
||||
|
|
@ -159,10 +159,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.p-button {
|
||||
margin-right: .25rem;
|
||||
}
|
||||
|
||||
.p-tabview p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -167,7 +167,27 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Properties of TabView</h5>
|
||||
<p>Any property as style and class are passed to the main container element.</p>
|
||||
<p>Any additional properties like style and class are passed to the main container element.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>activeIndex</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>Index of the active tab.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Events</h5>
|
||||
<div class="doc-tablewrapper">
|
||||
|
|
@ -259,10 +279,10 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Programmatic</h5>
|
||||
<div style="padding: .5rem 0 1rem 0" class="p-t-2 p-b-3">
|
||||
<div class="p-py-2">
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text" label="Activate 3rd" />
|
||||
<Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
|
||||
</div>
|
||||
|
||||
<TabView ref="tabview2" v-model:activeIndex="active">
|
||||
|
|
|
|||
Loading…
Reference in New Issue