///
import { BaseProps, SimpleBaseProps } from '../_helpers';
export type { BaseProps, SimpleBaseProps };
export interface SkeletonProps extends SimpleBaseProps {
/**
* 是否显示标题占位图
* @en Show title placeholder
* @default true
*/
title?: boolean | SkeletonTitleProps;
/**
* 是否显示段落占位图
* @en Show paragraph placeholder
* @default true
*/
paragraph?: boolean | SkeletonParagraphProps;
/**
* 是否显示头像占位图
* @en Show Avatar placeholder
* @default false
*/
avatar?: boolean | SkeletonAvatarProps;
/**
* 是否显示金刚位占位图(如该参数非空时,默认展示四列金刚位,且不展示标题/段落/头像占位符)
* @en Show Grid placeholder. When it's value is present, the paragraph, avatar or title placeholder will not be displayed, and four columns will be displayed by default
* @default false
*/
grid?: boolean | SkeletonGridProps;
/**
* 是否展示动画效果
* @en Show loading effect
* @default true
*/
showAnimation?: boolean;
/**
* 加载动画效果,可选“扫光”、“呼吸”两种效果
* @en Animation of loading effect, 'gradient' and 'breath' effects are optional
* @default "gradient"
*/
animation?: 'gradient' | 'breath';
/**
* 扫光动效高光颜色
* @en Highlight color of gradient animation
* @default "rgba(0, 0, 0, 0.04)"
*/
animationGradientColor?: string;
/**
* 占位块背景色
* @en Background color of skeleton item
* @default "#F7F8FA"
*/
backgroundColor?: string;
/**
* 子元素
* @en Children element
* @default null
*/
children?: React.ReactNode;
}
export interface SkeletonTitleProps extends SimpleBaseProps {
/**
* 标题占位图宽度
* @en The width of title
* @default "40%"
*/
width?: number | string;
}
export interface SkeletonParagraphProps extends SimpleBaseProps {
/**
* 段落占位图的行数
* @en Number of lines for paragraph
* @default 3
*/
rows?: number;
/**
* 段落占位图宽度,若为数组格式对应每行宽度,否则表示最后一行的宽度
* @en The width of paragraph. If width is an Array, it corresponds to the width of each line, otherwise it indicates the width of the last line
* @default "60%"
*/
width?: number | string | Array;
}
export interface SkeletonAvatarProps extends SimpleBaseProps {
}
export interface SkeletonGridProps extends SimpleBaseProps {
/**
* 金刚位列数
* @en columns of grid
* @default 4
*/
columns?: number;
}
export interface SkeletonNodeProps extends BaseProps {
}
export interface SkeletonRef {
/**
* 最外层 DOM 元素
* @en The outer DOM element of the component
*/
dom: HTMLDivElement | null;
}
export interface SkeletonContextParams {
backgroundColor?: string;
showAnimation: boolean;
animation: SkeletonProps['animation'];
}