amis-layout

amis-layout

爱速搭框架渲染器+设计器

安装

npm i amis-layout

使用

基础用法

import {render as renderAmis} from 'amis';
import 'amis-layout';
import 'amis-layout/dist/style.css';

const App = (props) => {
    return (
        {
            // 渲染
            renderAmis({
                type: 'app-layout',
                preset: '3',
                header: [
                    {
                        type: 'tpl',
                        tpl: '我的应用'
                    }
                ],
                page: [
                    {
                        type: 'page',
                        body: [
                            {
                                type: 'tpl',
                                tpl: '我的页面'
                            }
                        ]
                    }
                ]
            })
        }
    )
}

挂载外部脚本

import {render as renderAmis} from 'amis';
import 'amis-layout';
import 'amis-layout/dist/style.css';

const App = (props) => {
    return (
        {
            // 渲染
            renderAmis({
                type: 'app-layout',
                preset: '3',
                supportExtraScript: true,
                extraCss: [
                    {
                        url: 'https://127.0.0.1:5500/main.css'
                    },
                    {
                        url: 'https://127.0.0.1:5500/iconfont.css'
                    }
                ],
                extraJs: [
                    {
                        url: 'https://127.0.0.1:5500/bundle.js',
                        callback: async function () {
                            // 派发渲染器事件
                            this.dispatchEvent('JS_LOAD_FINISH', {data: 'xxx'});
                        }
                    }
                ],
                page: [
                    {
                        type: 'page',
                        body: [
                            {
                                type: 'tpl',
                                tpl: '我的页面'
                            }
                        ]
                    }
                ]
            })
        }
    )
}

属性表

参考 types.d.ts。