@eccenca/gui-elements/dist/types/components/Depiction/Depiction.d.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

import React from "react";
import Color from "color";
import { BadgeProps } from "../Badge/Badge";
import { IconProps } from "../Icon/Icon";
import { TestIconProps } from "../Icon/TestIcon";
import { TooltipProps } from "../Tooltip/Tooltip";
export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
    /**
     * Image that should be used as depiction.
     */
    image: React.ReactElement<IconProps | TestIconProps | React.ImgHTMLAttributes<HTMLImageElement> | React.SVGProps<SVGSVGElement>>;
    /**
     * In case you use an SVG encoded as a data URL in the `<img />` element, then it is transformed to a inline SVG inside the DOM tree.
     * Should be work with Base64 and URL encoded data URIs.
     */
    forceInlineSvg?: boolean;
    /**
     * Sets the height of the depiction, not the dimension (width x height).
     */
    size?: "tiny" | "small" | "medium" | "large" | "xlarge" | "source";
    /**
     * Resizing strategy for image to match the given ratio.
     * * contain: image is fully visible in the depiction
     * * cover: the image fully covers the depition area but it may displayed only partially
     * * stretch: image is streched to fill the depiction area
     */
    resizing?: "contain" | "cover" | "stretch";
    /**
     * Aspect ration of the depiction.
     */
    ratio?: "1:1" | "source";
    /**
     * Use a fully rounded shape on the depiction edges.
     * Combined with `ratio="1:1"` its displayed within a circular shape.
     */
    rounded?: boolean;
    /**
     * Color that is used for the depiction background.
     * This may be important if you use PNG, SVG or other image types that can have transparent background areas.
     */
    backgroundColor?: Color | string | "light" | "dark";
    /**
     * The depiction is displayed with a border around it.
     */
    border?: boolean;
    /**
     * Add padding around the image inside the depiction.
     * The amount of padding is defined relative to the depiction size, so a small padding on a small depiction is displayed smaller than a small padding on a large depiction.
     */
    padding?: "none" | "tiny" | "small" | "medium" | "large";
    /**
     * Reduce opacity to let it appear as inactive.
     * Even if it is no form control element it could be used inside one.
     * Use this property if the `disabled` state there is not adapted automatically to the depiction.
     */
    disabled?: boolean;
    /**
     * Description of the depiction.
     */
    caption?: string | JSX.Element;
    /**
     * How is the caption displayed.
     */
    captionPosition?: "none" | "tooltip";
    /**
     * In case of `captionPosition="tooltip"` this can be used to set the properties of the Tooltip element.
     */
    tooltipProps?: TooltipProps;
    /**
     * Attach a `<Badge />` element to the depiction.
     */
    badge?: React.ReactElement<BadgeProps>;
}
/**
 * Display a graphical representation and attache a caption or a badge to it.
 */
export declare function Depiction({ className, image, forceInlineSvg, size, resizing, ratio, caption, captionPosition, backgroundColor, border, rounded, padding, disabled, badge, tooltipProps, ...otherFigureProps }: DepictionProps): React.JSX.Element;