test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-05 05:18:34 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'baidu/master'

Browse Source
This commit is contained in:
2betop 2020-08-04 16:46:17 +08:00
commit 1bf1f6b78d
4 changed files with 143 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
docs/components/chart.md
View File

@ -319,16 +319,17 @@ order: 34
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| ------------------ | --------------------------------- | --------- | ------------------------------------------------------------------ | | ------------------ | ------------------------------------ | --------- | ------------------------------------------------------------------ |
| type | `string` | `"chart"` | 指定为 chart 渲染器 | | type | `string` | `"chart"` | 指定为 chart 渲染器 |
| className | `string` | | 外层 Dom 的类名 | | className | `string` | | 外层 Dom 的类名 |
| body | [SchemaNode](../types/schemanode) | | 内容容器 | | body | [SchemaNode](../types/schemanode) | | 内容容器 |
| api | [api](../types/api) | | 配置项接口地址 | | api | [api](../types/api) | | 配置项接口地址 |
| initFetch | `boolean` | | 组件初始化时，是否请求接口 | | source | [数据映射](../concepts/data-mapping) | | 通过数据映射获取数据链中变量值作为配置 |
| interval | `number` | | 刷新时间(最低 3000) | | initFetch | `boolean` | | 组件初始化时，是否请求接口 |
| config | `object | string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 | | interval | `number` | | 刷新时间(最低 3000) |
| style | `object` | | 设置根元素的 style | | config | `object` 或 `string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 |
| width | `string` | | 设置根元素的宽度 | | style | `object` | | 设置根元素的 style |
| height | `string` | | 设置根元素的高度 | | width | `string` | | 设置根元素的宽度 |
| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ | | height | `string` | | 设置根元素的高度 |
| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |

26
docs/components/form/formitem.md
View File

@ -264,6 +264,32 @@ order: 1
如上例，更改姓名表单项值，可以改变表单数据域中`name`变量的值。 如上例，更改姓名表单项值，可以改变表单数据域中`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`属性，可以设置表单项的默认值。 通过配置`value`属性，可以设置表单项的默认值。

153
docs/start/getting-started.md
View File

@ -11,68 +11,117 @@ description:
npm i amis npm i amis
``` ```
### 主题样式
目前支持三种主题：`default（默认主题）`、`cxd（云舍）`和`dark（暗黑）`
1. 引入样式文件：
html 中引入：
```html
<link href="./node_modules/amis/lib/themes/default.css" />
<!-- 或 <link href="./node_modules/amis/lib/themes/cxd.css" /> -->
<!-- 或 <link href="./node_modules/amis/lib/themes/dark.css" /> -->
```
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）。 可以在 React Component 这么使用（TypeScript）。
```tsx ```tsx
import * as React from 'react'; import * as React from 'react';
import { import {render as renderAmis} from 'amis';
render as renderAmis
} from 'amis';
class MyComponent extends React.Component<any, any> { class MyComponent extends React.Component<any, any> {
render() { render() {
return ( return (
<div> <div>
<p>通过 amis 渲染页面</p> <p>通过 amis 渲染页面</p>
{renderAmis({ {renderAmis(
// schema {
// 这里是 amis 的 Json 配置。 // schema
type: 'page', // 这里是 amis 的 Json 配置。
title: '简单页面', type: 'page',
body: '内容' title: '简单页面',
}, { body: '内容'
// props },
}, { {
// env // props
// 这些是 amis 需要的一些接口实现 },
// 可以参考本项目里面的 Demo 部分代码。 {
// env
// 这些是 amis 需要的一些接口实现
// 可以参考后面的参数介绍。
updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace，还是push？*/) => { updateLocation: (
// 用来更新地址栏 location: string /*目标地址*/,
}, replace: boolean /*是replace，还是push？*/
) => {
// 用来更新地址栏
},
jumpTo: (location:string/*目标地址*/) => { jumpTo: (location: string /*目标地址*/) => {
// 页面跳转， actionType: link、url 都会进来。 // 页面跳转， actionType: link、url 都会进来。
}, },
fetcher: ({ fetcher: ({
url, url,
method, method,
data, data,
config config
}:{ }: {
url:string/*目标地址*/, url: string /*目标地址*/;
method:'get' | 'post' | 'put' | 'delete'/*发送方式*/, method: 'get' | 'post' | 'put' | 'delete' /*发送方式*/;
data: object | void/*数据*/, data: object | void /*数据*/;
config: object/*其他配置*/ config: object /*其他配置*/;
}) => { }) => {
// 用来发送 Ajax 请求，建议使用 axios // 用来发送 Ajax 请求，建议使用 axios
}, },
notify: (type:'error'|'success'/**/, msg:string/*提示内容*/) => { notify: (
// 用来提示用户 type: 'error' | 'success' /**/,
}, msg: string /*提示内容*/
alert: (content:string/*提示信息*/) => { ) => {
// 另外一种提示，可以直接用系统框 // 用来提示用户
}, },
confirm: (content:string/*提示信息*/) => { alert: (content: string /*提示信息*/) => {
// 确认框。 // 另外一种提示，可以直接用系统框
} },
});} confirm: (content: string /*提示信息*/) => {
</div> // 确认框。
); }
} }
)}
</div>
);
}
} }
``` ```
@ -80,7 +129,7 @@ class MyComponent extends React.Component<any, any> {
参数说明： 参数说明：
- `schema` 即页面配置，请前往[基本用法](./basic.md)了解. - `schema` 即页面配置，请前往 [配置与组件](../concepts/schema) 了解.
- `props` 一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如： - `props` 一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：
```jsx ```jsx

4
src/renderers/Carousel.tsx
View File

@ -47,7 +47,7 @@ const defaultSchema = {
type: 'tpl', type: 'tpl',
tpl: ` tpl: `
<% if (data.hasOwnProperty('image')) { %> <% if (data.hasOwnProperty('image')) { %>
<div style="background-image: url(<%= data.image %>); background-size: contain; background-repeat: no-repeat; background-position: center center;" class="image <%= data.imageClassName %>"></div> <div style="background-image: url('<%= data.image %>'); background-size: contain; background-repeat: no-repeat; background-position: center center;" class="image <%= data.imageClassName %>"></div>
<% if (data.hasOwnProperty('title')) { %> <% if (data.hasOwnProperty('title')) { %>
<div class="title <%= data.titleClassName %>"><%= data.title %></div> <div class="title <%= data.titleClassName %>"><%= data.title %></div>
<% } if (data.hasOwnProperty('description')) { %> <% } if (data.hasOwnProperty('description')) { %>
@ -56,7 +56,7 @@ const defaultSchema = {
<% } else if (data.hasOwnProperty('html')) { %> <% } else if (data.hasOwnProperty('html')) { %>
<%= data.html %>" <%= data.html %>"
<% } else if (data.hasOwnProperty('image')) { %> <% } else if (data.hasOwnProperty('image')) { %>
<div style="background-image: url(<%= data.image %>)" class="image <%= data.imageClassName %>"></div> <div style="background-image: url('<%= data.image %>')" class="image <%= data.imageClassName %>"></div>
<% if (data.title) { %> <% if (data.title) { %>
<div class="title <%= data.titleClassName %>"><%= data.title %></div> <div class="title <%= data.titleClassName %>"><%= data.title %></div>
<% } if (data.description) { %> <% } if (data.description) { %>