@ ant- design/ x- card
动态内容加载和管理的回放卡加载器.
特征
- 🚀 动态加载: 以可配置货币同步装入牌
- 🔄 重试机制: 自动重试, 以指数回放
- ⚡ 业绩: 在虚拟滚动支持下优化大型数据集
- 🎨 可自定义: 完全自定义的卡渲染和装入状态
- 📱 响应: 方便移动的响应性设计
- 🔧 类型脚本: 完整类型脚本支持
安装
npm install @ant-design/x-card
# or
yarn add @ant-design/x-card
# or
pnpm add @ant-design/x-card
使用量
基本用途
import React from 'react';
import { CardLoader } from '@ant-design/x-card';
const App = () => {
const cards = [
{
id: '1',
title: 'Card 1',
content: 'This is card content',
},
{
id: '2',
title: 'Card 2',
content: 'Another card content',
},
];
return <CardLoader cards={cards} />;
};
高级使用
import React from 'react';
import { CardLoader, useCardLoader } from '@ant-design/x-card';
const App = () => {
const { state, actions } = useCardLoader({
config: {
maxConcurrent: 5,
retryCount: 3,
timeout: 10000,
},
customLoader: async (card) => {
// Custom loading logic
const response = await fetch(`/api/cards/${card.id}`);
const data = await response.json();
return data.content;
},
});
React.useEffect(() => {
actions.loadCards([
{ id: '1', title: 'Dynamic Card 1' },
{ id: '2', title: 'Dynamic Card 2' },
]);
}, []);
return (
<CardLoader
cards={state.cards}
renderLoading={(card) => <div>Loading {card.title}...</div>}
renderError={(error, card) => <div>Error: {error.message}</div>}
/>
);
};
使用钩子
import React from 'react';
import { useCardLoader } from '@ant-design/x-card';
const App = () => {
const { state, actions } = useCardLoader();
const addNewCard = () => {
actions.addCard({
id: Date.now().toString(),
title: 'New Card',
content: 'Dynamic content',
});
};
return (
<div>
<button onClick={addNewCard}>Add Card</button>
{state.cards.map((card) => (
<div key={card.id}>
<h3>{card.title}</h3>
<p>{card.content}</p>
</div>
))}
</div>
);
};
API 密码
卡片记录器道具
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 纸牌 | CardLoader 连接 [] | [ | 卡片配置阵列 |
| 配置 | 挂卡连接 | - 说吧 | 装入器配置 |
| 自定义读取器 | 函数 | - 说吧 | 自定义卡加载功能 |
| 质地 | 函数 | - 说吧 | 自定义空状态渲染器 |
| 编译 | 函数 | - 说吧 | 自定义装入状态渲染器 |
| 渲染错误 | 函数 | - 说吧 | 自定义错误状态渲染器 |
| 挂起变化 | 函数 | - 说吧 | 正在装入状态更改召回 |
| 卡尔路德 | 函数 | - 说吧 | 卡片装入成功回调 |
| 证书错误 | 函数 | - 说吧 | 卡片加载出错 回调 |
| allCards 已登录 | 函数 | - 说吧 | 所有卡片已装入调用 |
挂卡连接
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 编号 | 字符串 | - 说吧 | 特殊卡标识符 |
| 标题 | 字符串 | - 说吧 | 卡片标题 |
| 内容 | 反应节点 | - 说吧 | 卡片内容 |
| 类型 | “ 默认” qq“ info” ,“ 成功” ,“ 警告” ,“ 错误” | '默认' | 纸牌类型 |
| 装入 | 布尔 | 虚假 | 装入状态 |
| 可分解 | 布尔 | 虚假 | 是否关闭卡片 |
| 大小 | '小'''''中'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' | 中间 | 纸牌大小 |
| 已禁用 | 布尔 | 虚假 | 是否禁用卡片 |
| 类Name | 字符串 | - 说吧 | 自定义 CSS 类 |
| 样式 | CSS 财产 | - 说吧 | 自定义内行样式 |
| 额外 | 反应节点 | - 说吧 | 卡片头中的额外内容 |
使用 CardLoader 钩
以 :
state: 当前加载器状态actions页:1addCard(card): 添加新牌removeCard(id): 删除一张牌updateCard(id, updates): 更新名片reloadCard(id): 重新装入卡片clearCards(): 清除所有牌getCardState(id): 获取卡片状态loadCards(cards): 装入多张牌
发展
# Install dependencies
npm install
# Start development
npm run start
# Run tests
npm test
# Build
npm run compile
许可证
麻省理工学院