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