diff --git a/docs/components/chart.md b/docs/components/chart.md index 898bdd06a..2103edaa4 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` | 每次更新是完全覆盖配置项还是追加？ | 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`属性，可以设置表单项的默认值。 diff --git a/docs/start/getting-started.md b/docs/start/getting-started.md index b5d2f607b..ec83562e2 100644 --- a/docs/start/getting-started.md +++ b/docs/start/getting-started.md @@ -11,68 +11,117 @@ description: npm i amis ``` +### 主题样式 + +目前支持三种主题：`default（默认主题）`、`cxd（云舍）`和`dark（暗黑）` + +1. 引入样式文件： + +html 中引入： + +```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: '内容' + }, + {}, + { + // env... + theme: 'default' // cxd 或 dark + } +); +``` + ### 使用 可以在 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 /*提示信息*/) => { + // 确认框。 + } + } + )} +
+ ); + } } ``` @@ -80,7 +129,7 @@ class MyComponent extends React.Component { 参数说明： -- `schema` 即页面配置，请前往[基本用法](./basic.md)了解. +- `schema` 即页面配置，请前往 [配置与组件](../concepts/schema) 了解. - `props` 一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如： ```jsx 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) { %>