@ivanvanderbyl/ember-material-components-card
v0.77.1-alpha.2
Published
ember-cli addon for @material/card
Downloads
1
Maintainers
Readme
@ivanvanderbyl/ember-material-components-card
ember-cli addon for @material/card
.
Installation
ember install @ivanvanderbyl/ember-material-components-card
Components
This package contains the following top-level components.
mdc-card
Description
The {{mdc-card}}
is a component that implements the
Material Design card component.
Usage
{{#mdc-card outlined=[true|false]}}
<!-- ... content ... -->
{{/mdc-card}}
Attributes
outlined
- The card is outlined, and not elevated.
Adding Media to the Card
Use the {{mdc-card-media}}
component to add an optional media component to the card. The
{{mdc-card-media}}
also contains the {{mdc-card-media-content}}
, which is optional content
displayed over the media, like a title.
{{#mdc-card}}
{{#mdc-card-media scale=["square"|"16-9"]}}
{{#mdc-card-media-content}}Title{{/mdc-card-media-content}}
{{/mdc-card-media}}
<!-- ... content ... -->
{{/mdc-card}}
Attributes
scale
- Sets the scale of the media to either square (i.e., width equal height), or 16x9 aspect ratio.
Adding Actions to the Card
Actions typically appear at the bottom of the card. The actions can either be a button or
an icon button. Use the {{mdc-card-actions}}
component, and its child components, to add
actions to a {{mdc-card}}
component.
{{#mdc-card}}
<!-- ... content ... -->
{{#mdc-card-actions}}
{{#mdc-card-action-buttons}}
{{#mdc-card-action-button}}Action 1{{/mdc-card-action-button}}
{{#mdc-card-action-button}}Action 2{{/mdc-card-action-button}}
{{/mdc-card-action-buttons}}
{{#mdc-card-action-icons}}
{{mdc-card-action-icon "share" title="Share"}}
{{mdc-card-action-icon "more_vert" title="More options"}}
{{/mdc-card-action-icons}}
{{/mdc-card-actions}}
{{/mdc-card}}
Types of Actions
{{mdc-card-action-button}}
- Standard button as a card action.{{mdc-card-action-button-link-to}}
- A link component as a card action.{{mdc-card-action-icon}}
- A{{mdc-icon}}
component as a card action.{{mdc-card-action-icon-toggle}}
- A{{mdc-icon-button-toggle}}
as a card action.