4.0.0 • Published 1 year ago
sci-ui v4.0.0
背景
如上图所示，论文中的可视化系统整体布局形式单一，且实际中各视图位置经常需要根据导师意见进行调整。为此基于React封装了一个sciUi组件库。该组件库对上述特点进行了封装，避免了可视化系统搭建过程中的重复性工作，能帮助提升开发效率。
组件展示
用法
Step1: 首先下载npm包：
npm i sci-ui
Step2: 引入组件：
import {SciLayout, SciView} from 'sci-glyph'
Step3: 使用组件：
<SciView position={'5/6/1/6'} title='View NO.3 Title' titlePosition='center' titleBgColor={'#bbb'} titleWeight={600} titleFontSize={'1rem'} titleOccupy={true} titleColor={'#000'}>Content Area</SciView>SciLayout组件
SciLayout组件是容器组件，SciView组件应作为SciLayout组件的直接子元素。其属性配置项如下：
| 配置项 | 含义 | 值类型 | 必填项 |
|---|---|---|---|
| rows | 将页面划分为多少行 | Number | 是 |
| columns | 将页面划分为多少列 | Number | 否 |
| gap | 网格间距，默认值为1px | String | 否 |
| gapColor | 网格间隔线条的颜色，默认#ccc | String | 否 |
| title | 是否需要Title | String | 否 |
| titlePosition | title文本位置，值有left、center、right，默认center | String | 否 |
| titleBgColor | title背景颜色，默认#ccc | String | 否 |
| titleColor | title文本颜色，默认#000 | String | 否 |
| titleFontSize | title字体大小，默认1.5rem | String | 否 |
SciView组件
SciView组件是视图容器组件，可视化始于便放在该组件中。SciView组件应作为SciLayout组件的直接子元素。其属性配置项如下：
| 配置项 | 含义 | 值类型 | 必填项 |
|---|---|---|---|
| position | 视图位置，'起始行/终止行/起始列/终止列' | String | 是 |
| viewBgColor | 视图背景颜色，默认#fff | String | 否 |
| title | 是否需要Title | String | 否 |
| titleOccupy | title是否需要占用视图位置，true占用、false不占用 | Boolean | 否 |
| titlePosition | title文本位置，值有left、center、right，默认center | String | 否 |
| titleBgColor | title背景颜色，默认transparent | String | 否 |
| titleColor | title文本颜色，默认#000 | String | 否 |
| titleWeight | title文本是否加粗，默认normal | Number | 否 |
| titleFontSize | title字体大小，默认1rem | String | 否 |
使用示例
/* App.js */
import {SciLayout} from 'sci-ui';
import ViewOne from './components/ViewOne/ViewOne.jsx';
function App() {
return (
<div className="App">
<SciLayout rows={6} gapColor={'#000'} columns={6} gap={'2px'} title='System Title' titleHeight='3%' titleBgColor={'#fff'}>
</SciLayout>
</div>
);
}
/* ViewOne.jsx */
import {SciView} from 'sci-ui';
export default function ViewOne(props) {
return (
<SciView reduxKey='V1' position={'1/4/1/3'} title='View NO.1 Title' titlePosition='center' titleBgColor={'#bbb'} titleWeight={600} titleFontSize={'1rem'} titleOccupy={true} titleColor={'#000'}>Content Area</SciView>
);
}