+
+
+ Import via Module
+
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
- Import via CDN
-
+ Import via CDN
+
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/accordion/accordion.min.js"></script>
<script src="https://unpkg.com/primevue@^3/accordiontab/accordiontab.min.js"></script>
- Getting Started
- Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.
-
+ Getting Started
+ Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.
+
<Accordion>
<AccordionTab header="Header I">
Content
@@ -32,9 +33,9 @@ import AccordionTab from 'primevue/accordiontab';
- Active
- Visibility of the content is specified with the activeIndex property that supports one or two-way binding.
-
+ Active
+ Visibility of the content is specified with the activeIndex property that supports one or two-way binding.
+
<Accordion :activeIndex="0">
<AccordionTab header="Header I">
Content
@@ -49,8 +50,8 @@ import AccordionTab from 'primevue/accordiontab';
- Two-way binding requires v-model.
-
+ Two-way binding requires v-model.
+
<Accordion v-model:activeIndex="activeIndex">
<AccordionTab header="Header I">
Content
@@ -65,9 +66,9 @@ import AccordionTab from 'primevue/accordiontab';
- Multiple
- 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.
-
+ Multiple
+ 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.
+
<Accordion :multiple="true">
<AccordionTab header="Header I">
Content
@@ -82,9 +83,9 @@ import AccordionTab from 'primevue/accordiontab';
- Disabled
- A tab can be disabled by setting the disabled property to true.
-
+ Disabled
+ A tab can be disabled by setting the disabled property to true.
+
<Accordion>
<AccordionTab header="Header I">
Content
@@ -99,9 +100,9 @@ import AccordionTab from 'primevue/accordiontab';
- Custom Content at Headers
- Custom content for the title section of a panel is defined using the header template.
-
+ Custom Content at Headers
+ Custom content for the title section of a panel is defined using the header template.
+
<Accordion>
<AccordionTab>
<template #header>
@@ -128,9 +129,9 @@ import AccordionTab from 'primevue/accordiontab';
- Programmatic Control
- Tabs can be controlled programmatically using activeIndex property.
-
+ Programmatic Control
+ Tabs can be controlled programmatically using activeIndex property.
+
<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" />
@@ -149,7 +150,7 @@ import AccordionTab from 'primevue/accordiontab';
-
+
export default {
data() {
return {
@@ -160,9 +161,9 @@ export default {
- Dynamic Tabs
- Tabs can be generated dynamically using the standard v-for directive.
-
+ Dynamic Tabs
+ Tabs can be generated dynamically using the standard v-for directive.
+
<Accordion>
<AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p>{{tab.content}}</p>
@@ -171,7 +172,7 @@ export default {
-
+
export default {
data() {
return {
@@ -186,13 +187,13 @@ export default {
- Lazy Rendering
-
- All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling lazy option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
- rendering performance if there are many tabs.
-
+ Lazy Rendering
+
+ All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling lazy option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
+ rendering performance if there are many tabs.
+
-
+
<Accordion lazy>
<AccordionTab header="Header I">
Content
@@ -207,272 +208,273 @@ export default {
- Properties of AccordionTab
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- header
- string
- null
- Orientation of tab headers.
-
-
- headerStyle
- string
- null
- Inline style of the tab header.
-
-
- headerClass
- string
- null
- Style class of the tab header.
-
-
- headerProps
- object
- null
- Uses to pass all properties of the HTMLDivElement to the tab header.
-
-
- headerActionProps
- object
- null
- Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
-
-
- contentStyle
- string
- null
- Inline style of the tab content.
-
-
- contentClass
- string
- null
- Style class of the tab content.
-
-
- contentProps
- object
- null
- Uses to pass all properties of the HTMLDivElement to the tab content.
-
-
- disabled
- boolean
- false
- Whether the tab is disabled.
-
-
-
-
+ Properties of AccordionTab
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ header
+ string
+ null
+ Orientation of tab headers.
+
+
+ headerStyle
+ string
+ null
+ Inline style of the tab header.
+
+
+ headerClass
+ string
+ null
+ Style class of the tab header.
+
+
+ headerProps
+ object
+ null
+ Uses to pass all properties of the HTMLDivElement to the tab header.
+
+
+ headerActionProps
+ object
+ null
+ Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
+
+
+ contentStyle
+ string
+ null
+ Inline style of the tab content.
+
+
+ contentClass
+ string
+ null
+ Style class of the tab content.
+
+
+ contentProps
+ object
+ null
+ Uses to pass all properties of the HTMLDivElement to the tab content.
+
+
+ disabled
+ boolean
+ false
+ Whether the tab is disabled.
+
+
+
+
- Properties of Accordion
- Any property as style and class are passed to the main container element. Following is the additional property to configure the component.
-
-
-
-
- Name
- Type
- Default
- Description
-
-
-
-
- multiple
- boolean
- false
- When enabled, multiple tabs can be activated at the same time.
-
-
- activeIndex
- number|array
- null
- Index of the active tab or an array of indexes in multiple mode.
-
-
- lazy
- boolean
- false
- When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
-
-
- expandIcon
- string
- pi-chevron-right
- Icon of a collapsed tab.
-
-
- collapseIcon
- string
- pi-chevron-down
- Icon of an expanded tab.
-
-
- tabindex
- number
- 0
- Index of the element in tabbing order.
-
-
- selectOnFocus
- boolean
- false
- When enabled, the focused tab is activated.
-
-
-
-
+ Properties of Accordion
+ Any property as style and class are passed to the main container element. Following is the additional property to configure the component.
+
+
+
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+
+ multiple
+ boolean
+ false
+ When enabled, multiple tabs can be activated at the same time.
+
+
+ activeIndex
+ number|array
+ null
+ Index of the active tab or an array of indexes in multiple mode.
+
+
+ lazy
+ boolean
+ false
+ When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
+
+
+ expandIcon
+ string
+ pi-chevron-right
+ Icon of a collapsed tab.
+
+
+ collapseIcon
+ string
+ pi-chevron-down
+ Icon of an expanded tab.
+
+
+ tabindex
+ number
+ 0
+ Index of the element in tabbing order.
+
+
+ selectOnFocus
+ boolean
+ false
+ When enabled, the focused tab is activated.
+
+
+
+
- Events
-
-
-
-
- Name
- Parameters
- Description
-
-
-
-
- tab-open
-
- event.originalEvent: Browser event
- event.index: Opened tab index
-
- Callback to invoke when a tab gets expanded.
-
-
- tab-close
-
- event.originalEvent: Browser event
- event.index: Closed tab index
-
- Callback to invoke when an active tab is collapsed by clicking on the header.
-
-
- tab-click
-
- event.originalEvent: Browser event
- event.index: Index of the clicked tab
-
- Callback to invoke when an active tab is clicked.
-
-
-
-
+ Events
+
+
+
+
+ Name
+ Parameters
+ Description
+
+
+
+
+ tab-open
+
+ event.originalEvent: Browser event
+ event.index: Opened tab index
+
+ Callback to invoke when a tab gets expanded.
+
+
+ tab-close
+
+ event.originalEvent: Browser event
+ event.index: Closed tab index
+
+ Callback to invoke when an active tab is collapsed by clicking on the header.
+
+
+ tab-click
+
+ event.originalEvent: Browser event
+ event.index: Index of the clicked tab
+
+ Callback to invoke when an active tab is clicked.
+
+
+
+
- Styling
- Following is the list of structural style classes, for theming classes visit theming page.
-
-
-
-
- Name
- Element
-
-
-
-
- p-accordion
- Container element.
-
-
- p-accordion-header
- Header of a tab.
-
-
- p-accordion-content
- Container of a tab.
-
-
-
-
+ Styling
+ Following is the list of structural style classes, for theming classes visit theming page.
+
+
+
+
+ Name
+ Element
+
+
+
+
+ p-accordion
+ Container element.
+
+
+ p-accordion-header
+ Header of a tab.
+
+
+ p-accordion-content
+ Container of a tab.
+
+
+
+
- Accessibility
- Screen Reader
-
- Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults to the value of
- the header property and can be customized by defining an aria-label or aria-labelledby via the headerActionProps property.
-
- The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header.
+ Accessibility
+ Screen Reader
+
+ Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults to the
+ value of the header property and can be customized by defining an aria-label or aria-labelledby via the headerActionProps property.
+
+ The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header.
- Header Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the next focusable element in the page tab sequence.
-
-
- shift + tab
- Moves focus to the previous focusable element in the page tab sequence.
-
-
-
- enter
-
- Toggles the visibility of the content.
-
-
-
- space
-
- Toggles the visibility of the content.
-
-
-
- down arrow
-
- Moves focus to the next header. If focus is on the last header, moves focus to the first header.
-
-
-
- up arrow
-
- Moves focus to the previous header. If focus is on the first header, moves focus to the last header.
-
-
-
- home
-
- Moves focus to the first header.
-
-
-
- end
-
- Moves focus to the last header.
-
-
-
-
+ Header Keyboard Support
+
+
+
+
+ Key
+ Function
+
+
+
+
+
+ tab
+
+ Moves focus to the next focusable element in the page tab sequence.
+
+
+ shift + tab
+ Moves focus to the previous focusable element in the page tab sequence.
+
+
+
+ enter
+
+ Toggles the visibility of the content.
+
+
+
+ space
+
+ Toggles the visibility of the content.
+
+
+
+ down arrow
+
+ Moves focus to the next header. If focus is on the last header, moves focus to the first header.
+
+
+
+ up arrow
+
+ Moves focus to the previous header. If focus is on the first header, moves focus to the last header.
+
+
+
+ home
+
+ Moves focus to the first header.
+
+
+
+ end
+
+ Moves focus to the last header.
+
+
+
+
- Dependencies
- None.
-
+ Dependencies
+ None.
+