This is just a simple example showing how you can use the
components to display content.
- Main labelSecondary labelkeyboard_arrow_down
Any content can go in here. This will be visible when it has been expanded.
- Another labelkeyboard_arrow_down
- Once More!Okie dokie. If you insistkeyboard_arrow_down
This example is a bit more in-depth about how you can make a trip planner type of interface. This touches on some of the other points about the two components.
ExpansionListclones required props into the
- You can display a different label once the
ExpansionPanelhas been opened.
- Providing arrays instead of a single node has different behaviors.
ExpansionList clones multiple props into the
ExpansionPanel to handle styles and keyboard accessibility.
This is normally not a problem if your interface is simple and does not require separate files for your different components.
If you create a separate component/file for each panel, you will need to manually provide those injected props to the panel.
You can update the
ExpansionPanel so that it can optional display a different secondary label while open. This can be useful
when the content requires some additional context only when visible.
Finally, providing lists instead of a single node/string can format the
ExpansionPanel's labels. When a list is provided to
label prop, it will start checking if the content is two lines and update the height a bit. When you want some additional
sub text for the main label, you should create a node with the className of
md-panel-secondary-label to get some additional
styles and positioning. When an list is provided to the
secondaryLabel prop, it will attempt to create a new column for each
- Trip nameCaribbean Cruisekeyboard_arrow_down
- Start and end datesStart Date: Feb 29, 2016End Date: Not setkeyboard_arrow_down
- CarrierThe best cruise linekeyboard_arrow_down
- Meal preferencesOptionalVegetariankeyboard_arrow_down