Fixed #2373 - Accordion | New expandIcon and collapseIcon properties
parent
158555acd8
commit
836609da5c
|
@ -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."
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<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="isTabActive(i) ? getHeaderCollapseIcon() : getHeaderExpandIcon()"></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>
|
||||
|
@ -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: {
|
||||
|
|
|
@ -264,6 +264,18 @@ export default {
|
|||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expandIcon</td>
|
||||
<td>string</td>
|
||||
<td>pi-chevron-right</td>
|
||||
<td>Icon of a collapsed tab.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>collapseIcon</td>
|
||||
<td>string</td>
|
||||
<td>pi-chevron-down</td>
|
||||
<td>Icon of an expanded tab.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
Loading…
Reference in New Issue