From ae5764652665afcfd202ef938055d81472f390fc Mon Sep 17 00:00:00 2001 From: RickCole21 Date: Mon, 3 Aug 2020 16:06:22 +0800 Subject: [PATCH 01/11] fix doc --- docs/components/form/formitem.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/docs/components/form/formitem.md b/docs/components/form/formitem.md index e4c9a6ccd..aab3f6b8c 100755 --- a/docs/components/form/formitem.md +++ b/docs/components/form/formitem.md @@ -264,6 +264,32 @@ order: 1 如上例，更改姓名表单项值，可以改变表单数据域中`name`变量的值。 +也支持链式配置 `name`属性，例如：`aaa.bbb` + +```schema:height="350" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "type": "text", + "label": "姓名", + "name": "person.name" + } + ] +} +``` + +观察上例，这样更改表单项值，会改变数据域中`person.name`的值 + +```json +{ + "person": { + "name": "xxx" + } +} +``` + ## 配置默认值 通过配置`value`属性，可以设置表单项的默认值。 From 8c882472a0550d0a2d66fd37ac8c132313967f62 Mon Sep 17 00:00:00 2001 From: RickCole21 Date: Mon, 3 Aug 2020 17:32:33 +0800 Subject: [PATCH 02/11] fix doc --- docs/components/chart.md | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/docs/components/chart.md b/docs/components/chart.md index 898bdd06a..7ea862dd8 100755 --- a/docs/components/chart.md +++ b/docs/components/chart.md @@ -319,16 +319,17 @@ order: 34 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| ------------------ | --------------------------------- | --------- | ------------------------------------------------------------------ | -| type | `string` | `"chart"` | 指定为 chart 渲染器 | -| className | `string` | | 外层 Dom 的类名 | -| body | [SchemaNode](../types/schemanode) | | 内容容器 | -| api | [api](../types/api) | | 配置项接口地址 | -| initFetch | `boolean` | | 组件初始化时，是否请求接口 | -| interval | `number` | | 刷新时间(最低 3000) | -| config | `object | string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 | -| style | `object` | | 设置根元素的 style | -| width | `string` | | 设置根元素的宽度 | -| height | `string` | | 设置根元素的高度 | -| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ | +| 属性名 | 类型 | 默认值 | 说明 | +| ------------------ | ------------------------------------ | --------- | ------------------------------------------------------------------ | +| type | `string` | `"chart"` | 指定为 chart 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| body | [SchemaNode](../types/schemanode) | | 内容容器 | +| api | [api](../types/api) | | 配置项接口地址 | +| source | [数据映射](../concepts/data-mapping) | | 通过数据映射获取数据链中变量值作为配置 | +| initFetch | `boolean` | | 组件初始化时，是否请求接口 | +| interval | `number` | | 刷新时间(最低 3000) | +| config | `object | string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 | +| style | `object` | | 设置根元素的 style | +| width | `string` | | 设置根元素的宽度 | +| height | `string` | | 设置根元素的高度 | +| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ | From 9168588dac2c08e980b3e5c634a8b7dc2aea92db Mon Sep 17 00:00:00 2001 From: RickCole21 Date: Mon, 3 Aug 2020 17:34:09 +0800 Subject: [PATCH 03/11] fix doc --- docs/components/chart.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/chart.md b/docs/components/chart.md index 7ea862dd8..2103edaa4 100755 --- a/docs/components/chart.md +++ b/docs/components/chart.md @@ -328,7 +328,7 @@ order: 34 | source | [数据映射](../concepts/data-mapping) | | 通过数据映射获取数据链中变量值作为配置 | | initFetch | `boolean` | | 组件初始化时，是否请求接口 | | interval | `number` | | 刷新时间(最低 3000) | -| config | `object | string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 | +| config | `object` 或 `string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 | | style | `object` | | 设置根元素的 style | | width | `string` | | 设置根元素的宽度 | | height | `string` | | 设置根元素的高度 | From 76aefb3f3726807a17b27606711fdbbcb095fa88 Mon Sep 17 00:00:00 2001 From: RickCole21 Date: Mon, 3 Aug 2020 18:02:53 +0800 Subject: [PATCH 04/11] fix doc --- docs/start/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/start/getting-started.md b/docs/start/getting-started.md index b5d2f607b..51a04f7ef 100644 --- a/docs/start/getting-started.md +++ b/docs/start/getting-started.md @@ -80,7 +80,7 @@ class MyComponent extends React.Component { 参数说明： -- `schema` 即页面配置，请前往[基本用法](./basic.md)了解. +- `schema` 即页面配置，请前往 [配置与组件](../concepts/schema) 了解. - `props` 一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如： ```jsx From 1084c9a9b255e2951d4c02164002d0633ccc3910 Mon Sep 17 00:00:00 2001 From: RickCole21 Date: Tue, 4 Aug 2020 10:55:22 +0800 Subject: [PATCH 05/11] =?UTF-8?q?=E8=A1=A5=E5=85=85=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/start/getting-started.md | 150 ++++++++++++++++++++++------------ 1 file changed, 99 insertions(+), 51 deletions(-) diff --git a/docs/start/getting-started.md b/docs/start/getting-started.md index 51a04f7ef..cdd110769 100644 --- a/docs/start/getting-started.md +++ b/docs/start/getting-started.md @@ -11,68 +11,116 @@ description: npm i amis ``` +### 主题样式 + +目前支持三种主题：`default（默认主题）`、`cxd（云舍）`和`dark（暗黑）` + +1. 引入样式文件： + +```html + + + +``` + +js 中引入： + +```js +import './node_modules/amis/lib/themes/default.css'; +// 或 import './node_modules/amis/lib/themes/cxd.css'; +// 或 import './node_modules/amis/lib/themes/dark.css'; +``` + +> 上面只是示例，请根据自己的项目结构调整引用路径 + +2. 渲染器使用配置主题 + +```js +renderAmis( + { + type: 'page', + title: '简单页面', + body: '内容' + }, + { + theme: 'default' // cxd 或 dark + }, + { + // env... + } +); +``` + ### 使用 可以在 React Component 这么使用（TypeScript）。 ```tsx import * as React from 'react'; -import { - render as renderAmis -} from 'amis'; +import {render as renderAmis} from 'amis'; class MyComponent extends React.Component { - render() { - return ( -
-

通过 amis 渲染页面

- {renderAmis({ - // schema - // 这里是 amis 的 Json 配置。 - type: 'page', - title: '简单页面', - body: '内容' - }, { - // props - }, { - // env - // 这些是 amis 需要的一些接口实现 - // 可以参考本项目里面的 Demo 部分代码。 + render() { + return ( +
+

通过 amis 渲染页面

+ {renderAmis( + { + // schema + // 这里是 amis 的 Json 配置。 + type: 'page', + title: '简单页面', + body: '内容' + }, + { + // props + }, + { + // env + // 这些是 amis 需要的一些接口实现 + // 可以参考后面的参数介绍。 - updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace，还是push？*/) => { - // 用来更新地址栏 - }, + updateLocation: ( + location: string /*目标地址*/, + replace: boolean /*是replace，还是push？*/ + ) => { + // 用来更新地址栏 + }, - jumpTo: (location:string/*目标地址*/) => { - // 页面跳转， actionType: link、url 都会进来。 - }, + jumpTo: (location: string /*目标地址*/) => { + // 页面跳转， actionType: link、url 都会进来。 + }, - fetcher: ({ - url, - method, - data, - config - }:{ - url:string/*目标地址*/, - method:'get' | 'post' | 'put' | 'delete'/*发送方式*/, - data: object | void/*数据*/, - config: object/*其他配置*/ - }) => { - // 用来发送 Ajax 请求，建议使用 axios - }, - notify: (type:'error'|'success'/**/, msg:string/*提示内容*/) => { - // 用来提示用户 - }, - alert: (content:string/*提示信息*/) => { - // 另外一种提示，可以直接用系统框 - }, - confirm: (content:string/*提示信息*/) => { - // 确认框。 - } - });} -
- ); - } + fetcher: ({ + url, + method, + data, + config + }: { + url: string /*目标地址*/; + method: 'get' | 'post' | 'put' | 'delete' /*发送方式*/; + data: object | void /*数据*/; + config: object /*其他配置*/; + }) => { + // 用来发送 Ajax 请求，建议使用 axios + }, + notify: ( + type: 'error' | 'success' /**/, + msg: string /*提示内容*/ + ) => { + // 用来提示用户 + }, + alert: (content: string /*提示信息*/) => { + // 另外一种提示，可以直接用系统框 + }, + confirm: (content: string /*提示信息*/) => { + // 确认框。 + } + } + )} +
+ ); + } } ``` From 4bd2b0a76874233794c91b9195a906378b9dce1e Mon Sep 17 00:00:00 2001 From: rickcole Date: Tue, 4 Aug 2020 12:07:32 +0800 Subject: [PATCH 08/11] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=BD=AE=E6=92=AD?= =?UTF-8?q?=E5=9B=BE=E4=B8=AD=E9=93=BE=E6=8E=A5=E4=B8=AD=E6=9C=89=E7=89=B9?= =?UTF-8?q?=E6=AE=8A=E5=AD=97=E7=AC=A6=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderers/Carousel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderers/Carousel.tsx b/src/renderers/Carousel.tsx index 014e01bab..d9de84fb9 100644 --- a/src/renderers/Carousel.tsx +++ b/src/renderers/Carousel.tsx @@ -47,7 +47,7 @@ const defaultSchema = { type: 'tpl', tpl: ` <% if (data.hasOwnProperty('image')) { %> -
+
<% if (data.hasOwnProperty('title')) { %>
<%= data.title %>
<% } if (data.hasOwnProperty('description')) { %> @@ -56,7 +56,7 @@ const defaultSchema = { <% } else if (data.hasOwnProperty('html')) { %> <%= data.html %>" <% } else if (data.hasOwnProperty('image')) { %> -
+
<% if (data.title) { %>
<%= data.title %>
<% } if (data.description) { %> From 2c38f3c2b90d7a4cbdee35a49c4bff273e095670 Mon Sep 17 00:00:00 2001 From: RickCole21 Date: Tue, 4 Aug 2020 13:16:20 +0800 Subject: [PATCH 09/11] fix doc --- docs/start/getting-started.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/start/getting-started.md b/docs/start/getting-started.md index cdd110769..ec83562e2 100644 --- a/docs/start/getting-started.md +++ b/docs/start/getting-started.md @@ -17,6 +17,8 @@ npm i amis 1. 引入样式文件： +html 中引入： + ```html @@ -42,11 +44,10 @@ renderAmis( title: '简单页面', body: '内容' }, - { - theme: 'default' // cxd 或 dark - }, + {}, { // env... + theme: 'default' // cxd 或 dark } ); ```