# I18n
# 自定义资源
请参阅该页面.
# 用法
# <text> 组件
<text> 是一个用于显示文本的组件。它支持 i18n 条目。在 DOM 树上，它不会创建新的 HTMLElement，而是创建文本节点并将其插入 DOM 树。字体样式需要包含在其他标签之外，并且通过 CSS 进行设置。
<html>
<template id="layout-template">
<webpdf>
<div>
<span class="span-with-text-component">
<!-- The text "inline text" will be displayed -->
<text>inline text</text>
</span>
<span class="span-with-text-component">
<!-- The text "Home" will be displayed -->
<text>toolbar.tabs.home.title</text>
</span>
</div>
<div class="fv__ui-body">
<viewer></viewer>
</div>
</webpdf>
</template>
</html>
<style>
.span-with-text-component {
color: red;
font-size: 18px;
font-style: bold;
}
</style>
<script>
var CustomAppearance = UIExtension.appearances.Appearance.extend({
getLayoutTemplate: function() {
return document.getElementById('layout-template').innerHTML;
},
disableAll: function(){}
});
var libPath = window.top.location.origin + '/lib';
var pdfui = new UIExtension.PDFUI({
viewerOptions: {
libPath: libPath,
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey
}
},
renderTo: document.body,
appearance: CustomAppearance,
addons: []
});
</script>
# data-i18n 属性
data-i18n 属性是显示 HTML 元素中文本的另一种方式，与 <text> 组件不同，data-i18n 将覆盖所有子节点并替换为文本节点。
<html>
<template id="layout-template">
<webpdf>
<div>
<!-- The text "inline text" will be displayed -->
<span class="span-with-text-component" data-i18n="inline text"> </span>
<!-- The text "Home" will be displayed -->
<span class="span-with-text-component" data-i18n="toolbar.tabs.home.title"> </span>
</div>
<div class="fv__ui-body">
<viewer></viewer>
</div>
</webpdf>
</template>
</html>
<style>
.span-with-text-component {
color: red;
font-size: 18px;
font-style: bold;
padding: 0 1em;
}
</style>
<script>
var CustomAppearance = UIExtension.appearances.Appearance.extend({
getLayoutTemplate: function() {
return document.getElementById('layout-template').innerHTML;
},
disableAll: function(){}
});
var libPath = window.top.location.origin + '/lib';
var pdfui = new UIExtension.PDFUI({
viewerOptions: {
libPath: libPath,
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey
}
},
renderTo: document.body,
appearance: CustomAppearance,
addons: []
});
</script>
# 支持的组件
<html>
<template id="layout-template">
<webpdf>
<div>
<div>
<!-- tab component example -->
<gtab group="example-tab" body="tab-body-1">toolbar.tabs.home.title</gtab>
<gtab group="example-tab" body="tab-body-2">toolbar.tabs.edit.title</gtab>
<gtab group="example-tab" body="tab-body-3">toolbar.tabs.comment.title</gtab>
</div>
<div>
<div name="tab-body-1" class="button-group">
<!-- The text "OK" will be displayed -->
<xbutton>dialog.ok</xbutton>
<xbutton text="dialog.ok"></xbutton>
<file-selector>dialog.ok</file-selector>
<file-selector text="dialog.ok"></file-selector>
<dropdown text="dialog.ok"> </dropdown>
</div>
<div name="tab-body-2"></div>
<div name="tab-body-3"></div>
</div>
</div>
<div class="fv__ui-body">
<viewer></viewer>
</div>
</webpdf>
</template>
</html>
<style>
.span-with-text-component {
color: red;
font-size: 18px;
font-style: bold;
padding: 0 1em;
}
.button-group {
display: flex;
}
.button-group .fv__ui-button-text {
width: 3em;
text-align: center;
}
</style>
<script>
var CustomAppearance = UIExtension.appearances.Appearance.extend({
getLayoutTemplate: function() {
return document.getElementById('layout-template').innerHTML;
},
disableAll: function() {
//
}
});
var libPath = window.top.location.origin + '/lib';
var pdfui = new UIExtension.PDFUI({
viewerOptions: {
libPath: libPath,
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey
}
},
renderTo: document.body,
appearance: CustomAppearance,
addons: []
});
</script>
# 通过API切换当前语言
<html></html>
<style>
.span-with-text-component {
color: red;
font-size: 18px;
font-style: bold;
padding: 0 1em;
}
</style>
<script>
UIExtension.PDFUI.module('custom', [])
.controller('SwitchLanguageController', {
mounted: function() {
this.updateButtonText();
},
updateButtonText: function() {
const pdfui = this.getPDFUI();
switch(pdfui.currentLanguage || navigator.language) {
case 'en':
case 'en-US':
this.component.setText('Swith to Chinese');
break;
case 'zh':
case 'zh-CN':
this.component.setText('切换为英文');
break;
}
},
handle: function() {
const pdfui = this.getPDFUI();
switch(pdfui.currentLanguage) {
case 'en':
case 'en-US':
pdfui.changeLanguage('zh-CN').then(() => {
this.updateButtonText();
});
break;
case 'zh':
case 'zh-CN':
pdfui.changeLanguage('en-US').then(() => {
this.updateButtonText();
});
break;
}
}
});
var CustomAppearance = UIExtension.appearances.AdaptiveAppearance.extend({
getDefaultFragments: function() {
return [{
target: 'home-tab-group-hand',
action: 'append',
template: '<xbutton class="fv__ui-toolbar-show-text-button" @controller="custom:SwitchLanguageController"></xbutton>'
}];
}
});
var libPath = window.top.location.origin + '/lib';
var pdfui = new UIExtension.PDFUI({
viewerOptions: {
libPath: libPath,
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey
}
},
renderTo: document.body,
appearance: CustomAppearance,
addons: []
});
</script>