question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Proposal: md-expansion-panel

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:38
  • Comments:18 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
cesarpcommented, Nov 12, 2016

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

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

4reactions
100000001commented, Aug 11, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Expansion Panel - KivyMD's documentation - Read the Docs
To use MDExpansionPanel you must pass one of the following classes to the panel_cls parameter: MDExpansionPanelOneLine. MDExpansionPanelTwoLine.
Read more >
How to disable md-expansion-panel - angular
A disabled expansion panel can't be toggled by the user, but can still be manipulated using programmatically. <md-expansion-panel [disabled]=" ...
Read more >
[Tabs] Hidden tabs don't render expansion panels correctly
Bug, feature request, or proposal: Bug. What is the expected behavior? A <md-expansion-panel [expanded]="false"> should not be expanded until explicitally ...
Read more >
Learn to Make Beautiful Mobile Apps in Python | KivyMD Tutorial
... see in many apps that follow Material Design standards: the MDExpansionPanel. ... you should have a clear idea about the features your...
Read more >
mat-expansion-panel-content height
Bug, feature request, or proposal: md-expansion-panel-header has a child span element with a class of mat-content that should have a height of 100%, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found