mdList: Expando feature needed.

[marcysutton]

A nice feature in the Material Design spec is the Expand/collapse List-Item Control.

As part of the Angular Material Documentation Re-design, this feature will be used in the Sidenav.
This is related to mdList Issue #904.

<md-list ng-repeat="topic in menu.activities">

   <md-list-item md-expando>
      <md-icon src="{{topic.icon}}"></md-icon>
     <label>{{topic.title}}</label>
   </md-list-item>

</md-list>  

Visual requirements:

- Caret changes to indicate open/closed - Expanded panel has top and bottom borders - Child items are indented in line with parent toggle item

Functional requirements:

- Hidden panels should be really hidden with `display: none` (or `aria-hidden="true"` and `tabIndex="-1"` on each child control) - Animated transitions

Semantic requirements:

- Parent toggle item should indicate the child list it owns with `aria-controls="childListId"` - `aria-expanded="true | false"` on parent toggle item to indicate whether it is expanded or collapsed - Either `role="menu"` and `role="menuitem"` [should be used to indicate child elements are interactive](http://www.w3.org/TR/wai-aria/roles#menuitem) OR list items should have `` inside of them ([related issue](https://github.com//issues/904))

Questions:

- What is the style/indentation for items that do not have visual icons? - What is the style for the hover on the caret control?

[EladBezalel]

👍

[shannon]

👍

[SweVictor]

I was looking for how to make a list item clickable, much like the Google Material Inbox example. I came here through #904, hopefully this is the right place.

Anyway - after experimenting with the current release, I realized that wrapping a list item i an tag looks very un-material-like and wrapping an item with a md-button completely ruins the layout.

I found the discussion in #904 slightly hard to follow, so you might be on to this already, anyway my request is that Google Material's "primary/secondary action" (linked page above => Content => Tile actions) is implemented.

Most simple case would be the list example from the docs, but clickable - more advanced would be a secondary action for the image and primary for the rest. Anyway, a large click target would one goal for me.

A simple implementation to maybe look at would be Bootstrap's clickable list items, a control we use heavily on our Bootstrap projects.

/Victor

[mikol]

@SweVictor I have a topic open in the forum to discuss just the functionality that you are describing. Please take a look.

[ThomasBurleson]

@dparish - we really don't have a better way of voting... (wish list for GitHub). So thanks for your vote.
@Jamm - While I am not a fan of +1, but for voting/endorsement on Github it works.

[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.