ionic-team / ionic-team/ionic-framework

feat: accordion, improve customizability of toggle icons based on state and add label text

Open
#23,548 4 comments 9 reactions 0 assignees View on GitHub
package: core type: feature request v6
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# Feature Request

**Ionic version:**

[ ] **4.x**
[ ] **5.x**
[X] **6.x**

**Describe the Feature Request**

Currently in our App we create a own Accordion Component, which i want to replace by the Ionic one in the Future. But we have two Icons, one for expanded and one for collapsed state, which does not rotate.

I wan't to be able to create it like this too. I can create a PR, but we should discuss the best was to implement this.

**Describe Solutions**

I understand that we can create a own Icon with Class `ion-accordion-toggle-icon` and then no extra Icon will be created. But because of this Class the icon will rotate between the states. So one Option would be to add a `toggleIconRotate: boolean` Prop. I don't like this option as the user has to check by himself if the accordion is collapsed or not and set the specific icon on his own.

**The better option** was if the accordion component would be able to do this itself. So maybe by setting the Type of `toggleIcon` to `string | {collapsed: string; expanded: string;}` and use two different icons based on the state. If this option is used the icon would not rotate.

**Additional Context**

What do you think? Do you prefer a Option? Should i create a PR?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.