diff --git a/src/components/grid-list/README.md b/src/components/grid-list/README.md new file mode 100644 index 00000000000..2562565dd78 --- /dev/null +++ b/src/components/grid-list/README.md @@ -0,0 +1,115 @@ +# md-grid-list + +`md-grid-list` is an alternative list view that arranges cells into grid-based layout. +See Material Design spec [here](https://www.google.com/design/spec/components/grid-lists.html). + +## Usage + +### Simple grid list + +To use `md-grid-list`, first import the grid list directives and add them to your component's directives +array: + +```javascript +@Component({ + ... + directives: [MD_GRID_LIST_DIRECTIVES] +}) +``` + +In your template, create an `md-grid-list` element and specify the number of columns you want for +your grid using the `cols` property (this is the only mandatory attribute). + +You can define each tile using an `md-grid-tile` element, passing any tile content between its tags. + +Tiles are greedily placed in the first position of the grid that fits them, so row count depends on +how many tiles can fit in each row, given the col count and the colspan/rowspan of each tile. + +```html + + One + Two + Three + Four + +``` + +Output: + + + +## Grid list config + +####`cols` + +The `cols` property controls the number of columns displayed in your grid. It must be set or the +grid list will not be able to generate your layout. + +Ex: `...` + +Default: There is no reasonable default value for this, so if it is unspecified, the grid list will +throw an error. + +####`rowHeight` + +Row height for the list can be calculated in three ways: + +1. **Fixed height**: The height can be in `px`, `em`, or `rem`. If no units are specified, `px` +units are assumed. + + Ex: `...` + +2. **Ratio**: This ratio is width:height, and must be passed in with a colon, not a decimal. + + Ex: `...`. + +3. **Fit**: This mode automatically divides the available height by the number of rows. Please note +the height of the grid-list or its container must be set. + + Ex: `...` + +Defaults to a 1:1 ratio of width:height. + +####`gutterSize` + +Gutter size can be set to any `px`, `em`, or `rem` value with the `gutterSize` property. If no +units are specified, `px` units are assumed. + +Ex: `...` + +Defaults to `1px`. + +## Grid tile config + +You can set the rowspan and colspan of each tile individually, using the `rowspan` and `colspan` +properties. If not set, they both default to `1`. + +```html + + + {{tile.text}} + + +``` + +```javascript +... +export class MyComp { + tiles: any[] = [ + {text: 'One', cols: 3, rows: 1, color: 'lightblue'}, + {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'}, + {text: 'Three', cols: 1, rows: 1, color: 'lightpink'}, + {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'}, + ]; +} +``` + +Output: + + + +## TODO + +- Grid tile headers and footers +- Responsive sizing support \ No newline at end of file