# # Appearance

`Appearance` is a class that defines the appearance of the UI, it provides a template to specify the layout of the UI and fragments to modify the layout and control the logic of the components.

Following is the declaration of the `Appearance` class, its sub-classes should override these methods to define new appearance:

    class Appearance {
        constructor(pdfui);
        // Layout template.
        public getLayoutTemplate: () => string;
        // Return fragment configuration.
        public getDefaultFragments: () => UIFragmentOptions[];
        // Triggered before inserting the component into the DOM tree.
        public beforeMounted: (root: Component) => void
        // Triggered after inserting the component into the DOM tree.
        public afterMounted: (root: Component) => void
        // Called to disable the component after closing PDF documents.
        protected disableAll: () => void;
        // Called to enable the component after closing PDF documents.
        protected enableAll: () => void;
    }

## # Custom Appearance Example

    <html>
        <template id="layout-template">
            <webpdf>
                <div name="toolbar" style="display: flex; flex-direction: row; padding: 6px;">
                    <open-localfile-button></open-localfile-button>
                    <download-file-button></download-file-button>
                </div>
                <div class="fv__ui-body">
                    <viewer @touch-to-scroll></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            getDefaultFragments: function() {
                return [{
                    target: 'toolbar',
                    action: 'append',
                    template: `<xbutton style="margin: 0 10px">appended via fragment configuration</xbutton>`
                }];
            },
            beforeMounted: function(root) {
                this.toolbarComponent = root.getComponentByName('toolbar')
            },
            disableAll: function() {
                this.toolbarComponent.disable();
            },
            enableAll: function() {
                this.toolbarComponent.enable();
            }
        });
        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"
        }
    }

## # Device Adaptation

If the UI layout needs to be adaptive to the devices, you should determine the device type based on the characteristic value of your current device, and then pass the different appearance instance to PDFUI. Please refer to the following example:

The following code can be used to simulate the operation of different devices using the device mode of Chrome DevTool on the desktop Chrome browser.

    <html>
    </html>
    <script>
        var mobileAppearance = UIExtension.appearances.MobileAppearance;
        var desktopAppearance = UIExtension.appearances.RibbonAppearance;
        var tabletAppearance = UIExtension.appearances.RibbonAppearance;

        var isDesktop = PDFViewCtrl.DeviceInfo.isDesktop;
        var isMobile = PDFViewCtrl.DeviceInfo.isMobile;

        var libPath = window.top.location.origin + '/lib';

        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                // Provide different appearance depending on the device type.
                appearance: isDesktop? desktopAppearance : isMobile ? mobileAppearance : tabletAppearance,
                addons: []
        });
    </script>

    {
        "iframeOptions": {
            "style": "height: 500px",
            "injectCss": [
                "/lib/UIExtension.vw.css"
            ]
        }
    }

## # Built-in appearances

    // desktop appearance
    UIExtension.appearances.RibbonAppearance
    // mobile appearance
    UIExtension.appearances.MobileAppearance
    // select ribbon or mobile appearance according to the device type（support both desktop and mobile)
    UIExtension.appearances.AdaptiveAppearance