diff --git a/src/components/list/README.md b/src/components/list/README.md new file mode 100644 index 000000000000..68099edd667b --- /dev/null +++ b/src/components/list/README.md @@ -0,0 +1,126 @@ +# md-list + +`md-list` is a container component that wraps and formats a series of line items. As the base list component, + it provides Material Design styling, but no behavior of its own. + +## Usage + +### Simple list + +To use `md-list`, first import the list directives and add them to your component's directives array: + +```javascript +@Component({ + ... + directives: [MD_LIST_DIRECTIVES] +}) +``` + +In your template, create an `md-list` element and wrap each of your items in an `md-list-item` tag. + +```html + + Pepper + Salt + Paprika + +``` + +Output: + + + +### Multi-line lists + +If your list requires multiple lines per list item, annotate each line with an `md-line` attribute. +You can use whichever heading tag is appropriate for your DOM hierarchy (doesn't have to be `h3`), +as long as the `md-line` attribute is included. + +```html + + + +

{{message.from}}

+

+ {{message.subject}} + -- {{message.message}} +

+
+
+ + + + +

{{message.from}}

+

{{message.subject}}

+

{{message.message}}

+
+
+``` + +Two line list output: + + + +Three line list output: + + + +### Lists with avatars + +To include an avatar, add an image tag with an `md-list-avatar` attribute. + +```html + + + ... +

{{message.from}}

+

+ {{message.subject}} + -- {{message.message}} +

+
+
+``` + +Output: + + + +### Dense lists +Lists are also available in "dense layout" mode, which shrinks the font size and height of the list +to suit UIs that may need to display more information. To enable this mode, add a `dense` attribute +to the main `md-list` tag. + + +```html + + Pepper + Salt + Paprika + +``` + +Output: + + + +### Lists with secondary text +Secondary text styling will be part of a broader typography module to +[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component +specifically. Gray text in the examples above comes from a "demo-2" class added manually by the demo. + +### Lists with `*ngIf` + +If you'd like to use `*ngIf` on one of your list item lines, make sure to use `