shineout/css/Image/Props.d.ts

Shein 前端组件库

import * as React from 'react';
import { StandardProps } from '../@types/common';
declare type ReactNode = React.ReactNode;
/**
 * @title Image
 */
export interface ImageProps extends StandardProps {
    /**
     * @en the height of the image(When the value is percentage, the ratio is the width of the image)
     * @cn 图片高度(值为百分比时，对比值为图片宽度)
     * @default '100%'
     */
    height?: string | number;
    /**
     * @en original picture address
     * @cn 原始图片地址
     */
    href?: string;
    /**
     * @en whether to delay loading, number to set lazy offset
     * @cn 是否延迟加载，如果为数字则表示懒加载偏移量
     * @default false
     */
    lazy?: boolean | number;
    /**
     * @en the picture address
     * @cn 图片地址
     */
    src?: string;
    /**
     * @en Alternate address, applied when src is invalid
     * @cn 备用地址，src无效时会应用
     */
    alt?: string;
    /**
     * @en callback of image src or alt request fail
     * @cn src或alt 地址请求出错回调
     */
    onError?: (error: Event, type?: number) => void;
    /**
     * @en target of image
     * @cn 图片打开方式
     * @default '_modal'
     */
    target?: '_modal' | '_blank' | '_self' | '_download';
    /**
     * @en the width of the image
     * @cn 图片宽度
     * @default '100%'
     */
    width?: string | number;
    /**
     * @en loading image placeholder content
     * @cn 图片加载中占位内容
     * @default 'loading'
     */
    placeholder?: ReactNode;
    /**
     * @en the special element selector witch container the lazy image, such as: '#id', '.class'
     * @cn 对特定元素进行懒加载判断的选择器, 如: '#id', '.class'
     */
    container?: string | Element;
    /**
     * @en image error placeholder
     * @cn 图片载入错误的文案
     */
    error?: ReactNode;
    /**
     * @en auto transform protocol
     * @cn 是否根据页面自动转换协议
     * @default false
     */
    autoSSL?: boolean;
    /**
     * @en fit the container
     * @cn 适应容器的方式
     */
    fit?: 'fill' | 'fit' | 'stretch' | 'center';
    /**
     * @en shape of image
     * @cn 图片样式
     * @default 'rounded'
     */
    shape?: 'rounded' | 'circle' | 'thumbnail';
    /**
     * @en The callback of click
     * @cn 点击图片的回调
     */
    onClick?: (e: React.MouseEvent) => void;
    /**
     * @en The original property of html
     * @cn 原生 title 属性
     */
    title?: string;
    /**
     * @en The original property of html
     * @cn 是否禁止 img 元素原生 draggable 属性
     * @default false
     */
    noImgDrag?: boolean;
}
/**
 * @title Image.Group
 */
export interface ImageGroupProps extends StandardProps {
    /**
     * @en the height of single image(When the value is percentage, the ratio is the width of the image)
     * @cn 单个图片高度(值为百分比时，对比值为图片宽度)
     * @default '100%'
     */
    height?: string | number;
    /**
     * @en whether to delay loading
     * @cn 是否延迟加载
     * @default false
     */
    lazy?: boolean;
    /**
     * @en whether to stack
     * @cn 是否堆叠
     * @default false
     */
    pile?: boolean;
    /**
     * @en target of image
     * @cn 图片打开方式
     * @default '_modal'
     */
    target?: '_modal' | '_blank' | '_self' | '_download';
    /**
     * @en the width of single picture
     * @cn 单个图片宽度
     * @default '100%'
     */
    width?: string | number;
    /**
     * @en children
     * @cn 子元素
     */
    children?: ReactNode;
}
export {};