mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
feat(card): add alignment shortcuts for md-card-actions
This commit is contained in:
@@ -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.
|
||||
|
||||
@@ -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] {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user