import React from 'react'; import { ProTagItem } from '../field'; import { ProMessageProps } from '../utils/message'; import { ProActionGroupProps } from '../actions'; import './index.scss'; export * from './card-container'; export interface ProCardProps extends Omit, 'title'> { /** 内容部分 */ children?: React.ReactNode; /**卡片标题 */ title?: React.ReactNode; /**卡片副标题 */ subTitle?: React.ReactNode; /** 标题右侧图标 hover 提示信息 */ tooltip?: React.ReactNode; /** 标题右侧图标 */ tooltipIcon?: React.ReactNode; /** 标签组 */ tags?: ProTagItem[]; /** 标题右侧描述 */ description?: React.ReactNode; /** 额外信息区域,位于卡片右上角,可以配置一些常用轻量操作 */ extra?: React.ReactNode | ProActionGroupProps; /** 卡片操作区域,位于卡片最下方,可以配置一些常用轻量操作 */ actions?: React.ReactNode | ProActionGroupProps; /** 卡片背景图 */ image?: string; /** 位于弹窗内容上方的消息提示区 */ message?: ProMessageProps; /** 卡片标题下方是否有分割线 */ divider?: boolean; /** * @deprecated 建议使用 borderColor = 'none' 代替 */ bordered?: boolean; /** 卡片在 hover 时拥有阴影效果 */ hoveredShadow?: boolean; /** 卡片是否为紧凑模式,紧凑模式下卡片没有内边距和边框 */ compacted?: boolean; /** 卡片内容是否居中展示 */ centered?: boolean; /** 加载中状态 */ loading?: boolean; /** 是否只是内容区加载,标题正常显示 */ contentLoading?: boolean; /** 空状态 */ empty?: boolean; /** 边框颜色 */ borderColor?: 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'grey' | 'transparent' | 'none'; /** 背景色 */ backgroundColor?: 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'grey' | 'transparent'; /** 内容区栅格排列 flex 方向,仅仅在卡片嵌套模式下生效 */ direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'; /** 内容区栅格的间距,仅仅在卡片嵌套模式下生效 */ spacing?: [number, number] | number; /** 内容区栅格超出部分是否换行展示,仅仅在卡片嵌套模式下生效 */ wrap?: boolean; /** 卡片嵌套使用的模式下,子卡片分隔 */ split?: 'horizontal' | 'vertical'; /** 卡片嵌套使用的模式下,卡片占父卡片内容区域的栅格数量 */ col?: number | string; /** 卡片是否可折叠 */ collapsible?: boolean; /** 默认是否折叠,用于非受控模式 */ defaultCollapsed?: boolean; /** 是否折叠,受控模式 */ collapsed?: boolean; /** 折叠状态改变的回调函数 */ onCollapse?: (collapsed: boolean) => void; /** 卡片 class */ className?: string; /** 卡片样式 */ style?: React.CSSProperties; /** 卡片内容 class */ contentClassName?: string; /** 卡片内容样式 */ contentStyle?: React.CSSProperties; /** 上下文 */ context?: any; } export declare const ProCard: { (props: ProCardProps): JSX.Element; defaultProps: { bordered: boolean; spacing: number; direction: string; }; Divider: { (props: React.HTMLAttributes): JSX.Element; isProCardDivider: boolean; }; Selectable: { (props: import("./selectable").ProCardSelectableProps): JSX.Element; defaultProps: { hoveredShadow: boolean; }; isProCard: boolean; }; Tab: { (props: import("@alifd/next/types/tab").TabProps): JSX.Element; Item: typeof import("@alifd/next/types/tab").Item; }; isProCard: boolean; }; export default ProCard; /** * @deprecated 建议使用 ProCardProps 代替 */ export declare type CardProps = ProCardProps;