# # @device

The `@device` directive is used to specify a list of device types and to restrict components to run only on the marked (specified) devices. If the currently running device type doesn't match with any of the marked devices, the component with the device markers won't be resolved and calling `getComponentByName()` or `querySelector` will fail to retrieve the components.

## # Device Type

Name | Description
--- | ---
mobile | mobile devices
tablet | tablet devices
desktop | desktop
touch | touchable screen devices
android | android devices
iphone | iphones
ios | devices with iOS OS
ipad | ipad

## # Example

    <html>
        <template id="layout-template">
            <webpdf>
                <div>
                    <xbutton name="desktop-button" @device="desktop">Works on desktop only</xbutton>
                    <xbutton name="mobile-tablet-button" @device="mobile,tablet">Works on mobile and tablet</xbutton>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){},
            afterMounted: function(rootComponent) {
                // In addition to the desktop, other devices will return null
                var desktopButton = rootComponent.getComponentByName('desktop-button');
                // in addition to mobile and tablet device, other devices will return null;
                var mobileTabletButton = rootComponent.getComponentByName('mobile-tablet-button');
                console.info(desktopButton, mobileTabletButton);
            }
        });
        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.invert` example

    <html>
        <template id="layout-template">
            <webpdf>
                <div>
                    <xbutton name="desktop-button" @device.invert="desktop">Doesn't work on desktop</xbutton>
                    <xbutton name="mobile-tablet-button" @device.invert="mobile,tablet">Doesn't work on mobile and tablet</xbutton>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){},
            afterMounted: function(rootComponent) {
                // In desktop, this will return null
                var desktopButton = rootComponent.getComponentByName('desktop-button');
                // in mobile and tablet device will return null
                var mobileTabletButton = rootComponent.getComponentByName('mobile-tablet-button');
                console.info(desktopButton, mobileTabletButton);
            }
        });
        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"
        }
    }