@ixinwu-ngp/materials-component

v1.1.12

Published

3 years ago

Downloads

0High
0Medium
0Low

zhuoluo

react css-in-js jss

NGP 组件库

NGP 组件库

风格

当前基础组件库使用的是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

| Name | Type | Default | Description | | :------ | :----- | :------ | :------------------------------------------------- | | value | string | | 类别 key | | types | [] | [] | 类别定义，每项格式为:{key: 'key1', text: '文本 1'} | | inValid | string | '--' | 无效时展示内容 |

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

| Name | Type | Default | Description | | :----------- | :--------------------- | :------ | :------------------------------------------------------- | | fields | [] | [] | fields 配置 | | data | {} | {} | 业务对象数据，属性 key 需要与 fields 配置每项的 key 对应 | | onFieldClick | function(field, value) | | 可点击字段的回调，value 是 data[field.key] |

fields 每项配置说明

FieldForm

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

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

Props

| Name | Type | Default | Description | | :------------- | :--- | :------ | :------------------------------------------------------- | | fields | [] | [] | fields 配置 | | data | {} | {} | 业务对象数据，属性 key 需要与 fields 配置每项的 key 对应 | | fieldRelations | [] | [] | 字段关联配置 | | groupCascades | [] | [] | 类别级联配置 |

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

| Name | Type | Default | Description | | :----- | :--- | :------ | :---------- | | fields | [] | [] | fields 配置 |

fields 每项配置说明

ListSearch

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

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

Props

| Name | Type | Default | Description | | :----- | :--- | :------ | :------------------------------------------------------- | | fields | [] | [] | fields 配置 | | data | {} | {} | 业务对象数据，属性 key 需要与 fields 配置每项的 key 对应 |

fields 每项配置说明

ListTable

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

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

Props

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

fields 每项配置说明

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

NGP 组件库

风格

开发说明

API

CssBaseline

Error

Loading

DateFormat

NumberFormat

TextFormat

TypeFormat

NumberRangePicker

FieldDisplay

FieldForm

FieldGrid

ListSearch

ListTable