Ember-cli-mdc-card NPM | npm.io

3.0.16 • Published 13 days ago

Install

Weekly downloads

266

License

Apache-2.0

Repository

Last release

13 days ago

ember-cli-mdc-card

ember-cli addon for @material/card.

Compatibility

Ember.js v4.4 or above
Ember CLI v4.4 or above
Node.js v14 or above

Installation

ember install ember-cli-mdc-card

Components

This package contains the following top-level components.

{{mdc-card}}

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.

ember-addon material design material components card

@material/card ember-auto-import ember-cli-babel ember-cli-blueprint-helpers ember-cli-htmlbars ember-cli-mdc-sass ember-cli-mdc-utils ember-modifier

@everything-registry/sub-chunk-1575 @infinitebrahmanuniverse/nolb-ember-cli-m @zalastax/nolb-ember-cli-m

13 days ago

25 days ago

25 days ago

25 days ago

25 days ago

3 months ago

3 months ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.0.0-octane.49

3 years ago

2.0.0-octane.48

3 years ago

2.0.0-octane.47

3 years ago

2.0.0-octane.46

3 years ago

2.0.0-octane.45

3 years ago

2.0.0-octane.43

3 years ago

2.0.0-octane.42

3 years ago

2.0.0-octane.39

3 years ago

2.0.0-octane.41

3 years ago

2.0.0-octane.40

3 years ago

2.0.0-octane.38

3 years ago

2.0.0-octane.37

3 years ago

2.0.0-octane.36

3 years ago

2.0.0-octane.31

3 years ago

2.0.0-octane.33

3 years ago

2.0.0-octane.32

3 years ago

2.0.0-octane.35

3 years ago

2.0.0-octane.34

3 years ago

2.0.0-octane.30

3 years ago

2.0.0-octane.28

3 years ago

2.0.0-octane.27

3 years ago

2.0.0-octane.24

3 years ago

2.0.0-octane.23

3 years ago

2.0.0-octane.26

3 years ago

2.0.0-octane.25

3 years ago

2.0.0-octane.22

3 years ago

2.0.0-octane.17

3 years ago

2.0.0-octane.19

3 years ago

2.0.0-octane.18

3 years ago

2.0.0-octane.21

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

2.0.0-octane.16

4 years ago

2.0.0-octane.15

4 years ago

2.0.0-octane.14

4 years ago

2.0.0-octane.13

4 years ago

2.0.0-octane.12

4 years ago

2.0.0-octane.11

4 years ago

2.0.0-octane.10

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago