Components: Proposal: md-expansion-panel

[Dona278]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

Required in the first version of angular material and not implemented, a list of expandable panel.
Specs

What is the current behavior?

None

What is the use-case or motivation for changing an existing behavior?

it's an awesome component for setting's section of a user profile or application

Is there anything else we should know?

I wrote the first implementation for this component.
Usage:

<md-expansion-panel-group>
    <md-expansion-panel>
        <md-expansion-panel-header>
            <md-expansion-panel-header-label>
                <span class="md-primary">Label here...</span>
                <span class="md-secondary">Secondary label here...</span>
            </md-expansion-panel-header-label>
            <md-expansion-panel-header-content>
                 Header content here...
            </md-expansion-panel-header-content>
        </md-expansion-panel-header>
        <md-expansion-panel-content>
            Panel content here...
        </md-expansion-panel-content>
        <md-expansion-panel-actions>
            Panel actions here like as...
            <button md-button>CLOSE</button>
            <button md-button>SAVE</button>
        </md-expansion-panel-actions>
    </md-expansion-panel>
</md-expansion-panel-group>

md-expansion-panel-group
The outer container for a group of panels.
Basic only one panel at a time can be expanded but you can change the behavior by md-multiple- expansions property.

md-expansion-panel
A panel that expand / collapse its content by clicking on the header.
User can navigate between panels by TAB and ENTER keys.

md-expansion-panel-header
The only clickable section when the panel is collapsed.

md-expansion-panel-header-label
The title of the panel. With md-primary and md-secondary classes you can set two line.

md-expansion-panel-header-content
A short grouping of the content of the panel.

md-expansion-panel-content
Custom content of the panel.

md-expansion-panel-actions
Custom action of the panel like a dialog buttons.

[cesarp]

This is pretty decent, not sure if you are aware of but helped me.

https://teradata.github.io/covalent/#/components/expansion-panel

[Nodarii]

would be nice to have this feature in the list of feature statuses in the main readme file

[axtho]

Here is another good (visual) example of this: http://materializecss.com/collapsible.html

[naadydev]

We are looking forward to this nice feature to be onboard

[michaeljota]

What @axtho showed it's what this component should be. This is an API implementation for Angular about that component ng2-materialize/collapsible.

I like most the API is using that the one it's being proposed as I see it easier to work with looped data.

[gtzinos]

Guys any progress on this feature ?

[csvn]

@gtzinos As mentioned in #3664, this is being worked on in #4191

[jelbourn]

Released in beta.7!

[finalxcode]

thanks

[Dunos]

Released 14 days ago, yesterday we even got another update, and yet, no documentation for this...

[benb7760]

@Dunos there are examples here

[Dunos]

Still no API documentation so we don't know if some properties are missing/not working/not implemented to open new issues/requests about this component

[michaeljota]

I think they would like a PR about this, if you really need them. :+1:

[Dunos]

To make a PR, first I need to know how this thing works, and for that we need the documentation

[benb7760]

There is a PR in progress #5616 which may be of use

[100000001]

It is actually in the latest release, but still needs documentation, I did find this though: https://github.com/angular/material2/blob/master/src/lib/expansion/expansion.md

[AMP3D]

When I searched the documentation, I couldn't find this listed so i'm glad I did a google search for the feature. Good to see it's actually in the release!
Thanks all for your hard work in supporting this effort!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}