Adyen 文档查看器
Adyen Document Viewer为您提供了一种灵活的方式来渲染Adyen生成的文档,可以嵌入您的网站.
安装
节点软件包管理器( 建议)
-
npm install @adyen/adyen-document-viewer --save -
导入 Adyen 文档查看器节点包 输入您的应用程序
import AdyenDocumentViewer from '@adyen/adyen-document-viewer'; import '@adyen/adyen-document-viewer/dist/adyen-document-viewer.min.css';
光盘N
包含脚本和样式表到 a .html 文件
<script src="https://unpkg.com/@adyen/adyen-document-viewer@^1.0.0"></script>
<link
rel="stylesheet"
href="https://unpkg.com/@adyen/adyen-document-viewer@^1.0.0/dist/adyen-document-viewer.min.css"
/>
注: 通过选择这种方法, AdyenDocumentViewer 课程将在您的应用程序中在全球开放.
使用量
-
该组件需要一个HTML元素来渲染其内容. 创建实例
AdyenDocumentViewer并传递 HTML 元素本身或一个querySelector瞄准它的字符串值const documentViewer = new AdyenDocumentViewer('#test'); -
打电话
render方法,并将文档作为参数传递documentViewer.render(document);
配置选项
您可以自定义行为 AdyenDocumentViewer 在初始化过程中通过选项.
| 选项 | 说明 | 默认 |
|---|---|---|
onExpandSection | 当区域被扩展时触发回调函数 . | undefined |
multiple | 允许多个部分同时被扩展. | false |
showSectionNumbering | 启用或禁用分区编号 . | false |
您可以在创建实例时以选项为第二个参数提供对象 AdyenDocumentViewer数字 :
const options = {
onExpandSection: (sectionTitle) => console.log(`Section ${sectionTitle} expanded`),
multiple: true,
showSectionNumbering: true,
};
const documentViewer = new AdyenDocumentViewer('#test', options);
样式
Adyen Document Viewer具有可主题性,并使用CSS变量可以被推翻以达到所期望的风格. 应增加顶部 .adyen-document-viewer 课.
覆盖样式示例
-
创建
override.css与您想要样式的变量.adyen-document-viewer { --adv-background-color: #ff8888; --adv-heading-font-size: 48px; } -
确保导入
override.css导入主 CSS 库后import 'adyen-document-viewer/dist/adyen-document-viewer.min.css'; import './override.css';
可用的 CSS 变量
/* Colors */
--adv-color-white: #fff; /* backgrounds */
--adv-color-black: #00112c; /* text color */
--adv-color-grey-10: #f3f6f9; /* background, hover */
--adv-color-grey-20: #dce0e5; /* borders, active */
--adv-color-blue: #06f; /* links */
/* Background */
--adv-background-color: var(--adv-color-white);
/* Fonts */
--adv-text-font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu,
cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--adv-text-color: var(--adv-color-black);
--adv-text-font-weight-regular: 400;
--adv-text-font-weight-semi-bold: 600;
--adv-text-line-height: 1.4;
--adv-text-font-size-medium: 15px;
--adv-text-font-size-small: 13px;
/* Borders */
--adv-border-width: 1px;
--adv-border-style: solid;
--adv-border-color: var(--adv-color-grey-20);
--adv-border-radius: 6px;
/* Transition */
--adv-transition-duration: 0.1s;
--adv-transition-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
/* Focus ring */
--adv-focus-ring-transition-duration: var(--adv-transition-duration);
--adv-focus-ring-timing-function: var(--adv-transition-function);
--adv-focus-ring-color: rgba(0, 102, 255, 0.4);
--adv-focus-ring-distance: 1px;
--adv-focus-ring-width: 3px;
--adv-focus-ring-z-index: 1;
--adv-focus-ring-background-color: var(--adv-color-white);
/* Spacing */
--adv-spacing-0: 0;
--adv-spacing-2: 2px;
--adv-spacing-4: 4px;
--adv-spacing-8: 8px;
--adv-spacing-12: 12px;
--adv-spacing-16: 16px;
--adv-spacing-24: 24px;
--adv-spacing-32: 32px;
--adv-spacing-40: 40px;
--adv-spacing-48: 48px;
/* Accordion */
--adv-accordion-border-radius: var(--adv-border-radius);
--adv-accordion-item-border-color: var(--adv-border-color);
--adv-accordion-item-border-width: var(--adv-border-width);
--adv-accordion-between-items-border-color: transparent;
--adv-accordion-header-color: var(--adv-color-black);
--adv-accordion-header-padding: var(--adv-spacing-16);
--adv-accordion-header-font-weight: var(--adv-text-font-weight-semi-bold);
--adv-accordion-header-hover-background-color: var(--adv-color-grey-10);
--adv-accordion-header-active-background-color: var(--adv-color-grey-20);
--adv-accordion-header-border-radius: var(--adv-spacing-4);
--adv-accordion-title-color: inherit;
--adv-accordion-toggle-margin: var(--adv-spacing-2) var(--adv-spacing-16) 0 0;
--adv-accordion-toggle-padding: 0;
--adv-accordion-toggle-width: var(--adv-spacing-12);
--adv-accordion-content-margin: 0 0 var(--adv-spacing-24);
--adv-accordion-content-padding: 0 var(--adv-spacing-16) 0 calc(
var(--adv-spacing-32) + var(--adv-spacing-12)
);
--adv-accordion-content-closed-margin: 0;
--adv-accordion-transition-duration: var(--adv-transition-duration);
--adv-accordion-transition-function: var(--adv-transition-function);
--adv-accordion-transition-property: margin, height, padding;
--adv-accordion-css-animated-max-height: 500px;
--adv-accordion-css-animated-transition-duration: var(--adv-accordion-transition-duration);
--adv-accordion-css-animated-transition-property: margin, max-height;
/* Heading */
--adv-heading-font-size: 32px;
--adv-heading-font-weight: var(--adv-text-font-weight-semi-bold);
--adv-heading-line-height: 40px;
--adv-heading-text-align: left;
--adv-heading-2-font-size: 24px;
--adv-heading-2-font-weight: var(--adv-text-font-weight-semi-bold);
--adv-heading-2-line-height: 32px;
/* Icon */
--adv-icon-color: var(--adv-color-black);
/* Link */
--adv-link-color: var(--adv-color-blue);
--adv-link-background-color: transparent;
--adv-link-text-decoration: none;
--adv-link-hover-text-decoration: underline;
--adv-link-active-color: var(--adv-link-color);
--adv-link-focus-outline: none;
--adv-link-visited-color: var(--adv-link-color);
--adv-link-inherit-font-size: inherit;
--adv-link-inherit-color: inherit;
--adv-link-underline-color: inherit;
/* List */
--adv-list-margin: 0;
--adv-list-padding: 0 0 0 18px;
--adv-list-nested-padding: var(--adv-list-padding);
--adv-list-item-padding: 0 0 0 var(--adv-spacing-4);
--adv-list-no-markers-padding: 0;
--adv-list-no-markers-list-style: none;
/* Section */
--adv-section-background-color: var(--adv-color-grey-10);
--adv-section-border-radius: var(--adv-border-radius);
--adv-section-margin: var(--adv-spacing-24) 0 0 0;
--adv-section-padding: var(--adv-spacing-16);
/* Table */
--adv-table-width: 100%;
--adv-table-margin: 0;
--adv-table-padding: 0;
--adv-table-border: none;
--adv-table-vertical-align: top;
--adv-table-line-height: 16px;
--adv-table-row-border-width: var(--adv-border-width);
--adv-table-row-border-style: var(--adv-border-style);
--adv-table-row-border-color: var(--adv-border-color);
--adv-table-row-border: var(--adv-table-row-border-width) var(--adv-table-row-border-style) var(--adv-table-row-border-color);
--adv-table-row-changed-background-color: var(--adv-color-grey-10);
--adv-table-cell-padding-top: var(--adv-spacing-12);
--adv-table-cell-padding-right: calc(var(--adv-spacing-16) + var(--adv-spacing-24));
--adv-table-cell-padding-bottom: var(--adv-spacing-12);
--adv-table-cell-padding-left: var(--adv-spacing-16);
--adv-table-cell-padding: var(--adv-table-cell-padding-top) var(--adv-table-cell-padding-right) var(
--adv-table-cell-padding-bottom
) var(--adv-table-cell-padding-left);
--adv-table-cell-text-align: left;
--adv-table-first-column-padding-left: var(--adv-spacing-24);
--adv-table-condensed-cell-padding-y: var(--adv-spacing-8);
--adv-table-condensed-cell-padding: var(--adv-table-condensed-cell-padding-y) var(
--adv-table-cell-padding-right
)
var(--adv-table-condensed-cell-padding-y) var(--adv-table-cell-padding-left);
--adv-table-condensed-font-size: var(--adv-text-font-size-small);
发展
管理发展环境:
-
克隆 此寄存器。 。 。 .
-
通过运行安装依赖性 :
npm install -
运行开发环境, 启动服务器监听 http://localhost:5174 (英语)数字 :
npm start
支助
如果你有特性请求 或发现错误或技术问题, 联系我们的支援队。 。 。 .
捐款
我们强烈鼓励你为我们的资料库作出贡献。 发现更多的在我们 捐款准则。 。 。 .
许可证
麻省理工学院执照. 更多信息,请参见 自由主义 文档.