search

akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.19k stars 950 forks source link

Collapsible Accordion #1044

Open Gustl22 opened 4 years ago

Gustl22 commented 4 years ago

🚀 Feature Proposal

Customizable Component for collapse contents within an accordion.

Motivation & Example

I want to provide a list of exercises, the user can select. But I want to keep it all on the same page, to let the user browse faster the items. The items should then be expandable and collapsible (different defaults each item, customizable content or icon for header and body).

See bootstrap.

Please correct me, if this feature is already implemented somehow.

artyorsh commented 4 years ago

Can the grouped menu work for you?

Gustl22 commented 4 years ago

Haven't tried yet, if this supports custom items instead of MenuItem. Anyway I noticed that I need a custom Header, too, which is not the case in MenuGroup. So it may be better to make my own component.

Can be closed or keep open, if want to implement such feature. Thanks for the response :)

artyorsh commented 4 years ago

@Gustl22 yup, there are too many options on how it should look. Especially when looking at the one you shared. But let's keep it open to see the interest and prioritize some time.

Gustl22 commented 4 years ago

I think a good approach would be to make a collapsible Card component (with animation), so that the header is always shown and the content is hided completely in collapsed state.

BTW: Used LayoutAnimation before collapse state change and adapted heights of Card and Header.

Here a demo of my implementation: Card-Accordion

yogevlahyani commented 4 years ago

I can't find group menu for version 4.4 (Don't want to upgrade to 5 since it's still alpha)

artyorsh commented 4 years ago

@yogevlahyani v4 docs is here. See the version switcher at the top of the page.

yogevlahyani commented 4 years ago

@artyorsh Yes I know, MenuGroup isn't in the docs or in v4 in general

artyorsh commented 4 years ago

@yogevlahyani Yup, because there was no special component for that. This was achieved in a different and less customizable (that's why it was completely reimplemented) way. For v4, see sub-menu example in the old docs

yogevlahyani commented 4 years ago

@artyorsh Thanks! :)

dlwiest commented 3 years ago

Trying to do something similar here. I have a large form that I want to break up into chunks with an accordion-style layout. I tried to accomplish this using MenuGroups, but I can't find a way to customize MenuItem. Is this possible, or have people found a better solution for accordions?

johnkmzhou commented 3 years ago

Trying to do something similar here. I have a large form that I want to break up into chunks with an accordion-style layout. I tried to accomplish this using MenuGroups, but I can't find a way to customize MenuItem. Is this possible, or have people found a better solution for accordions?

I tried adding a View component to the MenuItem description prop but it causes layout issues (e.g. any Text component inside that View will overflow). Probably because the description prop is expecting Text.

GuilhermeAmado commented 3 years ago

Any updates on this? I think a collapse/toggle component would be helpful

ffMathy commented 2 years ago

I would also like this. MenuGroup is for selectable items. An accordion is just for hiding some details, but not for selecting. It is super common for accordions to appear in UIs. It's such an essential UI component.

angelxmoreno commented 3 months ago

Was it decided to not introduce this new component?