Skip to content

Commit 77be2df

Browse files
committed
feat(card): add alignment shortcuts for md-card-actions
1 parent 0672356 commit 77be2df

File tree

3 files changed

+14
-0
lines changed

3 files changed

+14
-0
lines changed

src/components/card/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,11 @@ Output:
5151

5252
<img src="https://material.angularjs.org/material2_assets/cards/sections-card-min.png">
5353

54+
#### Preset shortcuts
55+
56+
`md-card-actions` has a few layout shortcuts. You can add `align="end"` to align the buttons at the end of
57+
the main axis (flex-end). The default is `align="start"` (flex-start).
58+
5459
### Preset layouts
5560

5661
You can also leverage preset layouts that format some of the sections together.

src/components/card/card.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@ md-card-actions {
5555
margin-left: -16px;
5656
margin-right: -16px;
5757
padding: 8px 0;
58+
59+
&[align='end'] {
60+
display: flex;
61+
justify-content: flex-end;
62+
}
5863
}
5964

6065
[md-card-image] {

src/demo-app/card/card-demo.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@
2626
<md-card-content>
2727
<p>Here is some content</p>
2828
</md-card-content>
29+
<md-card-actions align="end">
30+
<button md-button>LIKE</button>
31+
<button md-button>SHARE</button>
32+
</md-card-actions>
2933
</md-card>
3034

3135
<md-card>

0 commit comments

Comments
 (0)