Purity UI Components

基于 Chakra UI 的 React 通用组件库

安装

npm install @your-org/purity-ui-components

或者使用 yarn：

yarn add @your-org/purity-ui-components

使用方法

import { Card, CardBody, CardHeader, IconBox } from '@your-org/purity-ui-components';

function App() {
  return (
    <Card>
      <CardHeader>
        <IconBox>
          {/* 您的图标 */}
        </IconBox>
        <h1>仪表盘</h1>
      </CardHeader>
      <CardBody>
        <p>这是卡片内容</p>
      </CardBody>
    </Card>
  );
}

依赖要求

该组件库需要以下 peer dependencies：

• react >= 16.8.0
• react-dom >= 16.8.0
• @chakra-ui/react >= 1.8.0
• @emotion/react >= 11.0.0
• @emotion/styled >= 11.0.0
• framer-motion >= 4.0.0

请确保您的项目已经安装了这些依赖。

可用组件

Card 组件

• Card - 基础卡片组件，带有自定义样式
• CardBody - 卡片内容区域
• CardHeader - 卡片头部

Layout 组件

• MainPanel - 主面板容器
• PanelContainer - 面板容器
• PanelContent - 面板内容

Icons 组件

• IconBox - 图标容器组件，提供统一的图标包装样式

示例用法

基础卡片

import { Card, CardHeader, CardBody } from '@your-org/purity-ui-components';

<Card>
  <CardHeader>标题</CardHeader>
  <CardBody>内容</CardBody>
</Card>

带图标的布局

import { MainPanel, PanelContent, IconBox } from '@your-org/purity-ui-components';

<MainPanel>
  <PanelContent>
    <IconBox>
      {/* 您的图标组件 */}
    </IconBox>
    <p>面板内容</p>
  </PanelContent>
</MainPanel>

许可证

MIT