Material Accordion

[ask007learning]

How about adding accordion feature to Angularjs material. See example

http://codepen.io/LukaszWatroba/pen/pvEOBZ

[tapas4java]

+1

[ThomasBurleson]

@ask007java - This is very nicely done. We are working on enhancements to md-list with 'expando' features.
@rschmukler - I think we should review @ask007java's solution(s) to make sure we accommodate all features and perf tricks.

[marcysutton]

It also needs a few accessibility things, although it is in really good shape already! Given that accordions are not part of the Material Design spec, should this be deprioritized to happen after our current estimated feature set? (Note: list control is different than accordion)

[mobelio]

+1

[brownish]

+1

[hiennguyenle]

+1

[danawhite]

+1

[kai23]

+1

[lee-40square]

+1

It's such a fundamental feature in most web-apps, particularly using sidebar menus. Looking desperately forward to this. What's the timeline look like with 'expando'?

Actually, looks like #985 would deal with this issue.

[emmagamma]

👍

[alanpurple]

+1

[mbukosky]

+1

[ThomasBurleson]

@lee-40square - The list expando feature is for nested items; while the accordion feature is for collapsed items.

[miguelchico]

+1

[marlonmleite]

+1

[anyong]

+1

[sachin-bs]

I actually like the left side nav accordion style that you are using on your own Material website. Exposing that would not be as difficult since you are already using it yourself! :-)

[robob4him]

Question: If "Material Design" is all about modeling design after physical materials how does this spec fit? I agree that accordions are used everywhere (and have their use) but I hesitate to put them into an angular-material repository if they aren't part of the spec. I would be more inclined to put them into a non-spec repo specifically for these things.

Not to rain gloom on everyone's parade. Cheers!

[anyong]

Well surely the accordion folder or cabinet (think big drawer of legal
documents) is a good analogy. You flip through based on the labels and see
the contents by opening it up. Not perfect, but there is certainly a
parallel between the accordion folder and accordion navigation... not part
of the spec, sure, but I agree with above comment that the one used on the
angular material website nav is pretty ideal for a lot of use cases
(especially for nav), and no reason not to include it or at least repackage
it as a standalone component.
On Apr 13, 2015 10:09 PM, "robob4him" notifications@github.com wrote:

Question: If "Material Design" is all about modeling design after physical
materials how does this spec fit? I agree that accordions are used
everywhere (and have their use) but I hesitate to put them into an
angular-material repository if they aren't part of the spec. I would be
more inclined to put them into a non-spec repo specifically for these
things.

Not to rain gloom on everyone's parade. Cheers!

Reply to this email directly or view it on GitHub
#1861 (comment).

[robob4him]

@anyong I'm not lost on the analogy of the accordion, I'm lost on it's purpose in material design. I'm entirely on point with @sachinny21 but this request is for content accordions, yes? A list view that can expand for content just sounds like a problem directly suited for navigational elements. (eg http://www.google.com/design/spec/layout/structure.html#structure-side-nav). Accordions in material design just don't seem to fit anywhere in the spec. Can someone point me to a section in the spec that gives this idea room to live?

[rosscdh]

+1

[cleever]

+1

[beebase]

+1

[msaliot]

+1

[29x10]

+1

[milad-kh]

this would be a very useful component

[piotrjaw]

It can be easily worked around with something like:

<md-item ng-click="showChildren = !showChildren">
    <md-item ng-show="showChildren">I toggle!</md-item>
<md-item>

It also works inside ng-repeat, and it only allows multiple selections open. Single selection variant could be achieved with a controller.

[kranthitech]

+1

@plotrjaw - I don't see md-item in the list of directives in the documentation here - https://material.angularjs.org/latest/#/api/material.components.list/directive/mdListItem . Are there directives which are not documented yet? - Thanks.

[piotrjaw]

@kranthitech I'd guess it's a replacement for a div - I got it from one of @marcysutton codepen examples: http://codepen.io/marcysutton/pen/azpmpY.

[ThomasBurleson]

We are currently hyper-focused on a summer release for Angular Material v1.0; which will include Menu and DateTimePicker components, performance enhancements, bug fixes, and improved documentation.

The Expando and Accordion features are definitely on our roadmap but not critical to a v1.0 Beta candidate. Time-permitting, a demo of this feature will be posted on CodePen.

We are locking this issue for now... it will remain an open issue, but locked to future discussions. Please future discussions in the Angular Material Forum

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.