@antdigital/avatar-ampe-sdk

数字人 ampe sdk

latest

npm

Version: 0.0.1

Version published: 8 months ago

Weekly downloads: 4

Maintainers: 5

Weekly downloads

Created: 8 months ago

Source

无障碍工具条接入文档

Badges

到海兔查看「@alipay-inc/basic-playground 的包信息、产物预览、依赖信息、历史版本」

Package信息

包名：@alipay-inc/mpaas-atb

类型：公共类库

适用场景：Web 网页（ PC 端优先）

适配浏览器：Chrome、Safari等现代浏览器、E11+

接入配置

mpaas-atb 提供两种接入方式：HTML文件内 script 标签引入及代码内 npm 包引入

HTML标签引入：

在 HTML 文件内，进行一下操作

1、<head> 中添加一下代码进行引用

<link rel="stylesheet" type="text/css" href="https://unpkg.com/@alipay-inc/mpaas-atb/dist/index.css">
<script type="text/javascript" src="https://unpkg.com/@alipay-inc/mpaas-atb/dist/index.js"></script>

2、<body>末尾处，添加script标签，进行工具条配置初始化

<script type="text/javascript">  
const mpaasAtb = new MpaasAtb();    // 初始化配置参数⻅下方“配置参数”一节   
 mpaasAtb.init({}); 
 </script>

3、在调用工具条的 dom 元素上绑定事件例如：

<button onclick="mpaasAtb.toggle()">触发</button>

其中方法可以为 mpaasAtb.toggle()，或单独的mpaasAtb.open() / mpaasAtb.close() 也可以

npm标签引入

1、添加依赖

npm install @alipay-inc/mpaas-atb

2、在文件项目源码内，用 npm 的方式引入（以 es6 语法为例）

import MpaasAtb from '@alipay-inc/mpaas-atb';
...// 初始化，配置参数⻅下方“配置参数”一节
const mpaasAtb = new MpaasAtb(); 
mpaasAtb.init({   
baseUrl: 'http://mappcenter.finsitcs.com'  
});
// 调用方法  
mpaasAtb.toggle();  
mpaasAtb.open();  
mpaasAtb.close();

配置参数

调用 init 方法时，配置参数如下：

属性名	类型	必填	默认值	说明	备注
baseUrl	string	否	(公有云默认路径)	请求路径host	-
container	DOM	否	document.body	使用无障碍工具条的最高层容器	-
readerBaseUrl	string	否		朗读文本接口地址	-
explanationUrl	string	否	''	无障碍工具条介绍及操作说明网页地址	-

FAQs

What is @antdigital/avatar-ampe-sdk?

Is @antdigital/avatar-ampe-sdk popular?

Is @antdigital/avatar-ampe-sdk well maintained?

Package last updated on 20 Oct 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install