React Knowledge Card

一个美观且可定制的React知识卡片组件���支持TypeScript。

特性

安装

npm install @oscloudlab/knowledge-card

# 或
yarn add @oscloudlab/knowledge-card

使用方法

import React from 'react'
import { KnowledgeCard } from 'react-knowledge-card'

function App() {
  return (
    <KnowledgeCard
      title="React Hooks 入门"
      content="React Hooks 是 React 16.8 引入的新特性..."
      tags={['React', 'Hooks', '前端']}
      type="primary"
      author="张三"
      createTime="2024-01-15"
      readTime="5分钟"
      clickable
      onClick={() => console.log('卡片被点击')}
    />
  )
}

API

KnowledgeCardProps

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | - | 卡片标题 | | content | string | - | 卡片内容 | | tags | string[] | [] | 标签列表 | | type | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'default' | 卡片类型 | | shadow | boolean | true | 是否显示阴影 | | clickable | boolean | false | 是否可点击 | | onClick | () => void | - | 点击事件 | | className | string | - | 自定义类名 | | style | React.CSSProperties | - | 自定义样式 | | icon | React.ReactNode | - | 图标 | | author | string | - | 作者信息 | | createTime | string | - | 创建时间 | | readTime | string | - | 阅读时长 |

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 发布到npm
npm run publish:npm

许可证

MIT