rc-layout v1.3.0

快速布局

安装

$ npm install rc-layout --save

使用

// 容器
$ import { Page } from 'rc-layout';
$ import { RadioWrap } from 'rc-layout';
$ import { BtnWrap } from 'rc-layout';
$ import { Content } from 'rc-layout';
$ import { TableWrap } from 'rc-layout';
$ import { Flex } from 'rc-layout';
$ import { Form } from 'rc-layout';

// 小部件
$ import { TimeBox } from 'rc-layout';
$ import { CountDown } from 'rc-layout';
$ import { ChemicalFormula } from 'rc-layout';
$ import { CountUp } from 'rc-layout';

// 其它
$ import { ReactDoucmentTitle } from 'rc-layout';
$ import { ScrollableRow } from 'rc-layout';
$ import { Skeleton } from 'rc-layout';

// 基础页面
$ import { Nodata } from 'rc-layout';
$ import { NotFound } from 'rc-layout';
$ import { Report } from 'rc-layout';

API

• Page # 页面
• Content # 内容
• BtnWrap # 按钮块
• TableWrap # 表格容器
• RadioWrap # 顶部radio容器
• Flex # 左右布局
• Form # 表单布局
• CountDown # 倒计时刷新数据
• TimeBox # 时间沙盒
• ChemicalFormula # 化学式
• CountUp # 数字滚动
• Skeleton # 骨架屏
• Nodata # 无数据
• NotFound # 404
• Iframe # iframe

Page

页面

Content

内容

BtnWrap

按钮块

TableWrap

表格容器

RadioWrap

顶部radio容器

Flex

左右布局

Flex.Left

Flex.Right

Form

表单布局

<Form label="名称" required>
    <Input style={{width : '200px'}}/>
</Form>

CountDown

倒计时刷新数据

TimeBox

时间沙盒

ChemicalFormula

化学式

CountUp

Nodata

无数据

Skeleton

骨架屏

SkeletonFormProps

NotFound

404

Iframe

示例

1，基础CURD布局

效果图

使用方法

import React from 'react';
import { VtxGrid, VtxDatagrid } from 'vtx-ui';
import { 
    Page, BtnWrap, Content, TableWrap, 
    Button, TimeBox, CountDown
} from 'rc-layout';

import { Input, message } from 'antd';

function CURD() {
    return (
        <Page title="CURD快速布局">
        	<VtxGrid gridweight={[1]} titles={['测试']}>
        		<Input/>
    		</VtxGrid>
            <Content top={48}>
                {/*按钮*/}
                <BtnWrap >
                    <Button fType="add">新增</Button>
                    <Button fType="view">查看</Button>
                    <Button fType="edit">编辑</Button>
                    <Button fType="delete">删除</Button>
                    <Button fType="import">导入</Button>
                    <Button fType="export">导出</Button>
                    <Button icon="sync">同步</Button>
                </BtnWrap>
                {/*表格*/}
            	<TableWrap top={48}>
                    <VtxDatagrid 
                        title={() => {
                            return (
                                <span>
                                    <CountDown 
                                        count={10} manual={true}
                                        refresh={() => {
                                            message.info('这边执行刷新操作');
                                        }}
                                    />
                                    <TimeBox/>
                                </span>
                            )
                        }}
                        columns={[
                            {title : '测试', dataIndex : 'key', key : 'key'},
                            {title : '操作', dataIndex : 'action', key : 'action'},
                        ]}
                        dataSource={[]}
                        autoFit
                    />
                </TableWrap>
            </Content>
        </Page>
    );
}

2，左右布局

效果图

使用方法

import { Page, Flex } from 'rc-layout';

<Page title="左右布局">
    <Flex>
        <Flex.Left space={10} width={250}>
            <VtxTree
                isShowSearchInput 
                data={[{
                    name : '测试树',
                    key : 'root',
                    children : [{
                        name : '测试树节点一',
                        key : 'root1',
                    }]
                }]}
                isExpandAll="openAll"
            />
        </Flex.Left>
        <Flex.Right leftWidth={250}>
            {/*curd示例*/}
        </Flex.Right>
    </Flex>
</Page>

3，其它

效果图

使用方法

import { Page, RadioWrap, Content, Cell } from 'rc-layout';

<Page title="查看页面示例">
    <RadioWrap >
    	<RadioGroup >
            <Radio value={1}>苏州大型处置单位一</Radio>
            <Radio value={2}>苏州大型处置单位二</Radio>
            <Radio value={3}>苏州大型处置单位三</Radio>
            <Radio value={4}>苏州大型处置单位四</Radio>
            <Radio value={5}>苏州大型处置单位五</Radio>
            <Radio value={6}>苏州大型处置单位六</Radio>
            <Radio value={7}>苏州大型处置单位七</Radio>
            <Radio value={8}>苏州大型处置单位八</Radio>
            <Radio value={9}>苏州大型处置单位九</Radio>
            <Radio value={10}>苏州大型处置单位十</Radio>
        </RadioGroup>
    </RadioWrap>
    <Content top={60}>
        <Cell space="0 10px">
            <h5>苏州大型处置单位趋势图</h5>
        </Cell>
        <Cell>
            <Cell.Item>
                <Cell.Item.Title>测试：</Cell.Item.Title>
                <Cell.Item.Body>
                    <Input />
                </Cell.Item.Body>
            </Cell.Item>
            <Cell.Item>
                <Cell.Item.Title>测试：</Cell.Item.Title>
                <Cell.Item.Body>
                    <Input />
                </Cell.Item.Body>
            </Cell.Item>
        </Cell>
    </Content>
</Page>