@ui5/webcomponents-react/dist/components/AnalyticalCardHeader/index.d.ts

React Wrapper for UI5 Web Components and additional components

import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
import { DeviationIndicator } from '../../enums/DeviationIndicator.js';
import { ValueColor } from '../../enums/ValueColor.js';
import type { CommonProps } from '../../types/index.js';
export interface AnalyticalCardHeaderPropTypes extends CommonProps {
    /**
     * The title of the card
     */
    titleText?: string;
    /**
     * Determines the ARIA level of the `titleText`.
     *
     * __Note:__ Defining a `titleTextLevel` will apply the `aria-level` attribute with a value from 1 to 6.
     *
     * @default 3
     */
    titleTextLevel?: HTMLAttributes<HTMLSpanElement>['aria-level'];
    /**
     * The subtitle of the card
     */
    subtitleText?: string;
    /**
     * The direction of the trend arrow. Shows deviation for the value of the main number indicator.
     *
     * @default `"None"`
     */
    trend?: DeviationIndicator | keyof typeof DeviationIndicator;
    /**
     * The numeric value of the main number indicator.
     */
    value?: string;
    /**
     * Defines the unit of measurement (scaling prefix) for the main indicator.
     * Financial characters can be used for currencies and counters. The International System of Units (SI) prefixes can be used.
     */
    scale?: string;
    /**
     * The semantic color which represents the state of the main number indicator.
     * Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Critical</code></li> <li><code>Good</code></li> <li><code>Neutral</code></li></ul>
     *
     * __Note__: "None" has the same color as "Neutral" but doesn't add the tooltip and accessible-name for the numeric content.
     *
     * @default `"None"`
     */
    state?: ValueColor | keyof typeof ValueColor;
    /**
     * Additional text which adds more details to what is shown in the numeric header.
     */
    description?: string;
    /**
     * Defines the status text.
     */
    status?: string;
    /**
     * General unit of measurement for the header. Displayed as side information to the subtitle.
     */
    unitOfMeasurement?: string;
    /**
     * Fired when the `AnalyticalCardHeader` is clicked.
     */
    onClick?: MouseEventHandler<HTMLDivElement>;
    /**
     * Additional side number indicators. For example "Deviation" and "Target". Not more than two side indicators should be used.
     *
     * __Note:__ Although this prop accepts all HTML Elements, it is strongly recommended that you only use `NumericSideIndicator` in order to preserve the intended design.
     */
    children?: ReactNode | ReactNode[];
}
/**
 * The `AnalyticalCardHeader` is a KPI header, enabling the AnalyticalCard representation. If this header is used, the `Card` should only receive a chart as content and no footer area.
 *
 * __Note:__ This component should only be used as header for the `Card` component.
 */
export declare const AnalyticalCardHeader: import("react").ForwardRefExoticComponent<AnalyticalCardHeaderPropTypes & import("react").RefAttributes<HTMLDivElement>>;