halospay-ui

Haloespay UI 组件库 - 基于 React 的现代化 UI 组件库

安装

# 使用 pnpm (推荐)
pnpm add halospay-ui

# 使用 npm
npm install halospay-ui

# 使用 yarn
yarn add halospay-ui

快速开始

基础使用

import React from 'react';
import { Card } from 'halospay-ui';

function App() {
  return (
    <Card
      cardNumber="1234 5678 9012 3456"
      cardHolder="John Doe"
      expirationDate="12/25"
      cvv="123"
    />
  );
}

export default App;

自定义背景图片

<Card
  src="https://example.com/card-bg.jpg"
  cardNumber="1234 5678 9012 3456"
  cardHolder="John Doe"
  expirationDate="12/25"
  cvv="123"
/>

自定义尺寸和圆角

<Card
  size={1.5}
  blockRadius={16}
  cardNumber="1234 5678 9012 3456"
  cardHolder="John Doe"
  expirationDate="12/25"
  cvv="123"
/>

添加图标

import { CreditCardOutlined } from '@ant-design/icons';

<Card
  cardNumberIcon={<CreditCardOutlined />}
  cardNumber="1234 5678 9012 3456"
  cardHolder="John Doe"
  expirationDate="12/25"
  cvv="123"
/>

自定义标签文本

<Card
  cardNumber="1234 5678 9012 3456"
  cardHolder="John Doe"
  expirationDate="12/25"
  cvv="123"
  cardHolderLabel="持卡人姓名"
  expirationDateLabel="有效期"
  cvvLabel="安全码"
/>

监听点击事件

const handleCardClick = (type: 'cardNumber' | 'cardHolder' | 'expirationDate' | 'cvv') => {
  console.log('点击了:', type);
  // 处理点击逻辑，例如复制到剪贴板
};

<Card
  cardNumber="1234 5678 9012 3456"
  cardHolder="John Doe"
  expirationDate="12/25"
  cvv="123"
  onCardClick={handleCardClick}
/>

自定义样式

<Card
  cardNumber="1234 5678 9012 3456"
  cardHolder="John Doe"
  expirationDate="12/25"
  cvv="123"
  cohort={{
    className: 'my-card-wrapper',
    cardNumberClass: 'my-card-number',
    cardHolderClass: 'my-card-holder',
    cardHolderLabelClass: 'my-card-holder-label',
    expirationDateClass: 'my-expiration-date',
    expirationDateLabelClass: 'my-expiration-label',
    cvvClass: 'my-cvv',
    cvvLabelClass: 'my-cvv-label'
  }}
/>

Card API

| 属性名 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | src | 卡片背景图片 | string | - | | children | 卡片内容 | React.ReactNode \| string | - | | cardNumber | 卡片号 | React.ReactNode \| string | - | | cardHolder | 卡片持有者 | React.ReactNode \| string | - | | expirationDate | 卡片有效期 | React.ReactNode \| string | - | | cvv | 卡片CVV | React.ReactNode \| string | - | | cardNumberIcon | 卡片号图标 | React.ReactNode | - | | cardHolderLabel | 卡片持有者标题 | React.ReactNode \| string | "Card Holder Name" | | expirationDateLabel | 卡片有效期标题 | React.ReactNode \| string | "EXP" | | cvvLabel | 卡片CVV标题 | React.ReactNode \| string | "CVV" | | size | 卡片大小（缩放比例） | number | 1 | | blockRadius | 卡片圆角 | number | 12 | | cohort | 卡片样式配置 | Cohort | - | | onCardClick | 卡片点击事件 | (type: 'cardNumber' \| 'cardHolder' \| 'expirationDate' \| 'cvv') => void | - |

Cohort 类型

| 属性名 | 说明 | 类型 | | --- | --- | --- | | className | 外部容器类名 | string | | cardNumberClass | 卡片号类名 | string | | cardHolderClass | 卡片持有者类名 | string | | cardHolderLabelClass | 卡片持有者标题类名 | string | | expirationDateClass | 卡片有效期类名 | string | | expirationDateLabelClass | 卡片有效期标题类名 | string | | cvvClass | 卡片CVV类名 | string | | cvvLabelClass | 卡片CVV标题类名 | string |

组件列表

• Card - 银行卡/信用卡组件
• CountUp - 数字动画组件

开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

License

MIT