3.0.1 • Published 5 years ago
@icedesign/template-builder v3.0.1
title: TemplateBuilder category: Tool chinese: 模板生成器
? repo
安装和升级
npm install @icedesign/template-builder -S
基础组件
<PreviewLayout />
<BasicForm />
<HeaderForm />
<AsideForm />
<FooterForm />
<AdvancedForm />
<PreviewLayout />
使用方式
import { PreviewLayout } from '@icedesign/template-builder';
const CONFIG = {
// 模板名称
name: 'app',
// 模板类型: 默认为 redux (可以扩展支持 mobx)
type: 'redux',
// 下载到指定的目录
directory: __dirname,
// 是否启用自定义模板名称
enableName: true,
// 是否启用主题
enableTheme: true,
// 布局方式: fluid-layout、boxed-layout
layout: 'boxed-layout',
// 主题配置
themeConfig: {
theme: 'dark',
primaryColor: 'red',
secondaryColor: '#3080fe',
},
// 是否启用 Header
header: {
position: 'static',
width: 'full-width',
enabled: true,
},
// 是否启用 Aside
aside: {
position: 'embed-fixed',
mode: 'vertical',
width: 200,
collapsed: false,
enabled: false,
},
// 是否启用 Footer
footer: {
position: 'fixed',
width: 'full-width',
enabled: true,
},
// Redux 配置
redux: {
enabled: true, // 生成基础的 redux 配置文件,默认会同步路由信息到 redux store
mockModule: true, // 生成简单的 Mock 示例代码
authorityModule: true, // 生成权限管理的示例代码
registerLoginModule: false, // 生成注册登录的示例代码
},
// Mobx 配置(暂不支持)
mobx: {},
};
<PreviewLayout
value={CONFIG} // 布局配置
scale={0.6} // 缩放比例
width={960} // 预览宽度
height={720} // 预览高度
/>;
<BasicForm />
使用方式
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BasicForm } from '@icedesign/template-builder';
class App extends Component {
state = {
templateConfig: {
name: 'CustomTemplate',
layout: 'fluid-layout',
themeConfig: {
theme: 'dark',
primaryColor: 'red',
secondaryColor: '#3080fe',
},
},
};
onChange = (value) => {
console.log('表单回调:', value);
this.setState({
templateConfig: value,
});
};
render() {
const { templateConfig } = this.state;
const formProps = {
value: templateConfig,
onChange: this.onChange,
};
return (
<div>
<BasicForm {...formProps} />
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
注:<BasicForm>
、<HeaderForm>
、<AsideForm>
、<FooterForm>
、<AdvancedForm>
使用方式一致
生成接口
const { generatorTemplate } = require('@icedesign/template-builder/utils)';
const CONFIG = {
// 模板名称
name: 'app',
// 模板类型: 默认为 redux (可以扩展支持 mobx)
type: 'redux',
// 下载到指定的目录
directory: __dirname,
// 是否启用自定义模板名称
enableName: true,
// 是否启用主题
enableTheme: true,
// 布局方式: fluid-layout、boxed-layout
layout: 'boxed-layout',
// 主题配置
themeConfig: {
theme: 'dark',
primaryColor: 'red',
secondaryColor: '#3080fe',
},
// 是否启用 Header
header: {
position: 'static',
width: 'full-width',
enabled: true,
},
// 是否启用 Aside
aside: {
position: 'embed-fixed',
mode: 'vertical',
width: 200,
collapsed: false,
enabled: false,
},
// 是否启用 Footer
footer: {
position: 'fixed',
width: 'full-width',
enabled: true,
},
// Redux 配置
redux: {
enabled: true, // 生成基础的 redux 配置文件,默认会同步路由信息到 redux store
mockModule: true, // 生成简单的 Mock 示例代码
authorityModule: true, // 生成权限管理的示例代码
registerLoginModule: false, // 生成注册登录的示例代码
},
};
generateTemplate(CONFIG)
.then((res) => {
console.log('生成布局成功:', res );
})
.catch((err) => {
console.log('生成布局失败:', err);
});
测试
$ npm run generate
$ npm run start
3.0.1
5 years ago
3.0.0
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
2.0.0-beta.1
5 years ago
1.0.12-beta.3
5 years ago
1.0.12-beta.2
5 years ago
1.0.12-beta.1
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago