Sidebar 组件
示例代码
基础示例
html
<html>
<template id="layout-template">
<webpdf>
<div class="btn-container">
<xbutton @controller="custom:SidebarActionController" action="collapse">collapse</xbutton>
<xbutton @controller="custom:SidebarActionController" action="collpase.totally">collapse totally</xbutton>
<xbutton @controller="custom:SidebarActionController" action="expand">expand</xbutton>
<xbutton @controller="custom:SidebarActionController" action="active.layers">active layers panel</xbutton>
<xbutton @controller="custom:SidebarActionController" action="active.bookmark">active bookmark panel
</xbutton>
</div>
<div class="fv__ui-body">
<sidebar name="my-sidebar">
<sidebar-panel name="sidebar-layers" icon-class="fv__icon-sidebar-page-manager"
title="Layers"></sidebar-panel>
<sidebar-panel name="sidebar-bookmark" active icon-class="fv__icon-sidebar-bookmark"
title="Bookmark"></sidebar-panel>
</sidebar>
<viewer></viewer>
</div>
</webpdf>
</template>
</html>
<style>
.btn-container {
display: flex;
padding: 10px 0;
}
.btn-container > .fv__ui-button + .fv__ui-button {
margin-left: 20px;
}
</style>
<script>
UIExtension.PDFUI.module('custom', [])
.controller('SidebarActionController', {
handle: function () {
var action = this.component.getAttribute('action');
var sidebar = this.getComponentByName('my-sidebar');
switch (action) {
case 'collapse':
sidebar.collapse();
break;
case 'collpase.totally':
sidebar.collapseTotally();
break;
case 'expand':
sidebar.expand();
break;
case 'active.layers':
sidebar.getComponentByName('sidebar-layers').active();
break;
case 'active.bookmark':
sidebar.getComponentByName('sidebar-bookmark').active();
break;
}
}
})
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
json
{
"iframeOptions": {
"style": "height: 500px"
}
}
1
2
3
4
5
2
3
4
5
Sidebar 宽度
html
<html>
<template id="layout-template">
<webpdf>
<p> Use a fixed pixel value as the initial width
<p>
<div>
<sidebar width="500" open>
<sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
<sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
</sidebar>
</div>
<p> Use the scale value of window.innerWidth as the initial width </p>
<div>
<sidebar width="0.5" open>
<sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
<sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
</sidebar>
</div>
<div class="hide">
<viewer></viewer>
</div>
</webpdf>
</template>
</html>
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
json
{
"iframeOptions": {
"style": "height: 500px"
}
}
1
2
3
4
5
2
3
4
5
展开和折叠 sidebar
html
<html>
<template id="layout-template">
<webpdf>
<p>Expand sidebar by default</p>
<div>
<sidebar open>
<sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
<sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
</sidebar>
</div>
<p>Collapse sidebar by default/p>
<div>
<sidebar>
<sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
<sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
</sidebar>
</div>
<div class="hide">
<viewer></viewer>
</div>
</webpdf>
</template>
</html>
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
json
{
"iframeOptions": {
"style": "height: 500px"
}
}
1
2
3
4
5
2
3
4
5
Sidebar 按钮提示信息
将鼠标悬停在 button 上,以显示工具提示信息。
html
<html>
<template id="layout-template">
<webpdf>
<div>
<sidebar open>
<sidebar-panel @tooltip tooltip-title="Layers sidebar panel" tooltip-placement="right"
icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
<sidebar-panel @tooltip tooltip-title="Bookmark sidebar panel" tooltip-placement="right" active
icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
</sidebar>
</div>
<div class="hide">
<viewer></viewer>
</div>
</webpdf>
</template>
</html>
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
json
{
"iframeOptions": {
"style": "height: 500px"
}
}
1
2
3
4
5
2
3
4
5
使用 JavaScript 动态插入一个 sidebar 面板
html
<html>
<template id="layout-template">
<webpdf>
<div>
<xbutton @controller="custom:InsertSidebarController">Add sidebar panel</xbutton>
</div>
<div>
<sidebar open name="sidebar-component-name">
<sidebar-panel @tooltip tooltip-title="Layers sidebar panel" tooltip-placement="right"
icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
<sidebar-panel @tooltip tooltip-title="Bookmark sidebar panel" tooltip-placement="right" active
icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
</sidebar>
</div>
<div class="hide">
<viewer></viewer>
</div>
</webpdf>
</template>
</html>
<script>
UIExtension.PDFUI.module('custom', [])
.controller('InsertSidebarController', {
mounted: function () {
this.count = 0;
},
handle: function () {
if (this.count >= 3) {
return;
}
this.count++;
this.getPDFUI().getComponentByName('sidebar-component-name')
.then(sidebar => {
sidebar.append(
'<sidebar-panel icon-class="fv__icon-sidebar-bookmark" title="Dynamic sidebar panel"></sidebar-panel>'
);
})
}
});
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
json
{
"iframeOptions": {
"style": "height: 300px"
}
}
1
2
3
4
5
2
3
4
5
API
Sidebar 组件模板
模板示例:
html
<!-- The width value smaller than 1 means that is a scale value of window.innerWidth -->
<sidebar open width="500">
<sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
<sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
</sidebar>
1
2
3
4
5
2
3
4
5
sidebar
组件模板属性:
属性 | 描述 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
open | 扩展状态 | boolean | false | 7.0.0 |
width | 如果展开的 Sidebar 的宽度大于或等于1,则将作为像素值,如果小于1,则将其作为比例值乘以 window.innerwidth 来进行计算,这样可以实现宽度自适应 | number | 310 px | 7.0.0 |
sidebar-panel
属性:
属性 | 描述 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
title | 展开的 sidebar-panel 顶部显示的字符串 | string | '' | 7.0.0 |
active | 是否激活 sidebar-panel | boolean | false | 7.0.0 |
Sidebar 对象属性
sidebar
对象属性:
属性 | 描述 | 类型 |
---|---|---|
disabled | 是否禁用 sidebar | boolean |
isVisible | sidebar 是否可见 | boolean |
status | 三种状态:'SidebarComponent.STATUS_COLLAPSED' 'SidebarComponent.STATUS_COLLAPSED_TOTALLY' 'SidebarComponent.STATUS_EXPANDED' | string |
sidebar-panel
对象属性:
属性 | 描述 | 类型 |
---|---|---|
disabled | 是否禁用 sidebar-panel | boolean |
isVisible | sidebar-panel 是否可见 | boolean |
isActive | sidebar-panel 是否处于活动状态 | boolean |
方法
sidebar
方法:
方法 | 描述 | 版本 |
---|---|---|
isCollapsed(): boolean | 如果其状态不等于sidebarcomponent.status_expanded ,则返回 true | 7.0.0 |
expand(width: number): void | 扩展 sidebar | 7.0.0 |
collapse(): void | 隐藏 sidebar-panel,同时 sidebar buttons 可见 | 7.0.0 |
collapseTotally(): void | 隐藏 sidebar-panel,同时sidebar buttons 不可见 | 7.0.0 |
sidebar-panel
方法:
方法 | 描述 | 版本 |
---|---|---|
disable(): void | 禁用 sidebar-panel。一旦禁用,则不能被激活 | 7.0 |
enable(): void | 启用 sidebar-panel | 7.0 |
show(): void | 显示隐藏的 sidebar-panel | 7.0 |
hide(): void | 隐藏 sidebar-panel | 7.0 |
destroy(): void | 销毁 sidebar-panel | 7.0 |
事件
Sidebar
事件:
事件名称 | 描述 | 示例 | 版本 |
---|---|---|---|
COMPONENT_EVENTS.EXPAND | 当扩展 sidebar 时触发 | sidebar.on(COMPONENT_EVENTS.EXPAND, () => void) | 7.0.0 |
COMPONENT_EVENTS.COLLAPSE | 当收缩 sidebar 时触发 | sidebar.on(COMPONENT_EVENTS.COLLAPSE, () => void) | 7.0.0 |
Sidebar-panel
事件:
事件名称 | 描述 | 示例 | 版本 |
---|---|---|---|
active | 当激活 sidebar-panel 时触发 | sidebarPanel.on('active', () => {}) | 7.0.0 |
deactive | 当停用 sidebar-panel 时触发 | sidebarPanel.on('deactive', () => {}) | 7.0.0 |
shown | 当显示 sidebar-panel 时触发 | sidebarPanel.on('shown', () => {}) | 7.0.0 |
hidden | 当隐藏 sidebar-panel 时触发 | sidebarPanel.on('hidden', () => {}) | 7.0.0 |