diff --git a/api-generator/components/accordion.js b/api-generator/components/accordion.js index 9f136887c..7ddb181c2 100644 --- a/api-generator/components/accordion.js +++ b/api-generator/components/accordion.js @@ -16,6 +16,18 @@ const AccordionProps = [ type: "boolean", default: "false", description: "When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css." + }, + { + name: "expandIcon", + type: "string", + default: "pi-chevron-right", + description: "Icon of a collapsed tab." + }, + { + name: "collapseIcon", + type: "string", + default: "pi-chevron-down", + description: "Icon of a expanded tab." } ]; diff --git a/src/components/accordion/Accordion.d.ts b/src/components/accordion/Accordion.d.ts index 96d8a16cd..f70354ce2 100755 --- a/src/components/accordion/Accordion.d.ts +++ b/src/components/accordion/Accordion.d.ts @@ -31,6 +31,14 @@ export interface AccordionProps { * When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css. */ lazy?: boolean | undefined; + /** + * Icon of a collapsed tab. + */ + expandIcon?: string | undefined; + /** + * Icon of an expanded tab. + */ + collapseIcon?: string | undefined; } export interface AccordionSlots { diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue index f44c81647..19f6d97a1 100755 --- a/src/components/accordion/Accordion.vue +++ b/src/components/accordion/Accordion.vue @@ -4,7 +4,7 @@
- + {{tab.props.header}} @@ -39,6 +39,14 @@ export default { lazy: { type: Boolean, default: false + }, + expandIcon: { + type: String, + default: 'pi-chevron-right' + }, + collapseIcon: { + type: String, + default: 'pi-chevron-down' } }, data() { @@ -106,12 +114,14 @@ export default { 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}]; + getHeaderCollapseIcon() { + return ['p-accordion-toggle-icon pi', this.collapseIcon]; + }, + getHeaderExpandIcon() { + return ['p-accordion-toggle-icon pi', this.expandIcon]; }, isAccordionTab(child) { - return child.type.name === 'AccordionTab' + return child.type.name === 'AccordionTab'; } }, computed: { diff --git a/src/views/accordion/AccordionDoc.vue b/src/views/accordion/AccordionDoc.vue index c42ad1a4e..e27e39407 100755 --- a/src/views/accordion/AccordionDoc.vue +++ b/src/views/accordion/AccordionDoc.vue @@ -264,6 +264,18 @@ export default { 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.