rc-kpc-skeleton-card

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

安装

npm

npm install rc-kpc-skeleton-card

Yarn

yarn add rc-kpc-skeleton-card

使用

import SkeletonCard from 'rc-kpc-skeleton-card';

<SkeletonCard loading={loading}>
  <span>Hello World</span>
</SkeletonCard>;

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

特点

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

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

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

<Card title="数据列表">
  <Row gutter="16">
    {!loading ? (
      <ul>
        {dataList.map((item) => (
          <li>item</li>
        ))}
      </ul>
    ) : (
      <Loading />
    )}
  </Row>
</Card>

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

<SkeletonCard title="数据列表" loading={loading} loadingElement={<Loading />}>
  <Row gutter="16">
    <ul>
      {dataList.map((item) => (
        <li>item</li>
      ))}
    </ul>
  </Row>
</SkeletonCard>

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

<SkeletonCard title="数据列表" loading={loading}>
  <Row gutter="16">
    <ul>
      {dataList.map((item) => (
        <li>item</li>
      ))}
    </ul>
  </Row>
</SkeletonCard>

2. 方便的预设 Skeleton 样式

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

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

<SkeletonCard
  title="资讯信息"
  loading={loading}
  loadingPreset="list"
></SkeletonCard>

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

import {
  ProfileSkeleton,
  SquareSkeleton,
  defaultSkeletonStyleConfig,
} from 'rc-kpc-skeleton-card';

const Loading: React.FC<LoadingProps> = () => {
  return (
    <div>
      <ProfileSkeleton {...defaultSkeletonStyleConfig} />
      <Row gutter={16}>
        {Array(4)
          .fill(0)
          .map((_, index) => (
            <Col key={index} md={6} xs={12}>
              <SquareSkeleton />
            </Col>
          ))}
      </Row>
    </div>
  );
};

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' | 无 | 否 |