Skip to content

quansitech/antd-admin-front

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Qs-antd-admin

该项目作为qs-cmf的后台前端组件库,基于ant-design-pro

安装

npm install @quansitech/antd-admin

使用参考

valueType列表

参考 ant-design-pro#valueType

自定义组件

对外暴露 container 供外部调用

import container from "@quansitech/antd-admin/lib/container";

container.register('[组件名]', () => import('[组件路径]'));

通用

通用Column Schema

  • 组件名前缀:Column.
  • 用途:表单项组件(非只读模式)、表格列编辑组件、表格搜索项组件
  • 示例:
// [组件.tsx]
import {ColumnProps} from "@quansitech/antd-admin/compontents/Column/types";

export default function (props: ColumnProps) {

    return <>
        组件内容
    </>
}

// [app.tsx]
import container from "@quansitech/antd-admin/lib/container";

container.register('Column.组件名', () => import('[组件路径]'));
  • 若要补充组件库,请把组件放compontents/Column/ 目录下

只读Column Schema

  • 组件名前缀:Column.Readonly.
  • 用途:表单项组件(只读模式)、表格列组件
  • 示例:
// [组件.tsx]
import {ColumnProps} from "@quansitech/antd-admin/compontents/Column/Readonly/types";

export default function (props: ColumnProps) {

    return <>
        组件内容
    </>
}

// [app.tsx]
import container from "@quansitech/antd-admin/lib/container";

container.register('Column.Readonly.组件名', () => import('[组件路径]'));
  • 若要补充组件库,请把组件放compontents/Column/Readonly/ 目录下

表格Table

工具栏操作组件

  • 组件名前缀:Table.Column.Action.
  • 示例:
// [组件.tsx]

import {TableActionProps} from "@quansitech/antd-admin/compontents/Table/Action/types";

export default function (props: TableActionProps) {
    return <Button>{props.title}</Button>
}

// [app.tsx]

import container from "@quansitech/antd-admin/lib/container";

container.register('Table.Column.Action.组件名', () => import('[组件路径]'));
  • 若要补充组件库,请把组件放compontents/Table/Action/ 目录下

行操作组件

  • 组件名前缀:Table.Column.Option
  • 示例:
// [组件.tsx]

import {TableColumnOptionProps} from "@quansitech/antd-admin/compontents/Column/Readonly/Action/types";

export default function (props: TableColumnOptionProps) {
    <a onClick={onClick}>{props.title}</a>
}

// [app.tsx]

import container from "@quansitech/antd-admin/lib/container";

container.register('Column.Readonly.Action.组件名', () => import('[组件路径]'));
  • 若要补充组件库,请把组件放compontents/Column/Readonly/Action/ 目录下

更新日志

1.1.0

  • 增加composer包注册组件机制

About

qscmf Ant-design后台前端组件库

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published