ka-design

一个简单易用的 React 组件库，帮助您快速构建现代化的 Web 应用。

安装

使用 npm 安装：

npm install ka-design

或者使用 yarn：

yarn add ka-design

使用方法

在您的 React 项目中导入并使用组件：

import React from 'react'
import {
  Button,
  Input,
  Icon,
  Menu,
  Progress,
  Transition,
  Upload,
} from 'ka-design'

const App = () => {
  return (
    <div>
      <Button type="primary" onClick={() => alert('按钮点击')}>
        点击我
      </Button>
      <Input
        placeholder="请输入内容"
        onChange={(e) => console.log(e.target.value)}
      />
      <Icon icon="check-circle" theme="success" />
      <Menu defaultIndex="0" onSelect={(index) => console.log(index)}>
        <Menu.Item>菜单项 1</Menu.Item>
        <Menu.Item>菜单项 2</Menu.Item>
      </Menu>
      <Progress percent={50} />
      <Transition animation="zoom-in-top">
        <div>动画内容</div>
      </Transition>
      <Upload
        action="https://example.com/upload"
        onSuccess={(data) => console.log(data)}>
        <Button type="primary">上传文件</Button>
      </Upload>
    </div>
  )
}

export default App

可用组件

Button

Button 是一个按钮组件，支持多种类型和样式。

属性

| 属性 | 类型 | 默认值 | 描述 | | ---------- | --------------------- | --------- | -------------------- | | type | String | 'default' | 按钮的类型 | | size | String | 'small' | 按钮的尺寸 | |disabled|boolean |false | 是否禁用按钮 | |onClick |(event: MouseEvent)` | - | 点击按钮时的回调函数 |

使用示例

<Button type="primary" onClick={() => alert('按钮点击')}>
  主按钮
</Button>
<Button type="danger" size="small" disabled>
  禁用按钮
</Button>

Input

Input 是一个输入框组件，支持多种输入类型和事件。

属性

| 属性 | 类型 | 默认值 | 描述 | | ------------- | ---------------------- | ------- | ------------------------ | | placeholder | string | - | 输入框的占位符 | | value | string | - | 输入框的值 | | disabled | boolean | false | 是否禁用输入框 | | onChange | (event: ChangeEvent) | - | 输入内容变化时的回调函数 |

使用示例

<Input placeholder="请输入内容" onChange={(e) => console.log(e.target.value)} />
<Input value="默认值" disabled />

Icon

Icon 是一个图标组件，基于 FontAwesome 实现，支持多种主题样式。

属性

| 属性 | 类型 | 默认值 | 描述 | | ----------- | -------- | ------ | ------------ | | icon | string | - | 图标名称 | | theme | string | - | 图标主题样式 | | className | string | - | 自定义类名 |

使用示例

<Icon icon="check-circle" theme="success" />
<Icon icon="times-circle" theme="danger" />

Menu

Menu 是一个菜单组件，支持横向和纵向模式。

属性

| 属性 | 类型 | 默认值 | 描述 | | --------------------- | ----------------- | ------------ | ------------------------------ | | defaultIndex | string | '0' | 默认选中的菜单项索引 | | mode | string | 'vertical' | 菜单模式 | | onSelect | (index: string) | - | 菜单项点击时的回调函数 | | defaultOpenSubMenus | string[] | [] | 默认展开的子菜单（仅纵向模式） |

使用示例

<Menu defaultIndex="0" mode="vertical" onSelect={(index) => console.log(index)}>
  <Menu.Item>菜单项 1</Menu.Item>
  <Menu.Item disabled>菜单项 2</Menu.Item>
</Menu>

Progress

Progress 是一个进度条组件，支持自定义样式和主题。

属性

| 属性 | 类型 | 默认值 | 描述 | | -------------- | --------- | --------- | ------------------ | | percent | number | - | 进度百分比 | | strokeHeight | number | 15 | 进度条高度 | | showText | boolean | true | 是否显示百分比文本 | | theme | stirng | primary | 主题样式 |

使用示例

<Progress percent={70} theme="success" />
<Progress percent={40} strokeHeight={20} showText={false} />

Transition

Transition 是一个动画组件，基于 react-transition-group 实现。

属性

| 属性 | 类型 | 默认值 | 描述 | | ----------- | --------- | -------------- | ---------------- | | animation | string | zoom-in-left | 动画名称 | | wrapper | boolean | false | 是否使用包裹元素 |

使用示例

<Transition animation="zoom-in-top">
  <div>动画内容</div>
</Transition>

Upload

Upload 是一个文件上传组件，支持拖拽上传和多种回调事件。

属性

| 属性 | 类型 | 默认值 | 描述 | | -------------- | ------------------------- | ------- | -------------------- | | action | string | - | 上传文件的接口地址 | | defaultList | UploadFile[] | [] | 默认已上传的文件列表 | | beforeUpload | (file: File) => boolean | - | 上传前的校验函数 | | onProgress | (percent, file) => void | - | 上传进度回调 | | onSuccess | (data, file) => void | - | 上传成功回调 | | onError | (error, file) => void | - | 上传失败回调 | | onRemove | (file) => void | - | 删除文件回调 | | drag | boolean | false | 是否支持拖拽上传 |

使用示例

<Upload action="https://example.com/upload" onSuccess={(data) => console.log(data)}>
  <Button type="primary">上传文件</Button>
</Upload>
<Upload action="https://example.com/upload" drag>
  <div>拖拽文件到此处上传</div>
</Upload>

更多组件正在开发中...

许可证

此项目基于 MIT 许可证。