json-antd-ui

json-antd-ui 是一个基于 React 和 Ant Design 的组件库，旨在提供灵活、易用的 JSON 数据展示和编辑界面。它适用于需要动态显示和编辑 JSON 数据的应用场景。

安装

使用 npm 安装 json-antd-ui:

npm install json-antd-ui

或者使用 yarn:

yarn add json-antd-ui

使用示例

下面是一个简单的使用示例，展示了如何在项目中引入并使用 DisplayJSON 组件：

import React from 'react';
import { DisplayJSON } from 'json-antd-ui';

const App = () => {
  const data = {
    name: "John Doe",
    age: 30
  };

  return <DisplayJSON data={data} />;
};

export default App;

API 文档

DisplayJSON 组件

DisplayJSON 组件用于展示和编辑 JSON 数据。

Props

KeyDescription 对象

KeyDescription 对象在 DisplayJSON 组件中用于定义 JSON 数据中各个字段的描述和显示属性。它允许您指定如何展示和处理数据中的每个字段。

结构

KeyDescription 是一个对象，包含以下属性：

KeyDescType 和 PrimitiveType

KeyDescription 中的 type 属性可以是以下几种类型：

• KeyDescType 枚举，包括：
  • Time: 时间类型。
  • Date: 日期类型。
  • Link: 链接类型。
  • Image: 图片类型。
  • PDF: PDF 文件类型。
• PrimitiveType 枚举，包括基本数据类型如：
  • String: 字符串。
  • Number: 数字。
  • Boolean: 布尔值。
  • Object: 对象。
  • Array: 数组。

props 属性

props 属性是一个对象，根据字段的 type 不同，其包含的属性也会有所不同。例如：

• 对于 KeyDescType.Link 类型，props 可以包含 copyable 属性来控制链接是否可复制。
• 对于 KeyDescType.Image 类型，props 可以包含 width 和 height 属性来控制图片的尺寸。

通过 KeyDescription 对象，您可以精确控制 DisplayJSON 组件中每个字段的展示方式和行为，从而提供更加丰富和定制化的用户界面。

贡献

欢迎为 json-antd-ui 贡献代码。请先阅读贡献指南，了解如何提交 pull requests。

许可证

json-antd-ui 根据 MIT 许可证发布。

联系方式

如有任何问题或建议，请通过 GitHub Issues 联系我们。