feat(card): add alignment shortcuts for md-card-actions

angular · Apr 25, 2016 · 77be2df · 77be2df
1 parent 0672356
commit 77be2df
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/src/components/card/README.md b/src/components/card/README.md
@@ -51,6 +51,11 @@ Output:
 
 <img src="https://material.angularjs.org/material2_assets/cards/sections-card-min.png">
 
+#### 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
@@ -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/demo-app/card/card-demo.html b/src/demo-app/card/card-demo.html
@@ -26,6 +26,10 @@
     <md-card-content>
       <p>Here is some content</p>
     </md-card-content>
+    <md-card-actions align="end">
+      <button md-button>LIKE</button>
+      <button md-button>SHARE</button>
+    </md-card-actions>
   </md-card>
 
   <md-card>