@antdigital/avatar-ampe-sdk

v0.0.1

Published

2 months ago

数字人 ampe sdk

0High
0Medium
0Low

无障碍工具条接入文档

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 | 否 | '' | 无障碍工具条介绍及操作说明网页地址 | - | | | | | | | |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme