paper collapsible and/or collections

[cad]

We need a paper collapsible or some kind of collection component that is collapsible/expandable like gmail's inbox app.

[activatedgeek]

+1

[drac]

+1

[grbspltt]

+1

[cgestes]

Cards are collapsible and can be used as a collection.

On Thu, Jul 30, 2015, 22:16 Kevin Splittgerber notifications@github.com wrote:

+1

— Reply to this email directly or view it on GitHub https://github.com/callemall/material-ui/issues/816#issuecomment-126490768 .

[VasilyShelkov]

I think a feature like materializecss's collapsibles wouldn't go unmissed: http://materializecss.com/collapsible.html

[shaurya947]

As @cgestes said, the Card component offers a lot of that functionality. Does that not help your use case? @Cad @activatedgeek @dracs89 @grbspltt @VasilyShelkov

[grbspltt]

@shaurya947 If it can work as a collection and I can make an accordion-style component like @VasilyShelkov referenced from materializecss' collapsible, then it will work for me. I'll have to try it out or see a demo before I can say for sure.

[shaurya947]

@grbspltt see http://material-ui.com/#/components/cards

You could stack up cards and have them collapsed by default.. Then you can set the expander and actAsExpander props accordingly to decide which parts of the card can be expanded collapsed on click / touch. Related #1806

[dereckmartin]

@shaurya947 Can cards be grouped into a collection? I have not saw any reference to card collections or examples. The card spec does reference the use of collections to group cards. There are images that reflect this grouping under the following sections of the card spec:

https://www.google.com/design/spec/components/cards.html#cards-usage https://www.google.com/design/spec/components/cards.html#cards-behavior

[newoga]

@dereckmartin Which screen shot in particular are you referencing from those links or what collection use case in particular are you referring to?

Most of the collection examples are just a list of components, you should be able to use the map function to loop through items and render a <Card /> component for each.

[dereckmartin]

@newoga

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3b1N2Q2swOFNuX28/components_cards_content4.png

[newoga]

@dereckmartin Is there a reason why you can't loop through your data and render cards that use flex layout? We don't have any example of this in the documentation and I think it's something that we should add, but you should be able to implement this functionality fairly easily without any additional components.

This is an oversimplified example, but might point you in the right direction.

const YourComponent = (props) => {
  return props.data.map((item) => {
    return <Card style={/*flexbox styles here*/}></Card>;
 });
};

Edit: Also, if you need something more sophisticated, you could look at this project. https://github.com/STRML/react-grid-layout I haven't use it properly but from the looks of it it should work with Card components in this library.

[dereckmartin]

@newoga I can certainly do a loop through another package that offers a grid. I was just curious if there something already in place in material-ui that wasn't publicly documented. I would like to thank you for offering some solutions.

[mbrookes]

@dereckmartin - what is it you're trying to achieve that you can't do with Cards or Grid List?

[alitaheri]

Since this is easily implementable with Card I'm going to close this. But feel free to reopen it this doesn't cover your use-case :grin:

[jbhatab]

@alitaheri Here's my use case. I want to implement expandable functionality in a sidebar. I wanted to use list originally with the nested feature but it only really works with ListItems as children. Here's a screenshot of what I'm going for.

Now I can remove some styles from a Card and achieve this or write some relatively simple custom code, but thought I'd post this up here because there doesn't seem to be a built in solution for what I'm going for.