# Layer 组件

Layer 是一个浮动框组件，通常用来实现对话框、工具提示框、右键菜单等需要浮动在其它元素上的组件。

# 代码示例

# 入门示例

<html>
    <template id="layout-template">
        <webpdf>
            <div class="flex-container">
                <xbutton action="show-layer" @controller="custom:ShowHideLayerController">Click to show layer</xbutton>
                <xbutton action="hide-layer" @controller="custom:ShowHideLayerController">Click to hide layer</xbutton>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
            <template>
                <layer name="my-layer" class="center">
                    <text>Hello! I'm a layer component!</text>
                </layer>
            </template>
        </webpdf>
    </template>
</html>
<style>
    .flex-container {
        display: flex;
        justify-content: space-between;
    }
</style>
<script>
    UIExtension.PDFUI.module('custom', [])
        .controller('ShowHideLayerController', {
            handle: function() {
                const layer = this.getComponentByName('my-layer');
                const action = this.component.getAttribute('action');
                switch(action) {
                    case 'show-layer':
                        layer.show();
                        break;
                    case 'hide-layer':
                        layer.hide();
                        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>

# 带有标题和关闭按钮的对话框

<html>
    <template id="layout-template">
        <webpdf>
            <div class="flex-container">
                <xbutton target-layer="my-layer" @controller="custom:ShowLayerController">Click to show layer</xbutton>
                <xbutton target-layer="my-layer-2" @controller="custom:ShowLayerController">Click to show layer with custom header</xbutton>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
            <template>
                <layer name="my-layer" class="center my-layer">
                    <layer-header title="Layer Title" icon-class="fv__icon-toolbar-print"></layer-header>
                </layer>
                <layer name="my-layer-2" class="center my-layer">
                    <div class="my-custom-layer-header">
                        <i class="fv__icon-toolbar-print"></i>
                        <h2>Custom layer header</h2>
                    </div>
                </layer>
            </template>
        </webpdf>
    </template>
</html>
<style>
    .my-layer {
        width: 400px;
        height: 300px;
    }
    .my-custom-layer-header {
        display: flex;
        align-items: center;
    }
    .my-custom-layer-header i{
        display: inline-block;
        width: 32px;
        height: 32px;
    }
    .my-custom-layer-header h2 {
        flex: 1;
        margin: 0 0 0 1em;
    }
    .flex-container {
        display: flex;
        justify-content: space-between;
    }
</style>
<script>
    UIExtension.PDFUI.module('custom', [])
        .controller('ShowLayerController', {
            handle: function() {
                const layerName = this.component.getAttribute('target-layer')
                const layer = this.getComponentByName(layerName);
                layer.show();
            }
        });
    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>

{
    "iframeOptions": {
        "style": "height: 500px"
    }
}

# 创建可拖动的对话框

# 创建模态对话框

<html>
    <template id="layout-template">
        <webpdf>
            <div class="flex-container">
                <xbutton @controller="custom:ShowLayer1Controller">Click to show modal layer 1</xbutton>
                <xbutton @controller="custom:ShowLayer2Controller">Click to show modal layer 2</xbutton>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
            <template>
                <layer name="my-layer-1" class="center my-layer" modal backdrop>
                    <layer-header title="Modal layer with backdrop" icon-class="fv__icon-toolbar-print"></layer-header>
                </layer>
                <layer name="my-layer-2" class="center my-layer" modal>
                    <layer-header title="Modal layer without backdrop" icon-class="fv__icon-toolbar-print"></layer-header>
                </layer>
            </template>
        </webpdf>
    </template>
</html>
<style>
    .my-layer {
        width: 400px;
        height: 300px;
    }
    .flex-container {
        display: flex;
        justify-content: space-between;
    }
</style>
<script>
    UIExtension.PDFUI.module('custom', [])
        .controller('ShowLayer1Controller', {
            handle: function() {
                const layer = this.getComponentByName('my-layer-1');
                layer.show();
            }
        })
        .controller('ShowLayer2Controller', {
            handle: function() {
                const layer = this.getComponentByName('my-layer-2');
                layer.show();
            }
        });
    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>

{
    "iframeOptions": {
        "style": "height: 500px"
    }
}

# 为 layer 组件指定父节点

默认情况下，layer DOM 节点被添加到根组件的尾部。在某些情况下，这可能会导致 layer DOM 层次结构显示不正确。为了避免这个问题，可以在调用 show() 函数时指定 layer DOM 的插入位置。以下是代码示例:

<html>
    <template id="layout-template">
        <webpdf>
            <div class="flex-container">
                <xbutton action="show-layer" @controller="custom:ShowHideLayerController">Click to show layer</xbutton>
                <xbutton action="hide-layer" @controller="custom:ShowHideLayerController">Click to hide layer</xbutton>
            </div>
            <div class="fv__ui-body">
                <viewer></viewer>
            </div>
            <template>
                <layer name="my-layer" class="center">
                    <text>Hello! I'm a layer component!</text>
                </layer>
            </template>
        </webpdf>
    </template>
</html>
<style>
    .flex-container {
        display: flex;
        justify-content: space-between;
    }
</style>
<script>
    UIExtension.PDFUI.module('custom', [])
        .controller('ShowHideLayerController', {
            handle: function() {
                const layer = this.getComponentByName('my-layer');
                const action = this.component.getAttribute('action');
                switch(action) {
                    case 'show-layer':
                        layer.show(document.body); // The layer will be appended to `document.body` when it is displayed.
                        break;
                    case 'hide-layer':
                        layer.hide();
                        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>

# API

# Layer 组件模板

模板示例：

<layer class="center" visible modal backdrop>
    <layer-header title="" icon-class="fv__icon-toolbar-print"></layer-header>
</layer>

<layer> 组件模板属性:

属性	描述	类型	默认值	版本
visible	Layer 是否可见	`boolean`	`false`	7.0.0
modal	是否为模态框	`boolean`	`false`	7.0.0
backdrop	模态框是否使用半透明背景，开启该项会自动开启 modal	`boolean`	`false`	7.0.0
class="center"	layer 居中	`--`	`--`	7.0.0
class="centerv"	layer 垂直居中	`--`	`--`	7.0.0
class="centerh"	layer 水平居中	`--`	`--`	7.0.0
class="left"	在左侧显示 layer	`--`	`--`	7.0.0
class="right"	在右侧显示 layer	`--`	`--`	7.0.0
class="top"	在顶部显示 layer	`--`	`--`	7.0.0
class="bottom"	在底部显示 layer	`--`	`--`	7.0.0

<layer-header> 组件模板属性:

属性	描述	类型	默认值	版本
title	标题内容	`string`	`''`	7.0.0
icon-class	标题图标	`string`	`''`	7.0.0

# 方法

方法	描述	版本
show(appendTo: HTMLElement): void	将 layer 组件添加到指定的 DOM 节点并显示	7.0.0
open(appendTo: HTMLElement): void	同 show() 函数	7.0.0
hide(): void	隐藏 layer	7.0.0
close(): void	隐藏和销毁 layer	7.0.0

# 事件

名称	描述	示例	版本
shown	当显示 layer 后触发	layer.on('shown', () => void)	7.0.0
hidden	当 layer 被隐藏后触发	layer.on('hidden', () => void)	7.0.0
closed	当 layer 被隐藏和销毁后触发	layer.on('closed', () => void)	7.0.0

← Group 组件 Number 组件 →