+#### Preset shortcuts
+
+`md-card-actions` has a few layout shortcuts. You can add `align="end"` to align the buttons at the end of
+the main axis (flex-end). The default is `align="start"` (flex-start).
+
### Preset layouts
You can also leverage preset layouts that format some of the sections together.
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index f99a69d1fe31..02f9c60f5c66 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -55,6 +55,11 @@ md-card-actions {
margin-left: -16px;
margin-right: -16px;
padding: 8px 0;
+
+ &[align='end'] {
+ display: flex;
+ justify-content: flex-end;
+ }
}
[md-card-image] {
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 6127fbd9cfe4..69901a276477 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
/*
diff --git a/src/components/card/package.json b/src/components/card/package.json
index edcffa006a20..cce49a85d3bb 100644
--- a/src/components/card/package.json
+++ b/src/components/card/package.json
@@ -1,6 +1,6 @@
{
"name": "@angular2-material/card",
- "version": "2.0.0-alpha.3",
+ "version": "2.0.0-alpha.4",
"description": "Angular 2 Material card",
"main": "./card.js",
"typings": "./card.d.ts",
@@ -21,7 +21,6 @@
},
"homepage": "https://github.com/angular/material2#readme",
"peerDependencies": {
- "angular2": "^2.0.0-beta.8",
- "@angular2-material/core": "2.0.0-alpha.3"
+ "@angular2-material/core": "2.0.0-alpha.4"
}
}
diff --git a/src/components/checkbox/README.md b/src/components/checkbox/README.md
index c8e61c74a072..e7cfc28a36d4 100644
--- a/src/components/checkbox/README.md
+++ b/src/components/checkbox/README.md
@@ -15,7 +15,7 @@ A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhD
```html
+
+ Simple checkbox
- `,
- directives: [MdCheckbox]
+
`
})
-class CheckboxController {
+class SingleCheckbox {
+ alignment: string = 'start';
isChecked: boolean = false;
isIndeterminate: boolean = false;
isDisabled: boolean = false;
- eventProxy: EventEmitter
+
\ No newline at end of file
diff --git a/src/components/grid-list/grid-list.scss b/src/components/grid-list/grid-list.scss
index e69de29bb2d1..d2372096a135 100644
--- a/src/components/grid-list/grid-list.scss
+++ b/src/components/grid-list/grid-list.scss
@@ -0,0 +1,67 @@
+// TODO(kara): Review this to see if MD spec updates are needed
+
+md-grid-list {
+ display: block;
+ position: relative;
+}
+
+md-grid-tile {
+ display: block;
+ position: absolute;
+
+ figure {
+ display: flex;
+ position: absolute;
+
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ padding: 0;
+ margin: 0;
+ }
+
+ // Headers & footers
+ md-grid-tile-header,
+ md-grid-tile-footer {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: 48px;
+ color: #fff;
+ background: rgba(0, 0, 0, 0.18);
+ overflow: hidden;
+
+ // Positioning
+ position: absolute;
+ left: 0;
+ right: 0;
+
+ h3,
+ h4 {
+ font-weight: 400;
+ margin: 0 0 0 16px;
+ }
+
+ h3 {
+ font-size: 14px;
+ }
+
+ h4 {
+ font-size: 12px;
+ }
+ }
+
+ md-grid-tile-header {
+ top: 0;
+ }
+
+ md-grid-tile-footer {
+ bottom: 0;
+ }
+}
diff --git a/src/components/grid-list/grid-list.ts b/src/components/grid-list/grid-list.ts
index beea794f5e7c..dc612c3f3d23 100644
--- a/src/components/grid-list/grid-list.ts
+++ b/src/components/grid-list/grid-list.ts
@@ -1,8 +1,158 @@
-import {Component} from 'angular2/core';
+import {
+ Component,
+ ViewEncapsulation,
+ AfterContentChecked,
+ OnInit,
+ Input,
+ ContentChildren,
+ QueryList,
+ Renderer,
+ ElementRef
+} from '@angular/core';
+import {MdGridTile} from './grid-tile';
+import {TileCoordinator} from './tile-coordinator';
+import {
+ TileStyler,
+ FitTileStyler,
+ RatioTileStyler,
+ FixedTileStyler
+} from './tile-styler';
+import {MdGridListColsError} from './grid-list-errors';
+import {Dir} from '../../core/rtl/dir';
+
+// TODO(kara): Conditional (responsive) column count / row size.
+// TODO(kara): Re-layout on window resize / media change (debounced).
+// TODO(kara): gridTileHeader and gridTileFooter.
+
+const MD_FIT_MODE = 'fit';
@Component({
selector: 'md-grid-list',
+ host: { 'role': 'list' },
templateUrl: './components/grid-list/grid-list.html',
styleUrls: ['./components/grid-list/grid-list.css'],
+ encapsulation: ViewEncapsulation.None,
})
-export class MdGridList {}
+export class MdGridList implements OnInit, AfterContentChecked {
+ /** Number of columns being rendered. */
+ _cols: number;
+
+ /** Row height value passed in by user. This can be one of three types:
+ * - Number value (ex: "100px"): sets a fixed row height to that value
+ * - Ratio value (ex: "4:3"): sets the row height based on width:height ratio
+ * - "Fit" mode (ex: "fit"): sets the row height to total height divided by number of rows
+ * */
+ _rowHeight: string;
+
+ /** The amount of space between tiles. This will be something like '5px' or '2em'. */
+ _gutter: string = '1px';
+
+ /** Sets position and size styles for a tile */
+ _tileStyler: TileStyler;
+
+ /** Query list of tiles that are being rendered. */
+ @ContentChildren(MdGridTile) _tiles: QueryList