define('docs/basic.md', function(require, exports, module) { module.exports = { "title": "基本用法", "html": "
为了简化前端开发,amis Renderer 能够直接用配置就能将页面渲染出来。
\n先来看个简单的例子。
\n\n\n\nPS: 可以通过编辑器实时修改预览
\n
从上面的内容可以看出,一个简单页面框架已经基本出来了,这是 amis 渲染器配置的入口。从 page
渲染器开始出发,通过在容器中放置不同的渲染器来配置不同性质的页面。
简单说明以上配置信息。
\n$schema
这个字段可以忽略,他是指定当前 JSON 配置是符合指定路径 https://houtai.baidu.com/v2/schemas/page.json 的 JSON SCHEMA 文件描述的。PS: 编辑器就是靠这个描述文件提示的,可以 hover 到字段上看效果。type
指定渲染器类型,这里指定的类型为 page
。 更多渲染器类型可以去这里面查看。title
从 title 开始就是对应的渲染模型上的属性了。这里用来指定标题内容。subTitle
副标题.remark
标题上面的提示信息aside
边栏区域内容body
内容区域的内容toolbar
工具栏部分的内容这里有三个配置都是容器类型的。aside
、body
和 toolbar
。什么是容器类型?容器类型表示,他能够把其他渲染类型放进来。以上的例子为了简单,直接放了个字符串。字符串类型内部是把他当成了 tpl 渲染器来处理,在这里也可以通过对象的形式指定,如以下的例子的 body 区域是完全等价的。
容器内可以直接放一个渲染器,也可以放多个,用数组包起来即可如:
\n\n再来看一个表单页面的列子
\n\n这个例子就是在 body 容器内,放置一个 form
类型的渲染器,它就成了一个简单的表单提交页面了,controls 中可以决定放哪些表单项目,actions 中可以放置操作按钮。
如果 body 区域放置一个 crud
渲染器,它就是列表页面了,再来看个栗子:
这个栗子最主要的渲染器就是 CRUD 渲染器了,他的作用是配置了个 API,把数据拉取过来后,根据配置 columns 信息完成列表展示,列类型可以是静态文本、图片、映射或者日期等等。 columns
通过 name
与行数据关联。除了展示外还可以放置操作按钮。
这里相对复杂一点配置就是按钮了,按钮主要是通过 actionType
来决定用户点下的行为。可以配置成 弹框、发送 ajax、页面跳转、复制内容到剪切板、刷新目标组件等等。具体请参考:Action 渲染器说明
更多用法请参考渲染器手册和示例。
\n", "toc": { "label": "目录", "type": "toc", "children": [], "level": 0 } }; });