# # Xbutton 组件

Xbutton 是 UIExtension 的 button 组件。其可用于自定义图标，定义是否显示文本、是否禁用/启用 button 等。

## # 代码示例

1. 简单 xbutton 示例：

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton>simple button(character data)</xbutton>
                       <xbutton text="simple button(text property)"></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(){}
       });
           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>

2. 强制在内置工具栏组件中显示文本

       <html>
           <template id="layout-template">
               <webpdf>
                   <toolbar>
                       <xbutton class="fv__ui-toolbar-show-text-button">Force to show text</xbutton>
                       <xbutton icon-class="fv__icon-toolbar-hand">Text will be hidden</xbutton>
                   </toolbar>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <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>

3. 自定义 icon-class

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton icon-class="fv__icon-toolbar-hand">button with icon</xbutton>
                       <xbutton icon-class="custom-icon-css-class">button with custom icon</xbutton>
                   </div>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <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>
       <style>
           .custom-icon-css-class {
               background-repeat: no-repeat;
               background-position: center;
               background-image: url(data:image/png;charset=utf-8;base64, );
           }
       </style>

4. 禁用 button

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton disabled="true">disabled button</xbutton>
                   </div>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <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>

5. click 事件处理

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton name="alert-btn">Click Me!</xbutton>
                   </div>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <script>
           var CustomAppearance = UIExtension.appearances.Appearance.extend({
               getLayoutTemplate: function() {
                   return document.getElementById('layout-template').innerHTML;
               },
               getDefaultFragments: function() {
                   return [{
                       target: 'alert-btn',
                       config: {
                           callback: function() {
                               alert('click button!');
                           }
                       }
                   }];
               },
               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>

6. 使用 controller 处理单击事件

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton name="alert-btn">Click Me!</xbutton>
                   </div>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <script>
           var CustomAppearance = UIExtension.appearances.Appearance.extend({
               getLayoutTemplate: function() {
                   return document.getElementById('layout-template').innerHTML;
               },
               getDefaultFragments: function() {
                   return [{
                       target: 'alert-btn',
                       config: {
                           callback: UIExtension.controllers.Controller.extend({
                               handle: function() {
                                   alert("Click button!");
                               }
                           })
                       }
                   }];
               },
               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>

7. 使用 controller 指令

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton name="alert-btn" @controller="custom-module:ClickButtonController">Click Me!</xbutton>
                   </div>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <script>
           var module = UIExtension.PDFUI.module('custom-module', []);
           module.controller('ClickButtonController', {
               handle: function() {
                   alert("Click button!");
               }
           });

           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

### # Xbutton 对象属性

属性 | 描述 | 类型
--- | --- | ---
disabled | Button 禁用状态 | `boolean`
isVisible | Button 可见状态 | `boolean`

### # 方法

方法 | 描述 | 版本
--- | --- | ---
setText(text: String): void | 设置 button 文本。支持 I18n 条目 | 7.0
setIconCls(cssClass: String): void | 设置 button 图标的 css-class | 7.0
disable(): void | 禁用 button。禁用的 button 不会响应单击事件 | 7.0
enable(): void | 启用button。启用的button会响应单击事件 | 7.0
show(): void | 显示隐藏的button | 7.0
hide(): void | 隐藏button | 7.0
destroy(): void | 销毁button组件 | 7.0

## # 事件

名称 | 描述 | 示例 | 版本
--- | --- | --- | ---
click | 点击button时触发 | `button.on('click', () => {})` | 7.0