sanli-component

低代码设计器组件库 - Schema 驱动的 React 组件

安装

npm install sanli-component
# 或
yarn add sanli-component
# 或
pnpm add sanli-component

依赖

需要同时安装以下 peer dependencies：

npm install react react-dom antd @ant-design/pro-components

使用

基础使用

import { SchemaRenderer, componentRegistry } from 'sanli-component';

// 定义页面 Schema
const schema = {
  type: 'page',
  body: [
    {
      type: 'button',
      children: '点击我',
      type: 'primary'
    }
  ]
};

// 渲染
function App() {
  return <SchemaRenderer schema={schema} />;
}

获取组件元数据

import { componentRegistry } from 'sanli-component';

// 获取所有组件元数据
const allMetas = componentRegistry.getAllMetas();

// 按分类获取
const formComponents = componentRegistry.getMetasByCategory('form');
const dataComponents = componentRegistry.getMetasByCategory('data');

直接使用组件

import { Button, Form, Table } from 'sanli-component';

function MyPage() {
  return (
    <div>
      <Button type="primary">按钮</Button>
      <Table 
        columns={[{ title: '姓名', dataIndex: 'name' }]}
        dataSource={[{ id: 1, name: '张三' }]}
      />
    </div>
  );
}

组件列表

基础组件 (Basic)

• Button 按钮
• Text 文本
• Icon 图标
• Image 图片
• Link 链接
• Divider 分割线
• Tpl 模板
• Html HTML渲染

布局组件 (Layout)

• Page 页面容器
• Container 容器
• Flex 弹性布局
• Grid 栅格布局
• Card 卡片
• Tabs 标签页
• Collapse 折叠面板
• Wrapper 包裹器

表单组件 (Form)

• Form 高级表单 (ProForm)
• FormItem 表单项
• InputText 文本输入
• Textarea 多行输入
• InputNumber 数字输入
• Select 下拉选择
• Checkbox 复选框
• Radio 单选框
• Switch 开关
• DatePicker 日期选择
• Upload 文件上传
• TreeSelect 树选择
• Cascader 级联选择

数据展示 (Data)

• Table 高级表格 (ProTable)
• List 高级列表 (ProList)
• Descriptions 高级描述列表 (ProDescriptions)
• Statistic 统计数值
• Tag 标签
• Badge 徽标
• Progress 进度条
• Timeline 时间轴
• Steps 步骤条
• Avatar 头像

反馈组件 (Feedback)

• Alert 警告提示
• Spinner 加载中
• Empty 空状态
• Result 结果页
• Tooltip 文字提示
• Popover 气泡卡片

版本更新

升级到最新版本获取新组件：

npm update sanli-component

License

MIT