# # 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="fv__ui-body">
                    <viewer></viewer>
                </div>
                <template>
                    <layer name="my-layer1" class="center my-layer" visible>
                        <layer-header @draggable="{type:'parent'}" title="Click header area to drag" icon-class="fv__icon-toolbar-print"></layer-header>
                    </layer>
                    <layer name="my-layer2" class="center my-layer" @draggable visible>
                        <layer-header title="Click anywhere on the box to drag" 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>
        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