# # @device

`@device` 指令用于指定设备类型列表，并限制组件只能在标记的(指定的)设备上运行。如果当前运行的设备类型与任何标记的设备都不匹配，那么带有设备标记的组件将不会被解析，并且调用 `getComponentByName()` 或者 `querySelector` 将无法检索组件。

## # 设备类型

名称 | 描述
--- | ---
mobile | mobile devices
tablet | tablet devices
desktop | desktop
touch | touchable screen devices
android | android devices
iphone | iphones
ios | devices with iOS OS
ipad | ipad

## # 示例

    <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` 示例

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