@limetech/lime-elements
Version:
78 lines • 2.42 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { Image } from '../../global/shared-types/image.types';
import { Icon } from '../../global/shared-types/icon.types';
import { ListSeparator } from '../../global/shared-types/separator.types';
import { ActionBarItem } from '../action-bar/action-bar.types';
/**
* Card is a component that displays content about a single topic,
* in a structured way. It can contain a header, and some supporting media such
* as an image or an icon, a body of text, or optional actions.
*
* @exampleComponent limel-example-card-basic
* @exampleComponent limel-example-card-image
* @exampleComponent limel-example-card-actions
* @exampleComponent limel-example-card-clickable
* @exampleComponent limel-example-card-orientation
* @exampleComponent limel-example-card-slot
* @exampleComponent limel-example-card-styling
*/
export declare class Card {
/**
* Heading of the card,
* to provide a short title about the context.
*/
heading?: string;
/**
* Subheading of the card
* to provide a short description of the context.
*/
subheading?: string;
/**
* A hero image to display in the card,
* to enrich the content with visual information.
*/
image?: Image;
/**
* An icon, to display along with the heading and subheading.
*/
icon?: string | Icon;
/**
* The content of the card.
* Supports markdown, to provide a rich text experience.
*/
value?: string;
/**
* Actions to display in the card,
* to provide the user with options to interact with the content.
*/
actions?: Array<ActionBarItem | ListSeparator>;
/**
* When true, improve the accessibility of the component and hints the user
* that the card can be interacted width.
*/
clickable: boolean;
/**
* The orientation of the card,
* specially useful when the card has an image.
*/
orientation: 'landscape' | 'portrait';
/**
* Fired when a action bar item has been clicked.
*/
actionSelected: EventEmitter<ActionBarItem>;
private host;
private handleMouseEnter;
private handleMouseLeave;
componentWillLoad(): void;
render(): any;
private renderImage;
private renderHeader;
private renderIcon;
private renderHeading;
private renderSubheading;
private renderSlot;
private renderValue;
private handleActionSelect;
private renderActionBar;
}
//# sourceMappingURL=card.d.ts.map