@sberdevices/plasma-temple/dist/components/Card/Card.d.ts

SberDevices CanvasApp Templates.

import React from 'react';
import { Ratio, View } from '@sberdevices/plasma-ui';
import { MediaObject } from '../../types';
export interface CardEntityBadge {
    /** Тип бейджа, влияет на цвет фона бейджа */
    type: View;
    /** Контент бейджа */
    content?: string;
}
export interface CardEntity<Id = unknown> {
    /** Идентификатор */
    id: Id;
    /** Картинка */
    image: MediaObject;
    /** Бейдж */
    badge?: CardEntityBadge;
    [key: string]: unknown;
}
export interface CardCoverProps {
    /** Определяет перекрытие контентом изображения карточки */
    cover?: boolean;
    /** Определяет наличие градиента у контента. Используется только если установлен флаг `cover` */
    coverGradient?: boolean;
}
export interface CardRatioProps {
    /**
     * Соотношение сторон изображения карточки,
     * если установлено свойство ratio непосредственно для изображения, то данный пропс игнорируется.
     * Используется либо один из стандартных вариантов 1/1, 3/4, 9/16 и т. д., либо процент высоты от ширины,
     * например 150 будет означать, что высота будет 150% от ширины.
     */
    ratio?: Ratio | number;
}
export interface CardPositionBadgeProps {
    /** Определяет наличия бейджа с индексом карточки */
    withPositionBadge?: boolean;
}
export interface CardProps<Id = unknown> extends CardCoverProps, CardRatioProps, CardPositionBadgeProps {
    /** Сущность карточки */
    entity: CardEntity<Id>;
    /** Индекс карточки в списке карточек, должен начинаться с 0 */
    index: number;
    /** Колбэк, вызываемый при клике по карточке */
    onClick: (id: CardEntity<Id>) => void;
    /** Колбэк, вызываемый при получении фокуса карточкой */
    onFocus?: (index: number) => void;
    className?: string;
}
export declare const getEntityImageRatio: (image: MediaObject, defaultRatio: Ratio | number) => {
    ratio: "1 / 1" | "1/1" | "3 / 4" | "3/4" | "4 / 3" | "4/3" | "9 / 16" | "9/16" | "16 / 9" | "16/9" | "1 / 2" | "1/2" | "2 / 1" | "2/1" | undefined;
    customRatio: string | undefined;
} | {
    customRatio: string;
    ratio?: undefined;
} | {
    ratio: "1 / 1" | "1/1" | "3 / 4" | "3/4" | "4 / 3" | "4/3" | "9 / 16" | "9/16" | "16 / 9" | "16/9" | "1 / 2" | "1/2" | "2 / 1" | "2/1";
    customRatio?: undefined;
};
/**
 * Компонент для отображение карточки какой-либо сущности (товара, фильма, экскурсии  и т.д. )
 * Может использоваться в каруселях, в компоненте `Grid`
 */
export declare function Card<Id = unknown>({ entity, index, cover, coverGradient, ratio, withPositionBadge, children, className, onClick, onFocus, }: React.PropsWithChildren<CardProps<Id>>): JSX.Element;
//# sourceMappingURL=Card.d.ts.map