igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
262 lines (257 loc) • 10.5 kB
TypeScript
import * as i0 from '@angular/core';
import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
/**
* IgxCardMedia is container for the card media section.
* Use it to wrap images and videos.
*/
declare class IgxCardMediaDirective {
/** @hidden @internal */
cssClass: string;
/**
* Sets the `width` and `min-width` style property
* of the media container. If not provided it will be set to `auto`.
*
* @example
* ```html
* <igx-card-media width="300px"></igx-card-media>
* ```
*/
width: string;
/**
* Sets the `height` style property of the media container.
* If not provided it will be set to `auto`.
*
* @example
* ```html
* <igx-card-media height="50%"></igx-card-media>
* ```
*/
height: string;
/**
* Sets the `role` attribute of the media container.
*/
role: string;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardMediaDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardMediaDirective, "igx-card-media", never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* IgxCardHeader is container for the card header
*/
declare class IgxCardHeaderComponent {
/** @hidden @internal */
cssClass: string;
/**
* Sets the layout style of the header.
* By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
*
* @example
* ```html
* <igx-card-header [vertical]="true"></igx-card-header>
* ```
*/
vertical: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardHeaderComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxCardHeaderComponent, "igx-card-header", never, { "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, ["igx-avatar, igx-card-media, [igxCardThumbnail]", "\n [igxCardHeaderTitle],\n [igxCardHeaderSubtitle],\n .igx-card-header__title,\n .igx-card-header__title--small,\n .igx-card-header__subtitle", "*"], true, never>;
static ngAcceptInputType_vertical: unknown;
}
/**
* IgxCardThumbnail is container for the card thumbnail section.
* Use it to wrap anything you want to be used as a thumbnail.
*/
declare class IgxCardThumbnailDirective {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardThumbnailDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardThumbnailDirective, "[igxCardThumbnail]", never, {}, {}, never, never, true, never>;
}
/**
* igxCardHeaderTitle is used to denote the header title in a card.
* Use it to tag text nodes.
*/
declare class IgxCardHeaderTitleDirective {
/** @hidden @internal */
cssClass: string;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardHeaderTitleDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardHeaderTitleDirective, "[igxCardHeaderTitle]", never, {}, {}, never, never, true, never>;
}
/**
* igxCardHeaderSubtitle is used to denote the header subtitle in a card.
* Use it to tag text nodes.
*/
declare class IgxCardHeaderSubtitleDirective {
/** @hidden @internal */
cssClass: string;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardHeaderSubtitleDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardHeaderSubtitleDirective, "[igxCardHeaderSubtitle]", never, {}, {}, never, never, true, never>;
}
/**
* IgxCardContent is container for the card content.
*/
declare class IgxCardContentDirective {
/** @hidden @internal */
cssClass: string;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardContentDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardContentDirective, "igx-card-content", never, {}, {}, never, never, true, never>;
}
/**
* IgxCardFooter is container for the card footer
*/
declare class IgxCardFooterDirective {
/**
* Sets the value of the `role` attribute of the card footer.
* By default the value is set to `footer`.
*
* @example
* ```html
* <igx-card-footer role="footer"></igx-card-footer>
* ```
*/
role: string;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardFooterDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCardFooterDirective, "igx-card-footer", never, { "role": { "alias": "role"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Card provides a way to display organized content in appealing way.
*
* @igxModule IgxCardModule
*
* @igxTheme igx-card-theme, igx-icon-theme, igx-button-theme
*
* @igxKeywords card, button, avatar, icon
*
* @igxGroup Layouts
*
* @remarks
* The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are
* five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer.
*
* @example
* ```html
* <igx-card>
* <igx-card-header>
* <h3 igxCardHeaderTitle>{{title}}</h3>
* <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
* </igx-card-header>
* <igx-card-actions>
* <button type="button" igxButton igxRipple>Share</button>
* <button type="button" igxButton igxRipple>Play Album</button>
* </igx-card-actions>
* </igx-card>
* ```
*/
declare class IgxCardComponent {
/**
* Sets/gets the `id` of the card.
* If not set, `id` will have value `"igx-card-0"`;
*
* @example
* ```html
* <igx-card id="my-first-card"></igx-card>
* ```
* ```typescript
* let cardId = this.card.id;
* ```
*/
id: string;
/**
* Sets the `igx-card` css class to the card component.
*
* @hidden
* @internal
*/
cssClass: string;
/**
* Sets the value of the `role` attribute of the card.
* By default the value is set to `group`.
*
* @example
* ```html
* <igx-card role="group"></igx-card>
* ```
*/
role: string;
/**
* Sets/gets whether the card is elevated.
* Default value is `false`.
*
* @example
* ```html
* <igx-card elevated></igx-card>
* ```
* ```typescript
* let cardElevation = this.card.elevated;
* ```
*/
elevated: boolean;
/**
* Sets the value of the `horizontal` attribute of the card.
* Setting this to `true` will make the different card sections align horizontally,
* essentially flipping the card to the side.
*
* @example
* ```html
* <igx-card [horizontal]="true"></igx-card>
* ```
*/
horizontal: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxCardComponent, "igx-card", never, { "id": { "alias": "id"; "required": false; }; "role": { "alias": "role"; "required": false; }; "elevated": { "alias": "elevated"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; }, {}, never, ["*"], true, never>;
static ngAcceptInputType_elevated: unknown;
static ngAcceptInputType_horizontal: unknown;
}
declare const IgxCardActionsLayout: {
readonly START: "start";
readonly JUSTIFY: "justify";
};
type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout];
/**
* IgxCardActions is container for the card actions.
*/
declare class IgxCardActionsComponent implements OnInit, OnChanges {
card: IgxCardComponent;
/**
* Sets the layout style of the actions.
* You can justify the elements slotted in the igx-card-action container
* so that they are positioned equally from one another taking up all the
* space available along the card actions axis.
*
* @example
* ```html
* <igx-card-actions layout="justify"></igx-card-actions>
* ```
*/
layout: IgxCardActionsLayout | string;
/**
* Sets the vertical attribute of the actions.
* When set to `true` the actions will be layed out vertically.
*/
vertical: boolean;
/**
* A getter that returns `true` when the layout has been
* set to `justify`.
*/
get isJustifyLayout(): boolean;
private isVerticalSet;
/**
* @hidden
* @internal
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* @hidden
* @internal
*/
ngOnInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardActionsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxCardActionsComponent, "igx-card-actions", never, { "layout": { "alias": "layout"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, {}, never, ["[igxStart], [igxButton]:not([igxEnd])", "*", "[igxEnd], [igxIconButton]:not([igxStart]), igx-icon:not([igxStart])"], true, never>;
static ngAcceptInputType_vertical: unknown;
}
declare const IGX_CARD_DIRECTIVES: readonly [typeof IgxCardComponent, typeof IgxCardHeaderComponent, typeof IgxCardMediaDirective, typeof IgxCardContentDirective, typeof IgxCardActionsComponent, typeof IgxCardFooterDirective, typeof IgxCardHeaderTitleDirective, typeof IgxCardHeaderSubtitleDirective, typeof IgxCardThumbnailDirective];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
declare class IgxCardModule {
static ɵfac: i0.ɵɵFactoryDeclaration<IgxCardModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<IgxCardModule, never, [typeof IgxCardComponent, typeof IgxCardHeaderComponent, typeof IgxCardMediaDirective, typeof IgxCardContentDirective, typeof IgxCardActionsComponent, typeof IgxCardFooterDirective, typeof IgxCardHeaderTitleDirective, typeof IgxCardHeaderSubtitleDirective, typeof IgxCardThumbnailDirective], [typeof IgxCardComponent, typeof IgxCardHeaderComponent, typeof IgxCardMediaDirective, typeof IgxCardContentDirective, typeof IgxCardActionsComponent, typeof IgxCardFooterDirective, typeof IgxCardHeaderTitleDirective, typeof IgxCardHeaderSubtitleDirective, typeof IgxCardThumbnailDirective]>;
static ɵinj: i0.ɵɵInjectorDeclaration<IgxCardModule>;
}
export { IGX_CARD_DIRECTIVES, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective };