# Layer component

Layer is a floating box component, which is typically used to implement dialogs, tooltips, right-click menus, and some other components that need to float on other elements.

# Code examples

# Getting started

<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>

# Create a layer with header

<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"
    }
}

# Create a draggable layer

<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"
    }
}

# Specify a parent node for the layer component

By default, the layer DOM nodes are appended to the end of the root component when the layer is displayed. This may cause the layer DOM hierarchy to display incorrectly in some cases. To avoid this problem, you can specify where to insert the layer DOM when calling show(). Here is the code example:

<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 component template

Template example:

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

The <layer>component template properties:

Property	Description	Type	Default value	Version
visible	Whether make the layer visible	`boolean`	`false`	7.0.0
modal	Whether it is a modal box	`boolean`	`false`	7.0.0
backdrop	Whether the modal box uses a black translucent background	`boolean`	`false`	7.0.0
class="center"	Center layer	`--`	`--`	7.0.0
class="centerv"	Vertically center layer	`--`	`--`	7.0.0
class="centerh"	Horizontally center layer	`--`	`--`	7.0.0
class="left"	Show the layer on the left	`--`	`--`	7.0.0
class="right"	Show the layer on the right	`--`	`--`	7.0.0
class="top"	Show the layer on the top	`--`	`--`	7.0.0
class="bottom"	Show the layer on the bottom	`--`	`--`	7.0.0

The <layer-header>component template properties :

Property	Description	Type	Default value	Version
title	Title contents	`string`	`''`	7.0.0
icon-class	Title icon	`string`	`''`	7.0.0

# Methods

Method	Description	Version
show(appendTo: HTMLElement): void	Append the layer components to a specified DOM node, and show.	7.0.0
open(appendTo: HTMLElement): void	Function same as show()	7.0.0
hide(): void	Hide layer	7.0.0
close(): void	Hide and destroy layer	7.0.0

# Events

Name	Description	Sample	Version
shown	Triggered after the layer displays	layer.on('shown', () => void)	7.0.0
hidden	Triggered after the layer is hidden	layer.on('hidden', () => void)	7.0.0
closed	Triggered after the layer is hidden and destroyed	layer.on('closed', () => void)	7.0.0

← Group component Number component →