@ixinwu-ngp/materials-component v1.1.12

NGP 组件库

• NGP 组件库
  • 风格
  • 开发说明
  • API
    • CssBaseline
    • Error
    • Loading
    • DateFormat
    • NumberFormat
    • TextFormat
    • TypeFormat
    • NumberRangePicker
    • FieldDisplay
    • FieldForm
    • FieldGrid
    • ListSearch
    • ListTable

风格

当前基础组件库使用的是ant.design 组件库，风格基于 ant.design 的设计语言封装实现

开发说明

样式方案参考@ixinwu-ngp/web-styles

antd 的组件使用按照以下方式，手动引用组件和对应样式

import Form from 'antd/lib/form';
import 'antd/lib/form/style';
import Icon from 'antd/lib/icon';
import 'antd/lib/icon/style';
import Input from 'antd/lib/input';
import 'antd/lib/input/style';
import Button from 'antd/lib/button';
import 'antd/lib/button/style';
import Checkbox from 'antd/lib/checkbox';
import 'antd/lib/checkbox/style';
import Row from 'antd/lib/row';
import 'antd/lib/row/style';
import Col from 'antd/lib/col';
import 'antd/lib/col/style';

API

CssBaseline

屏蔽浏览器的样式差异，修改 css 盒模型为 border-box

import CssBaseLine from '@ixinwu-ngp/materials-component/css_base_line';

Error

import Error from '@ixinwu-ngp/materials-component/error';

Props

Loading

import Loading from '@ixinwu-ngp/materials-component/loading';

Props

DateFormat

日期时间格式化组件，使用 moment 对日期/日期字符串进行转换和格式化

import DateFormat from '@ixinwu-ngp/materials-component/date_format';

Props

NumberFormat

数字格式化组件，使用 numeral 对数字进行转换和格式化

import NumberFormat from '@ixinwu-ngp/materials-component/number_format';

Props

TextFormat

文本格式化，处理空文本显示

import TextFormat from '@ixinwu-ngp/materials-component/text_format';

Props

TypeFormat

类别格式化，通过 key 显示对应的文本名称

import DateFormat from '@ixinwu-ngp/materials-component/date_format';

Props

NumberRangePicker

数值区间选择

import NumberRangePicker from '@ixinwu-ngp/materials-component/number_range_format';

Props

FieldDisplay

根据字段配置（fields）解析对应数据（data）生成展示，可以用于业务对象详细属性的展示等

import FieldDisplay from '@ixinwu-ngp/materials-component/field_display';

Props

fields 每项配置说明

FieldForm

根据字段配置（fields）解析对应数据（data）生成编辑表单，可用于实现业务对象创建和编辑功能

import FieldForm from '@ixinwu-ngp/materials-component/field_form';

Props

fields 每项配置说明

fieldRelations 配置

[
  {
    // 主字段Key
    masterFieldKey: 'aaa__type',
    // 从字段Key的范围（被控制的字段Key数组）
    slaveRangeFieldKeys: [
      'aaa__type1Field1',
      'aaa__type1Field2',
      'aaa__type2Field1',
      'aaa__type2Field2',
      // ...
    ],
    // 具体的关联配置
    relationConfig: [
      {
        // 当字段的数据值为type_1时，显示slaveFieldKeys对应的字段，其他被控制的字段Key数组中对应的字段不显示
        masterTypeKey: 'type_1',
        slaveFieldKeys: [
          'aaa__type1Field1',
          'aaa__type1Field2',
          //...
        ],
      },
      // ...
    ],
  },
  // ...
];

groupCascades 配置

[
  {
    // 主类型key
    masterGroupKey: 'typeGroup',
    // 从类型Key
    slaveGroupKey: 'stageGroup',
    // 具体的级联配置
    cascadeConfig: [
      {
        // 当关联主类型的字段值为type_1时，关联从类型的字段的类型可选key集合为['stage_1', 'stage_2', 'stage_3']
        masterTypeKey: 'type_1',
        slaveTypeKeys: ['stage_1', 'stage_2', 'stage_3'],
      },
      // ...
    ],
  },
  // ...
];

FieldGrid

FieldDisplay和FieldForm默认布局组件，组件会根据容器 DOM 的实际宽度计算每项（field）的单位宽度

import FieldGrid from '@ixinwu-ngp/materials-component/field_grid';

Props

fields 每项配置说明

ListSearch

根据字段配置（fields）生成搜索表单，可用于实现业务列表的查询功能

import FieldForm from '@ixinwu-ngp/materials-component/field_form';

Props

fields 每项配置说明

ListTable

根据字段配置（fields）生成数据表格，可用于实现业务列表的数据列表展示

import ListTable from '@ixinwu-ngp/materials-component/list_table';

Props

其他属性与 antd 的 Table 组件相同

fields 每项配置说明