### Install Amis Dependencies with npm

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Installs essential libraries like axios for HTTP requests and copy-to-clipboard for copying text. These are commonly used in Amis examples for enhanced functionality.

```bash
npm i axios copy-to-clipboard

```

--------------------------------

### Theming and URL Checking

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Options for setting the theme and checking the current URL.

```APIDOC
## Theme Setting

### Description
Specifies the current theme for Amis.

### Property
`theme: string`

### Supported Themes
*   `default`
*   `cxd`
*   `dark`

## IsCurrentUrl Function

### Description
Checks if a given link matches the current page's URL.

### Method
`isCurrentUrl(link: string) => boolean`

### Parameters
*   **link** (string) - Required - The URL to check.
```

--------------------------------

### 销毁 Amis 实例 (JavaScript)

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

在单页应用中，当离开当前页面时，需要调用 amisScoped.unmount() 方法来销毁 Amis 实例，释放资源并防止内存泄漏。这是维护应用稳定性的重要步骤。

```javascript
amisScoped.unmount();


```

--------------------------------

### 安装 Amis SDK (npm)

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

使用 npm 包管理器安装 Amis SDK。这是在项目中使用 Amis 框架的基础步骤，通过此命令可以获取最新的 Amis 库文件。

```bash
npm i amis


```

--------------------------------

### User Behavior Tracking and Session Management

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Configuration for user behavior tracking and session management.

```APIDOC
## Tracker

### Description
Enables user behavior tracking. Refer to the provided link for more details.

## Session Management

### Description
Determines if the store is globally shared or isolated. Defaults to 'global'. Set to a different value for an isolated store.

### Property
`session: string` (default: `'global'`)
```

--------------------------------

### Modal Container and Custom Renderer Loading

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Configuration for modal container and lazy loading custom renderers.

```APIDOC
## GetModalContainer Function

### Description
Specifies the HTML element that will serve as the container for modal dialogs.

### Method
`getModalContainer() => HTMLElement`

### Returns
*   `HTMLElement` - The container element for modals.

## LoadRenderer Function

### Description
Allows lazy loading of custom components based on a schema and path. Useful for dynamic component loading.

### Method
`loadRenderer(schema: any, path: string) => Promise<Function>`

### Parameters
*   **schema** (any) - Required - The schema definition for the component.
*   **path** (string) - Required - The path to the component definition.
```

--------------------------------

### 配置 Amis 实例行为 (JavaScript)

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

使用 amis.embed 函数嵌入 Amis 应用，并通过第二个参数对象配置 fetcher、请求适配器、页面跳转、地址栏更新、弹窗挂载、复制、通知、提示、确认框、主题切换、用户行为跟踪和 toast 提示位置等行为。这些配置项允许开发者自定义 Amis 的全局行为，以满足特定的应用需求。

```javascript
let amisScoped = amis.embed(
  '#root',
  amisJSON,
  {
    // 这里是初始 props，一般不用传。
    // locale: 'en-US' // props 中可以设置语言，默认是中文
  },
  {
    // 下面是一些可选的外部控制函数
    // 在 sdk 中可以不传，用来实现 ajax 请求，但在 npm 中这是必须提供的
    // fetcher: (url, method, data, config) => {},
    // 全局 api 请求适配器
    // 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
    //
    // requestAdaptor(api) {
    //   // 支持异步，可以通过 api.mockResponse 来设置返回结果，跳过真正的请求发送
    //   // 此功能自定义 fetcher 的话会失效
    //   // api.context 中包含发送请求前的上下文信息
    //   return api;
    // }
    //
    // 全局 api 适配器。
    // 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
    // responseAdaptor(api, payload, query, request, response) {
    //   return payload;
    // }
    //
    // 用来接管页面跳转，比如用 location.href 或 window.open，或者自己实现 amis 配置更新
    // jumpTo: to => { location.href = to; },
    //
    // 用来实现地址栏更新
    // updateLocation: (to, replace) => {},
    //
    // 用来判断是否目标地址当前地址。
    // isCurrentUrl: url => {},
    //
    // 用来配置弹窗等组件的挂载位置
    // getModalContainer: () => document.getElementsByTagName('body')[0],
    //
    // 用来实现复制到剪切板
    // copy: content => {},
    //
    // 用来实现通知
    // notify: (type, msg) => {},
    //
    // 用来实现提示
    // alert: content => {},
    //
    // 用来实现确认框。
    // confirm: content => {},
    //
    // 主题，默认是 default，还可以设置成 cxd 或 dark，但记得引用它们的 css，比如 sdk 目录下的 cxd.css
    // theme: 'cxd'
    //
    // 用来实现用户行为跟踪，详细请查看左侧高级中的说明
    // tracker: (eventTracker) => {},
    //
    // Toast提示弹出位置，默认为'top-center'
    // toastPosition: 'top-right' | 'top-center' | 'top-left' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'center'
  }
);


```

--------------------------------

### Navigation Functions

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Functions for handling page navigation and URL manipulation.

```APIDOC
## JumpTo Function

### Description
Navigates the user to a specified URL. This function should be implemented by the user to handle SPA routing if necessary.

### Method
`jumpTo(to: string, action?: Action, ctx?: object) => void`

### Parameters
*   **to** (string) - Required - The URL to navigate to.
*   **action** (Action) - Optional - An action object.
*   **ctx** (object) - Optional - A context object.

## UpdateLocation Function

### Description
Replaces the current location with a new one, similar to `jumpTo`.

### Method
`updateLocation(location: any, replace?: boolean) => void`

### Parameters
*   **location** (any) - Required - The new location object.
*   **replace** (boolean) - Optional - If true, replaces the current history entry.
```

--------------------------------

### 更新 Amis 属性 (JavaScript)

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

通过 amisScoped.updateProps(props, callback) 方法更新 Amis 实例的属性。可以传入新的属性对象来动态修改 Amis 的渲染属性，并可选地提供一个回调函数在属性更新后执行。

```javascript
amisScoped.updateProps(
  {
    // 新的属性对象
  } /*, () => {} 更新回调 */
);


```

--------------------------------

### Copy to Clipboard

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Functionality to copy content to the clipboard.

```APIDOC
## Copy Function

### Description
Copies the provided content to the clipboard.

### Method
`copy(contents: string, options?: {silent: boolean, format?: string})`

### Parameters
*   **contents** (string) - Required - The content to copy.
*   **options** (object) - Optional - Configuration options.
    *   **silent** (boolean) - Optional - If true, suppresses feedback messages.
    *   **format** (string) - Optional - The format of the content (e.g., `text/html`, `text/plain`).
```

--------------------------------

### Alert and Confirmation Dialogs

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Functions for displaying alert and confirmation messages to the user.

```APIDOC
## Alert Function

### Description
Displays an alert message to the user.

### Method
`alert(msg: string) => void`

### Parameters
*   **msg** (string) - Required - The message to display in the alert.

## Confirm Function

### Description
Displays a confirmation dialog to the user, returning a boolean or a promise that resolves to a boolean.

### Method
`confirm(msg: string) => boolean | Promise<boolean>`

### Parameters
*   **msg** (string) - Required - The message to display in the confirmation dialog.

### Response
*   (boolean | Promise<boolean>) - Returns `true` if the user confirms, `false` otherwise.
```

--------------------------------

### Chart and Tinymce Plugin Loading

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Functions for loading extensions for ECharts and plugins for TinyMCE.

```APIDOC
## LoadChartExtends Function

### Description
Allows loading ECharts plugins. This function is called after ECharts is initially loaded and can return a Promise.

### Method
`loadChartExtends() => Promise<void>`

## LoadTinymcePlugin Function

### Description
Allows loading TinyMCE plugins. This function is executed every time TinyMCE is rendered and can be used to load TinyMCE plugins.

### Method
`loadTinymcePlugin() => Promise<void>`
```

--------------------------------

### 调用 Amis 动作 (JavaScript)

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

使用 amisScoped.doAction(actions, ctx) 调用 Amis 中的通用动作和目标组件动作。actions 参数是一个动作列表，ctx 参数用于为动作配置补充上下文数据。支持 toast、ajax、dialog、setValue 等多种动作类型，可实现复杂的交互逻辑。

```javascript
amisScoped.doAction(
  [
    {
      actionType: 'toast',
      args: {
        msg: '${amisUser.name}, ${myName}'
      }
    },
    {
      actionType: 'ajax',
      api: {
        url: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm',
        method: 'post'
      }
    },
    {
      actionType: 'dialog',
      dialog: {
        type: 'dialog',
        title: '弹窗',
        body: [
          {
            type: 'tpl',
            tpl: '<p>对，你打开了弹窗</p>',
            inline: false
          }
        ]
      }
    },
    {
      actionType: 'setValue',
      componentId: 'name',
      args: {
        value: '${myName}'
      }
    }
  ],
  {
    myName: 'amis'
  }
);


```

--------------------------------

### Wizard Component Initialize to Specific Step Example

Source: https://baidu.github.io/amis/zh-CN/components/wizard

Shows how to initialize the Wizard component to a specific step using the `initApi`. The API response should include a `step` field with a numeric value indicating the desired starting step (e.g., 1 for the first step).

```json
{
  "type": "wizard",
  "title": "Initialize to Step Wizard",
  "initApi": "/api/wizard/initial-step",
  "steps": [
    {
      "title": "Step 1",
      "body": [ { "type": "tpl", "tpl": "Content for Step 1" } ]
    },
    {
      "title": "Step 2",
      "body": [ { "type": "tpl", "tpl": "Content for Step 2" } ]
    }
  ]
}
```

--------------------------------

### Amis InputImage JSON Configuration Examples

Source: https://baidu.github.io/amis/zh-CN/components/form/input-image

This section provides examples of how to configure the Amis InputImage component using JSON. It illustrates basic image upload setup, restricting file types, setting maximum file size, enabling cropping with specific aspect ratios and formats, and configuring automatic value filling based on the upload receiver's response.

```json
{
  "type": "form",
  "api": "/saveForm",
  "body": [
    {
      "type": "input-image",
      "name": "image",
      "label": "图片上传",
      "receiver": "/uploader"
    },
    {
      "type": "input-image",
      "name": "avatar",
      "label": "头像上传",
      "accept": ".jpg,.png",
      "maxSize": 1024000,
      "crop": {
        "aspectRatio": 1,
        "cropFormat": "jpeg",
        "cropQuality": 0.9
      }
    },
    {
      "type": "input-image",
      "name": "gallery",
      "label": "图片库",
      "multiple": true,
      "autoUpload": false,
      "hideUploadButton": true,
      "autoFill": {
        "myUrl": "https://cdn.com/${filename}"
      }
    }
  ]
}

```

--------------------------------

### 获取和操作 Amis 组件 (JavaScript)

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

通过 amisScoped.getComponentByName(name) 获取渲染的 Amis 组件实例，并可以使用 getValues() 获取表单值或 setValues() 修改表单值。此功能要求 Amis 组件（如 page 和 form）必须设置 name 属性，以便通过名称进行唯一标识和操作。

```javascript
let amisScoped = amis.embed('#root', {
  "type": "page",
  "name": "page1",
  "title": "表单页面",
  "body": {
    "type": "form",
    "name": "form1",
    "body": [
      {
        "label": "Name",
        "type": "input-text",
        "name": "name1"
      }
    ]
  }
});

// 获取表单值
amisScoped.getComponentByName('page1.form1').getValues();

// 设置表单值
amisScoped.getComponentByName('page1.form1').setValues({'name1': 'othername'});

```

--------------------------------

### 更新 Amis Schema 配置 (JavaScript)

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

使用 amisScoped.updateSchema(schema) 方法动态更新 Amis 的渲染 Schema。这允许在运行时修改 Amis 应用的结构和内容，例如在按钮点击事件中改变页面 body 的内容。

```javascript
let amisJSON = {
  type: 'page',
  body: [
    'inital string',

    {
      type: 'button',
      label: 'Change',
      onClick: handleChange
    }
  ]
};
let amisScoped = amis.embed('#root', amisJSON);

function handleChange() {
  const schema = {
    ...amisJSON,
    body: ['changed']
  };
  amisScoped.updateSchema(schema);
}


```

--------------------------------

### Affix Offsets and Rich Text Token

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Settings for affix element offsets and the token for the rich text editor.

```APIDOC
## Affix Offset Top

### Description
Specifies the top offset for fixed elements. If you have other fixed elements at the top, set this to prevent overlap. For versions 3.5.0 and above, use the CSS variable `--affix-offset-top`.

### Property
`affixOffsetTop: number`

## Affix Offset Bottom

### Description
Specifies the bottom offset for fixed elements. If you have other fixed elements at the bottom, set this to prevent overlap. For versions 3.5.0 and above, use the CSS variable `--affix-offset-bottom`.

### Property
`affixOffsetBottom: number`

## Rich Text Token

### Description
Provides the token for the built-in FrolaEditor. If not provided, Tinymce is used by default. You may need to purchase a license for FrolaEditor or use Tinymce.

### Property
`richTextToken: string`
```

--------------------------------

### Wizard Component Basic Usage Example

Source: https://baidu.github.io/amis/zh-CN/components/wizard

Demonstrates the fundamental structure of a Wizard component, allowing users to navigate through a series of steps to complete a form. This basic setup includes defining multiple steps with titles and content.

```json
{
  "type": "wizard",
  "title": "Wizard Example",
  "steps": [
    {
      "title": "Step 1",
      "body": [
        {
          "type": "input-text",
          "label": "Name",
          "name": "name"
        }
      ]
    },
    {
      "title": "Step 2",
      "body": [
        {
          "type": "input-email",
          "label": "Email",
          "name": "email"
        }
      ]
    }
  ]
}
```

--------------------------------

### Amis Rendering in React with TypeScript

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Demonstrates how to render Amis pages within a React component using TypeScript. It includes setting up Amis UI components, defining the Amis schema, and implementing the environment configuration for fetcher, copy, and other utilities.

```typescript
import * as React from 'react';
import axios from 'axios';
import copy from 'copy-to-clipboard';

import {render as renderAmis} from 'amis';
import {ToastComponent, AlertComponent, alert, confirm, toast} from 'amis-ui';

class MyComponent extends React.Component<any, any> {
  render() {
    let amisScoped;
    let theme = 'cxd';
    let locale = 'zh-CN';

    // 请勿使用 React.StrictMode，目前还不支持
    return (
      <div>
        <p>通过 amis 渲染页面</p>
        <ToastComponent
          theme={theme}
          key="toast"
          position={'top-right'}
          locale={locale}
        />
        <AlertComponent theme={theme} key="alert" locale={locale} />
        {renderAmis(
          {
            // 这里是 amis 的 Json 配置。
            type: 'page',
            title: '简单页面',
            body: '内容'
          },
          {
            // props...
            // locale: 'en-US' // 请参考「多语言」的文档
            // scopeRef: (ref: any) => (amisScoped = ref)  // 功能和前面 SDK 的 amisScoped 一样
          },
          {
            // 下面三个接口必须实现
            fetcher: ({url, method, data, responseType, config, headers}: any) => {
              config = config || {};
              config.withCredentials = true;
              responseType && (config.responseType = responseType);

              if (config.cancelExecutor) {
                config.cancelToken = new (axios as any).CancelToken(
                  config.cancelExecutor
                );
              }

              config.headers = headers || {};

              if (method !== 'post' && method !== 'put' && method !== 'patch') {
                if (data) {
                  config.params = data;
                }

                return (axios as any)[method](url, config);
              } else if (data && data instanceof FormData) {
                config.headers = config.headers || {};
                config.headers['Content-Type'] = 'multipart/form-data';
              } else if (
                data &&
                typeof data !== 'string' &&
                !(data instanceof Blob) &&
                !(data instanceof ArrayBuffer)
              ) {
                data = JSON.stringify(data);
                config.headers = config.headers || {};
                config.headers['Content-Type'] = 'application/json';
              }

              return (axios as any)[method](url, data, config);
            },
            isCancel: (value: any) => (axios as any).isCancel(value),
            copy: content => {
              copy(content);
              toast.success('内容已复制到粘贴板');
            },
            theme

            // 后面这些接口可以不用实现

            // 默认是地址跳转
            // jumpTo: (
            //   location: string /*目标地址*/,
            //   action: any /* action对象*/
            // ) => {
            //   // 用来实现页面跳转, actionType:link、url 都会进来。
            // },

            // updateLocation: (
            //   location: string /*目标地址*/,
            //   replace: boolean /*是replace，还是push？*/
            // ) => {
            //   // 地址替换，跟 jumpTo 类似
            // },

            // getModalContainer: () => {
            //   // 弹窗挂载的 DOM 节点
            // },

            // isCurrentUrl: (
            //   url: string /*url地址*/,
            // ) => {
            //   // 用来判断是否目标地址当前地址
            // },

            // notify: (
            //   type: 'error' | 'success' /**/,
            //   msg: string /*提示内容*/
            // ) => {
            //   toast[type]
            //     ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
            //     : console.warn('[Notify]', type, msg);
            // },
            // alert,
            // confirm,
            // tracker: (eventTracke) => {}
          }
        )}
      </div>
    );
  }
}

```

--------------------------------

### Amis Flex Layout: Basic Usage Example

Source: https://baidu.github.io/amis/zh-CN/components/flex

Demonstrates the fundamental implementation of the Amis Flex Layout component. It shows how to structure items within the flex container, where each item can be another Amis component. This serves as a starting point for creating flexible layouts.

```json
{
  "type": "flex",
  "items": [
    {
      "type": "component1",
      "label": "Item 1"
    },
    {
      "type": "component2",
      "label": "Item 2"
    }
  ]
}
```

--------------------------------

### Get Modal Container Element

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Provides a function that returns the HTML element designated as the container for modal dialogs. This allows for customization of where modals are rendered.

```typescript
getModalContainer: () => HTMLElement;
```

--------------------------------

### Configure Keys to Ignore During Text Replacement

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Works in conjunction with `replaceText` to specify keys that should be excluded from text replacement. This prevents unintended replacements in critical fields. The example shows how to ignore the 'api' key using a callback function.

```javascript
let amisScoped = amis.embed(
  '#root',
  {
    type: 'page',
    body: {
      type: 'service',
      api: 'service/api'
    }
  },
  {},
  {
    replaceText: {
      service: 'http://localhost'
    },
    replaceTextIgnoreKeys: key => key === 'api'
  }
);

```

--------------------------------

### Configure Text Replacement for Multilingual Support

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Enables variable replacement and multilingual features within Amis. It allows defining key-value pairs where keys are replaced by their corresponding values in the schema. This example demonstrates replacing 'service' with 'http://localhost'.

```javascript
let amisScoped = amis.embed(
  '#root',
  {
    type: 'page',
    body: {
      type: 'service',
      api: 'service/api'
    }
  },
  {},
  {
    replaceText: {
      service: 'http://localhost'
    }
  }
);

```

--------------------------------

### Toast Position

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Configuration for the display position of toast notifications.

```APIDOC
## Toast Position

### Description
Sets the position where toast notifications appear. Defaults to `'top-center'`.

### Property
`toastPosition: 'top-right' | 'top-center' | 'top-left' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'center'`
```

--------------------------------

### Routing Control

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Functions for controlling and blocking routing changes.

```APIDOC
## BlockRouting Function

### Description
Sets a hook function to prevent route changes, useful for prompting the user when form data is unsaved.

### Method
`blockRouting(fn: (nextLocation: any) => void | string) => () => void`

### Parameters
*   **fn** ((nextLocation: any) => void | string) - Required - A function that is called before a route change. It can return a string to display as a confirmation message or `void` to allow the change.

### Returns
*   `() => void` - A function to unblock routing.
```

--------------------------------

### Set Initial Data and Context for Amis SDK

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

This example demonstrates how to set initial data and context for the Amis SDK. The `data` property in the props object is used to provide top-level data to Amis, which can be accessed using template variables (e.g., `${myData}`). Since version 3.1.0, the `context` property can be used to pass platform data accessible at any level.

```javascript
let amis = amisRequire('amis/embed');
let amisJSON = {
  type: 'page',
  body: {
    type: 'tpl',
    tpl: '${myData}'
  }
};
let amisScoped = amis.embed('#root', amisJSON, {
  data: {
    myData: 'amis'
  },
  context: {
    amisUser: {
      id: 1,
      name: 'test user'
    }
  }
});

```

--------------------------------

### Basic Usage Example

Source: https://baidu.github.io/amis/zh-CN/components/anchor-nav

Demonstrates the basic usage of the AnchorNav component with a vertical layout.

```APIDOC
## Basic Usage

Configure the `links` array with the desired number of navigation items.

### Example

```json
{
  "type": "anchor-nav",
  "links": [
    {
      "title": "基本信息",
      "href": "#basic-info"
    },
    {
      "title": "工作信息",
      "href": "#work-info"
    },
    {
      "title": "兴趣爱好",
      "href": "#hobbies"
    }
  ]
}
```

### Corresponding Content Sections (Example)

```html
<div id="basic-info">
  <h3>基本信息</h3>
  <p>姓名：</p>
  <p>邮箱：</p>
  <button>提交</button>
</div>

<div id="work-info">
  <h3>工作信息</h3>
  <p>公司名称：</p>
  <p>公司地址：</p>
  <button>提交</button>
</div>

<div id="hobbies">
  <h3>兴趣爱好</h3>
  <p>兴趣爱好1：</p>
  <p>兴趣爱好2：</p>
  <p>兴趣爱好3：</p>
  <p>兴趣爱好4：</p>
  <p>兴趣爱好5：</p>
  <p>兴趣爱好6：</p>
  <button>提交</button>
</div>
```
```

--------------------------------

### Action Component - Basic Usage and Styling

Source: https://baidu.github.io/amis/zh-CN/components/action

Demonstrates the fundamental usage of the Action component, including how to configure its size, theme, and icons for different visual appearances.

```APIDOC
## Action Component - Basic Usage and Styling

### Description

The Action component is a primary method for triggering actions on a page. This section covers its basic usage, including how to configure its size, theme, and icons.

### Method

N/A (This is a component configuration, not an API endpoint)

### Endpoint

N/A

### Parameters

#### Common Parameters

- **size** (string) - Optional - Configures the display size of the button (e.g., 'xs', 'sm', 'md', 'lg').
- **level** (string) - Optional - Sets the theme or style of the button (e.g., 'primary', 'danger', 'info').
- **primary** (boolean) - Optional - If true, makes the button the primary action style.
- **icon** (string) - Optional - Specifies an icon to display on the button. Can be a class name or a URL.
- **label** (string) - Optional - The text displayed on the button. If empty, only the icon is shown.

### Request Example

```json
{
  "type": "button",
  "label": "Click Me",
  "size": "md",
  "level": "primary",
  "icon": "fa fa-check"
}
```

### Response

N/A (This is a UI component, responses are handled by the triggered action.)
```

--------------------------------

### InputFormula Basic Usage Example

Source: https://baidu.github.io/amis/zh-CN/components/form/input-formula

Demonstrates the basic usage of the InputFormula component for entering formulas. It shows how to configure the formula input within a form. The component is currently in beta and subject to optimization.

```json
{
  "type": "form",
  "body": [
    {
      "type": "input-formula",
      "name": "formula",
      "label": "公式",
      "value": "SUM(1 , user.id)"
    }
  ]
}
```

--------------------------------

### Data Domain Initialization with initApi

Source: https://baidu.github.io/amis/zh-CN/docs/concepts/datascope-and-datachain?word=myquery

Shows how to initialize a component's data domain using an 'initApi' and the expected response format.

```APIDOC
## Data Domain Initialization with initApi

### Description
This example details how to initialize a component's data domain by configuring an `initApi`. The API response must follow a specific structure, including a `data` object containing key-value pairs.

### Method
GET (Implicitly called by Amis)

### Endpoint
`https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/initData`

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "type": "page",
  "initApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/initData",
  "body": "Hello ${text}"
}
```

### Response
#### Success Response (200)
- **status** (number) - API response status code (must be 0 for success).
- **msg** (string) - API response message.
- **data** (object) - A key-value object containing data to initialize the domain.
  - **text** (string) - Example data field.

#### Response Example
```json
{
  "status": 0,
  "msg": "",
  "data": {
    "text": "World!"
  }
}
```

#### Error Response Example (Invalid Data Format)
```json
{
  "status": 0,
  "msg": "",
  "data": "some string" 
}
```

```json
{
  "status": 0,
  "msg": "",
  "data": ["a", "b"]
}
```
```

--------------------------------

### Form Validation Detail and Text Replacement

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Configuration for hiding validation details and performing text replacements.

```APIDOC
## Hide Validate Failed Detail

### Description
Determines whether to hide detailed information in validation failure notifications for forms. Defaults to showing details.

### Property
`hideValidateFailedDetail: boolean` (default: `false`)

## Replace Text

### Description
Enables variable replacement and multi-language support. This feature, available since version 1.5.0, allows for string substitutions within configurations.

### Example
```javascript
let amisScoped = amis.embed(
  '#root',
  {
    type: 'page',
    body: {
      type: 'service',
      api: 'service/api'
    }
  },
  {},
  {
    replaceText: {
      service: 'http://localhost'
    }
  }
);
```
This example replaces the string `service` in the `api` field with `http://localhost`.

### Property
`replaceText: { [key: string]: string }`

## Replace Text Ignore Keys

### Description
Used in conjunction with `replaceText` to disable text replacement for specific fields. By default, fields like `type`, `name`, `mode`, `target`, and `reload` are ignored. You can provide an array of keys or a function to filter fields.

### Example
```javascript
let amisScoped = amis.embed(
  '#root',
  {
    type: 'page',
    body: {
      type: 'service',
      api: 'service/api'
    }
  },
  {},
  {
    replaceText: {
      service: 'http://localhost'
    },
    replaceTextIgnoreKeys: key => key === 'api'
  }
);
```

### Property
`replaceTextIgnoreKeys: string[] | (key: string) => boolean`
```

--------------------------------

### Amis Steps: Basic Usage Example

Source: https://baidu.github.io/amis/zh-CN/components/steps

Demonstrates the fundamental configuration of the Amis Steps component, showing how to define individual steps with titles and descriptions. This is the most basic way to implement a steps bar.

```json
{
  "type": "steps",
  "steps": [
    {
      "title": "First this is subTitle",
      "description": "this is description"
    },
    {
      "title": "2",
      "description": "Second"
    },
    {
      "title": "3",
      "description": "Last"
    }
  ]
}
```

--------------------------------

### API Event Data Example (GET)

Source: https://baidu.github.io/amis/zh-CN/docs/extend/tracker

This JSON snippet represents the `eventData` for an 'api' event when a GET request is made, typically from a CRUD component's API configuration. It includes the HTTP method, URL, and query parameters.

```json
{
  "eventType": "api",
  "eventData": {
    "method": "get",
    "url": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/sample?page=1&perPage=10",
    "query": {
      "page": 1,
      "perPage": 10
    }
  }
}

```

--------------------------------

### AMIS Documentation Component Styling Example

Source: https://baidu.github.io/amis/examples/event/input-table

Demonstrates styling for AMIS documentation components. This example showcases how to apply custom styles to elements within the AMIS documentation interface.

```html
<div class="documentation-component">
  <!-- Component content here -->
</div>
```

--------------------------------

### HBox Layout - Basic Usage

Source: https://baidu.github.io/amis/zh-CN/components/hbox

Demonstrates the fundamental usage of the HBox layout for arranging content in columns.

```APIDOC
## GET /websites/baidu_github_io_amis/hbox

### Description
This endpoint provides documentation and examples for the HBox layout component, which is used for arranging elements horizontally.

### Method
GET

### Endpoint
/websites/baidu_github_io_amis/hbox

### Parameters
None

### Request Example
None

### Response
#### Success Response (200)
- **content** (string) - Markdown content detailing the HBox layout, including basic usage and properties.

#### Response Example
```markdown
# HBox 布局

## 基本用法

Col A

w-md

## 属性表

属性名 | 类型 | 默认值 | 说明  
---|---|---|---
`type` | `string` | `"hbox"` | 指定为 HBox 渲染器  
`className` | `string` |  | 外层 Dom 的类名  
`gap` | `'xs' | 'sm' | 'base' | 'none' | 'md' | 'lg'` |  | 水平间距  
`valign` | `'top' | 'middle' | 'bottom' | 'between'` |  | 垂直对齐方式  
`align` | `'left' | 'right' | 'between' | 'center'` |  | 水平对齐方式  
`columns` | `Array` |  | 列集合  
`columns[x]` | `SchemaNode` |  | 成员可以是其他渲染器  
`columns[x].columnClassName` | `string` | `"wrapper-xs"` | 列上类名  
`columns[x].valign` | `'top' | 'middle' | 'bottom' | 'between'` |  | 当前列内容的垂直对齐  
```
```

--------------------------------

### Amis PopOver Basic Configuration Example

Source: https://baidu.github.io/amis/zh-CN/components/popover

Demonstrates the basic configuration of the PopOver component in Amis, used for truncating content and displaying the full version on hover or click. This simplified syntax is available in versions 1.6.5 and above.

```json
{
  "type": "tpl",
  "tpl": "${engine}",
  "popOver": {
    "body": "${engine}"
  }
}
```

--------------------------------

### Implement Alert Notification

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Provides a function to display alert messages to the user. It takes a string message as input and returns void.

```typescript
alert: (msg: string) => void;
```

--------------------------------

### Substring Extraction Filter (Template)

Source: https://baidu.github.io/amis/docs/concepts/data-mapping

Extracts a portion of a string. It takes a start index and an end index as parameters. For example, ${xxx | substring:0:2} extracts the first two characters of the string.

```template
${xxx | substring:start:end}
```

--------------------------------

### Load TinyMCE Plugins

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Enables loading TinyMCE plugins. This function is executed every time a TinyMCE editor is rendered, allowing for dynamic addition of plugins.

```typescript
loadTinymcePlugin: (editorInstance: any) => void;
```

--------------------------------

### Action Component - Download and Save to Local

Source: https://baidu.github.io/amis/zh-CN/components/action

Explains how to configure the Action component to initiate file downloads using AJAX or save content directly to the user's local storage.

```APIDOC
## Action Component - Download and Save to Local

### Description

This section covers the Action component's capabilities for file downloads and saving content locally. It details the configurations required for both scenarios, including API settings and response headers.

### Method

N/A (This is a component configuration, not an API endpoint)

### Endpoint

N/A

### Parameters

#### Download Parameters (v1.4.0+)

- **actionType** (string) - Required - Must be set to 'download'.
- **api** (Api Object or string) - Required - The API endpoint for the download. The API should return `Content-Disposition` header.
- **downloadFileName** (string) - Optional - Overrides the filename specified in the `Content-Disposition` header.

#### Save to Local Parameters (v1.10.0+)

- **actionType** (string) - Required - Must be set to 'save'.
- **api** (Api Object or string) - Required - The API endpoint providing the content to save. Does not require `Content-Disposition` header.
- **filename** (string) - Optional - Specifies the filename if it cannot be automatically determined from the URL.

### Request Example (Download)

```json
{
  "type": "button",
  "label": "Download Report",
  "actionType": "download",
  "api": "/api/generate_report",
  "downloadFileName": "report.pdf"
}
```

### Request Example (Save to Local)

```json
{
  "type": "button",
  "label": "Save Text",
  "actionType": "save",
  "api": "/api/get_text_content",
  "filename": "my_document.txt"
}
```

### Notes on Headers for Downloads:

- The API response must include `Content-Type` and `Content-Disposition: attachment; filename="your_filename.ext"` headers.
- For cross-origin requests, ensure `Access-Control-Expose-Headers: Content-Disposition` is set.
```

--------------------------------

### Load ECharts Plugins

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Allows loading custom ECharts plugins. This function is called after ECharts has been initially loaded and can return a Promise for asynchronous loading of plugins.

```typescript
loadChartExtends: (echartsInstance: any) => Promise<void> | void;
```

--------------------------------

### Amis Render Function Signature

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Explains the signature of the `render` function provided by Amis. It takes a schema, props, and environment configuration to render Amis components.

```typescript
(schema, props, env) => JSX.Element;

```

--------------------------------

### HTML Basic Structure Example

Source: https://baidu.github.io/amis/examples/form/ide

A basic HTML structure example including a title and a paragraph. This is a standard HTML5 document.

```html
<html><head><title>Hello</title></head><body><p>world</p></body></html>
```

--------------------------------

### Check if URL is Current

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Provides a function to determine if a given URL matches the current page's URL. It takes a URL string as input and returns a boolean.

```typescript
isCurrentUrl: (link: string) => boolean;
```

--------------------------------

### InputKV Basic Usage Example - Amis

Source: https://baidu.github.io/amis/zh-CN/components/form/input-kv

Demonstrates the basic usage of the InputKV component for editing object data with dynamic keys. It shows how to represent nested objects like CSS properties where keys are not fixed.

```json
{
  "css": {
    "width": 1,
    "height": 2
  }
}
```

--------------------------------

### Update Browser Location

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Provides a function to replace the current browser location. Similar to `jumpTo`, it takes a location object and an optional boolean to indicate if the history should be replaced.

```typescript
updateLocation: (location: any, replace?: boolean) => void;
```

--------------------------------

### Data Domain Initialization with `data` property

Source: https://baidu.github.io/amis/zh-CN/docs/concepts/datascope-and-datachain

Illustrates initializing a component's data domain by directly providing a `data` object.

```APIDOC
## POST /websites/baidu_github_io_amis

### Description
This example demonstrates initializing the data domain of a component by directly assigning a `data` object to its properties. This is an alternative to using an `initApi`.

### Method
POST

### Endpoint
/websites/baidu_github_io_amis

### Parameters
#### Query Parameters
None

#### Request Body
- **type** (string) - Required - The type of the component.
- **data** (object) - Required - An object containing the initial data for the component's data domain.
- **body** (string) - Required - The content to be rendered, which can include template variables.

### Request Example
```json
{
  "type": "page",
  "data": {
    "text": "World!"
  },
  "body": "Hello ${text}"
}
```

### Response
#### Success Response (200)
- **type** (string) - The type of the component.
- **body** (string) - The rendered content after variable substitution.

#### Response Example
```json
{
  "type": "page",
  "body": "Hello World!"
}
```
```

--------------------------------

### Copy Content to Clipboard

Source: https://baidu.github.io/amis/zh-CN/docs/start/getting-started

Provides a function to copy specified content to the user's clipboard. It supports options for silent operation and content format (e.g., 'text/html', 'text/plain').

```typescript
copy: (contents: string, options?: {silent: boolean, format?: string})
```