@blox/material
Version:
Material Components for Angular
92 lines (91 loc) • 4.04 kB
TypeScript
import { AfterContentInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
import { AbstractMdcRipple } from '../ripple/abstract.mdc.ripple';
import { MdcEventRegistry } from '../../utils/mdc.event.registry';
/**
* Directive for an area that displays a custom background-image. See the <code>size</code>
* property for the sizing of the image.
* If used, this directive should be put inside the card itself (<code>MdcCardDirective</code>).
* Add an <code>mdcCardMediaContent</code> as sub-element for displaying a title, text,
* or icon on top of the background image.
*/
export declare class MdcCardMediaDirective {
private _size;
constructor();
/**
* Directive to select size to which this element's background-image should
* be scaled. Can be one of 'cover', '16:9', or 'square'. The default value
* is 'cover'.
*/
get size(): 'cover' | '16:9' | 'square';
set size(val: 'cover' | '16:9' | 'square');
}
/**
* Directive for displaying text on top of a <code>mdcCardMedia</code> element.
* This directive should be used as child element of the <code>mdcCardMedia</code>, and
* creates an absolutely positioned box the same size as the media area.
*/
export declare class MdcCardMediaContentDirective {
}
/**
* Directive for displaying the button card actions. Composed of one or more
* card actions, which must be buttons that have the <code>MdcButtonDirective</code>.
* This directive should be placed inside an <code>MdcCardActionsDirective</code>.
*/
export declare class MdcCardActionButtonsDirective {
}
/**
* Directive for displaying the icon card actions. Composed of one or more
* card actions, which must be icons (for instance <code>mdcIconButton</code>.
* This directive should be placed inside an <code>MdcCardActionsDirective</code>.
*/
export declare class MdcCardActionIconsDirective {
}
/**
* Directive for showing the different actions a user can take. Use
* <code>mdcButton</code>, or <code>mdcIconButton</code> as child elements.
* If you want to use both buttons and icons in the same row, wrap them in
* <code>mdcCardActionButtons</code>, and <code>mdcCardActionIcons</code> directives.
*/
export declare class MdcCardActionsDirective implements AfterContentInit {
private renderer;
private _initialized;
private _fullBleed;
constructor(renderer: Renderer2);
ngAfterContentInit(): void;
private _initButtons;
private _initIcons;
/**
* When this input is defined and does not have value false, the contained
* button takes up the entire width of the action row. This should be used only when
* there is a single button contained in the directive.
*/
get fullBleed(): boolean;
set fullBleed(val: boolean);
static ngAcceptInputType_fullBleed: boolean | '';
}
/**
* Directive for the main tappable area of the card (so should be a child of <code>mdcCard</code>).
* Typically contains most (or all) card content except <code>mdcCardActions</code>.
* Only applicable to cards that have a primary action that the main surface should trigger.
*/
export declare class MdcCardPrimaryActionDirective extends AbstractMdcRipple implements AfterContentInit, OnDestroy {
private elm;
constructor(elm: ElementRef, renderer: Renderer2, registry: MdcEventRegistry, doc: any);
ngAfterContentInit(): void;
ngOnDestroy(): void;
}
/**
* Directive for a material designed card. The card can be composed with the following directives:
* <code>MdcCardMediaDirective</code>, <code>MdcCardActionsDirective</code>
*/
export declare class MdcCardDirective {
private _outlined;
/**
* When this input is set to a value other than false, the card will have a
* hairline stroke instead of a shadow.
*/
get outlined(): boolean;
set outlined(val: boolean);
static ngAcceptInputType_outlined: boolean | '';
}
export declare const CARD_DIRECTIVES: (typeof MdcCardMediaContentDirective | typeof MdcCardActionsDirective | typeof MdcCardPrimaryActionDirective)[];