rc-kpc-skeleton-card

为 KPC Card 增加骨架屏配置选项

安装

npm

1npm install rc-kpc-skeleton-card

Yarn

1yarn add rc-kpc-skeleton-card

使用

1import SkeletonCard from 'rc-kpc-skeleton-card';
2
3<SkeletonCard loading={loading}>
4  <span>Hello World</span>
5</SkeletonCard>;

可以直接使用SkeletonCard替换已有的Card组件，已有参数不变

特点

基于 KPC-Card 的组件库拥有以下特点，来让研发更快速高效的为页面增加骨架屏效果。

1. 将判断逻辑从业务代码中解耦

常见的带有加载动画的代码如下：

1<Card title="数据列表">
2  <Row gutter="16">
3    {!loading ? (
4      <ul>
5        {dataList.map((item) => (
6          <li>item</li>
7        ))}
8      </ul>
9    ) : (
10      <Loading />
11    )}
12  </Row>
13</Card>

这样，会让我们的代码结构比较混乱，您可能会尝试，将 list 再单独提取为一个组件，但是仍然会有多余的结构。而使用SkeletonCard则可以让代码更加聚焦业务本身。

1<SkeletonCard title="数据列表" loading={loading} loadingElement={<Loading />}>
2  <Row gutter="16">
3    <ul>
4      {dataList.map((item) => (
5        <li>item</li>
6      ))}
7    </ul>
8  </Row>
9</SkeletonCard>

甚至，借助SkeletonCard的预设，可以省去开发<Loading />组件的过程。

1<SkeletonCard title="数据列表" loading={loading}>
2  <Row gutter="16">
3    <ul>
4      {dataList.map((item) => (
5        <li>item</li>
6      ))}
7    </ul>
8  </Row>
9</SkeletonCard>

2. 方便的预设 Skeleton 样式

针对不同的 Card，我们可能不只满足于简单的矩形排列，因此SkeletonCard提供了以下几种预设：

• charts 图
• profile 用户信息
• code 代码块
• table 表格
• list 列表

1<SkeletonCard
2  title="资讯信息"
3  loading={loading}
4  loadingPreset="list"
5></SkeletonCard>

同时，可以使用以上预设，来组合生成其他Skeleton效果，以下为一个带有多个按钮的组合 Skeleton 代码。

1import {
2  ProfileSkeleton,
3  SquareSkeleton,
4  defaultSkeletonStyleConfig,
5} from 'rc-kpc-skeleton-card';
6
7const Loading: React.FC<LoadingProps> = () => {
8  return (
9    <div>
10      <ProfileSkeleton {...defaultSkeletonStyleConfig} />
11      <Row gutter={16}>
12        {Array(4)
13          .fill(0)
14          .map((_, index) => (
15            <Col key={index} md={6} xs={12}>
16              <SquareSkeleton />
17            </Col>
18          ))}
19      </Row>
20    </div>
21  );
22};

API

KPC-Card 可用 API 配置请参阅 Card 介绍文档

新增 API 内容

参数	说明	类型	默认值	是否必填
loading	是否展示骨架屏	boolean	false	否
loadingSize	默认骨架屏的尺寸，对预设无效	'large' | 'default' | 'small' | 'mini'	200	否
loadingColumn	骨架屏行列数，用来控制展示多少列、行元素	{ row: number;col: number;}	{row: 3,col: 2}	否
loadingElement	自定义加载效果，用以覆盖 loading 时展示的内容	ReactNode	{row: 3,col: 2}	否
loadingPreset	使用预设配置骨架屏	'charts' | 'profile' | 'code' | 'table' | 'list' | 'bullet-list'	无	否