@limetech/lime-elements
Version:
98 lines • 3.16 kB
TypeScript
import { InfoTileProgress } from '../info-tile/info-tile.types';
import { Link } from '../../global/shared-types/link.types';
/**
* This component can be used on places such as a start page or a dashboard.
* It offers features for visualizing aggregated data along with supplementary
* information.
*
* If clicking on the component should navigate the user to
* a new screen or web page, you need to provide a URL,
* using the `link` property.
*
* @exampleComponent limel-example-info-tile-basic
* @exampleComponent limel-example-info-tile-badge
* @exampleComponent limel-example-info-tile-progress
* @exampleComponent limel-example-info-tile-loading
* @exampleComponent limel-example-info-tile-primary-slot
* @exampleComponent limel-example-info-tile-styling
*/
export declare class InfoTile {
/**
* A piece of text or number that is the main piece of information
* which the component is intended to visualize.
*/
value: number | string;
/**
* Name of icon for the info tile.
*/
icon?: string;
/**
* The text to show below the info tile. Long labels will be truncated.
*/
label?: string;
/**
* A string of text that is visually placed before the value.
*/
prefix?: string;
/**
* A string of text that is visually placed after the value.
*/
suffix?: string;
/**
* Set to `true` if info tile is disabled.
*/
disabled?: boolean;
/**
* If supplied, the info tile will display a notification badge.
*/
badge?: number | string;
/**
* Set to `true` to put the component in the `loading` state.
* This does _not_ disable the link. To do so, the
* `disabled` property should be set to `true` as well.
*/
loading?: boolean;
/**
* If supplied, the info tile will be a clickable link.
*
* Supplying a value also adds an elevated effect using a shadow,
* as well as `cursor: pointer`, which appears on hover.
* While we strongly recommend supplying a link whenever the
* component should act as a link, if this is not possible, and
* you need to provide interaction through a click handler,
* you can still get the correct styling by supplying a `Link`
* object with the `href` property set to `'#'`.
*/
link?: Link;
/**
* Properties of the optional circular progress bar.
*
* Defaults:
* - `maxValue`: 100
* - `suffix`: %
* - `displayPercentageColors`: false
*
* Colors change with intervals of 10 %.
*/
progress?: InfoTileProgress;
private host;
/**
* `true` when something is assigned to the `primary` slot
*/
private hasPrimarySlot;
private handleMouseEnter;
private handleMouseLeave;
componentWillLoad(): void;
render(): any;
private checkProps;
private renderPrefix;
private renderValue;
private renderSuffix;
private renderIcon;
private updateHasPrimarySlotContent;
private renderProgress;
private renderLabel;
private renderNotification;
private renderSpinner;
}
//# sourceMappingURL=info-tile.d.ts.map