Elevate md-card in angular material

angular material card
angular material elevation
angular material example
angular material card examples
angular material classes
angular material center card
material cards
angular material hover effect

According to the Material Design spec:

On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.

How can I create this animated effect using Angular Material 2?

I have considered doing this with (hover)= and with animations. I don't really care for the approach, I would prefer for it to elevate on hover. The reason for this, I'm using cards as buttons in my UI.

A directive is re-usable and configurable, and can be applied to any number of elements. Create the directive, and reference it in your module's declarations.

This directive adds and removes the elevation class when the user's mouse enters or leaves the element.

import { Directive, ElementRef, HostListener, Input, Renderer2, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[appMaterialElevation]'
})
export class MaterialElevationDirective implements OnChanges {

  @Input()
  defaultElevation = 2;

  @Input()
  raisedElevation = 8;

  constructor(
    private element: ElementRef,
    private renderer: Renderer2
  ) {
    this.setElevation(this.defaultElevation);
  }

  ngOnChanges(_changes: SimpleChanges) {
    this.setElevation(this.defaultElevation);
  }

  @HostListener('mouseenter')
  onMouseEnter() {
    this.setElevation(this.raisedElevation);
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.setElevation(this.defaultElevation);
  }

  setElevation(amount: number) {
    const elevationPrefix = 'mat-elevation-z';
    // remove all elevation classes
    const classesToRemove = Array.from((<HTMLElement>this.element.nativeElement).classList)
      .filter(c => c.startsWith(elevationPrefix));
    classesToRemove.forEach((c) => {
      this.renderer.removeClass(this.element.nativeElement, c);
    });

    // add the given elevation class
    const newClass = `${elevationPrefix}${amount}`;
    this.renderer.addClass(this.element.nativeElement, newClass);
  }
}

Then the directive can be applied to an element, with optional input properties.

<mat-card appMaterialElevation [defaultElevation]="variableHeight" raisedElevation="16">
    <mat-card-header>
        <mat-card-title>Card Title</mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <p>
            This card changes elevation when you hover over it!
        </p>
    </mat-card-content>
</mat-card>

See this demo StackBlitz.

Angular Material's elevation classes and mixins allow you to add separation between elements along the z-axis. All material design elements have resting If you want to elevate the card as the user hovers over it, add the md-with-hover property. You can also add a ripple effect in combination with the elevation behavior. For doing so, wrap the md-card 's content in a md-ripple tag.

To change elevation of md-card, create a class like following:

.z-depth:hover {
    box-shadow: 0 8px 8px 8px rgba(0,0,0,.2), 0 8px 8px 0 rgba(0,0,0,.14), 0 8px 8px 0 rgba(0,0,0,.12) !important;
    transform: translate3d(0,0,0);
    transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
}

You can change the box-shadow numbers to find the exact elevation you are looking for.

Plnkr demo.

On images, cards, buttons, etc, simply add class="md-elevation-zX" and “X” can be any number from 1–24. Here's an example of all the The <md-card> directive is a container element used within <md-content> containers. An image included as a direct descendant will fill the card's width. If you want to avoid this, you can add the md-image-no-fill class to the parent element. The <md-card-content> container will wrap text content and provide padding.

As for me it would be better to use predefined css classes for it. And toggle this class when user hovers over md-card. To change the evelavtion use mat-elevation-z{{elevationValue}}

The <md-card> directive is a container element used within <md-content> containers. An image included as a direct descendant will fill the card's width. If you want to avoid this, you can add the md-image-no-fill class to the parent element. The <md-card-content> container will wrap text content and provide padding. Material Design components for Angular. Sprint from Zero to App. Hit the ground running with comprehensive, modern UI components that work across the web, mobile, and desktop. Fast and Consistent. Finely tuned performance, because every millisecond counts. Fully tested across modern browsers. Themeable, for when you need to stay on brand or

mdCard API Documentation. The <md-card> directive is a container element used within <md-content> containers. Surfaces at the same elevation can appear differently when other surfaces are behind them. 1. Both surfaces A and B are at the same 8dp elevation. They cast different shadows because Surface B is in front of another surface (C) that already has elevation. 2. Elevation differences between surfaces (A), (B), and (C), as viewed from the side.

Cards should have a elevation (dropshadow) of 0dp on desktop. What is the Which versions of Angular, Material, OS, browsers are affected? Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.

Proposal: To have md-card be a Directive instead of a Component so any Which versions of Angular, Material, OS, TypeScript, browsers are affected? All <div class="mat-elevation-z12">I am an elevated div</div> <div An <md-card-footer> element can be optionally included to put content flush against the bottom edge of the card. Action buttons can be included in an <md-card-actions> element, similar to <md-dialog-actions> . You can then position buttons using layout attributes.

Comments
  • Exactly what I was looking for. Thank you!
  • out of curiosity, how can I replicate the "GET STARTED" CTA at angular.io ?
  • What do you mean by CTA?
  • "CTA" = Call to Action. I meant to say CTA card (the card on the bottom of the page) it has a nice focus effect
  • I like your approach @Nodarri it would be helpful for me to see a simple demo if you can. Thank you.
  • @moshe take a look plnkr.co/edit/5fUTBbSj0QuJDeDpIYqM?p=preview
  • Thank you! does class "z-depth" do anything special?
  • Nothing, just forgot to remove it :)
  • @Nodarii Thank you!