@beisen-phoenix/result-page NPM

结果页组件

导出组件

ImgResult - 用来渲染图片提示的结果页组件
IconResult - 用来渲染图标提示的结果页组件

有什么不同

图标结果页内置四个图标，尺寸有大小两种。自定义图标也受限于内置尺寸

图片结果页内置五张图片，400，403, 404, 500, 及一张默认图片，默认图片大尺寸显示 150 150, 小尺寸显示 100 100. 其他内置图片显示 250*250，并且不受大小尺寸的的影响。自定义图片显示原始大小，不受尺寸限制。

接口

图片和图标共用接口

//尺寸的类型定义
export type TResultPageSize = 'sm' | 'lg';

// 按钮配置的类型定义
export interface IButtonItem {
  type?: 'secondary' | 'primary';
  text?: string;
  onClick?: (evt: any) => void;
}

//公用接口
interface IBaseProps {
  size?: TResultPageSize; // 尺寸, 可选值 'lg' | 'sm', 默认lg
  src?: string; // 图片（图标地址）, 默认为空
  title?: string; // 标题, 默认为空
  content?: React.ReactNode; // 文字描述， 默认为空，可以传字符串，也可以传react elements，用来自定义渲染
  btns?: IButtonItem[]; // 按钮配置，
}

图片的专用接口

// 图片内置的可用值
type TImgResultPagePreset = '404' | '403' | '400' | '500';

// 通过preset参数接受
interface IImgResultPageProps extends IBaseProps {
  preset?: TImgResultPagePreset;
}

图标的专用接口

// 图标内置的可用值
type TIconResultPagePreset = 'fail' | 'success' | 'warn' | 'inform';
// 通过preset接受参数
export interface IIconResultPageProps extends IBaseProps {
  preset: TIconResultPagePreset;
}

@beisen-phoenix/button @beisen-phoenix/common-utils @beisen-phoenix/icon @beisen-phoenix/style-token

@infinitebrahmanuniverse/nolb-_beisen-@everything-registry/sub-chunk-118 @beisen-phoenix/img-result-page-pgb

4 years ago

4 years ago

4 years ago

5 years ago

4 years ago