# # Ribbon button 组件

`<ribbon-button>` 具有与 Xbutton 类似的功能，但是相比于 Xbutton，ribbon-button 不但支持上下结构排列的图标和文本，同时也可以用作下拉框组件。

## # 代码示例

1. 简单 ribbon-button 示例：

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <ribbon-button text="simple ribbon button without icon"></ribbon-button>
                   </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>
                   <div>
                       <ribbon-button icon-class="fv__icon-toolbar-hand" text="button with built-in icon"></ribbon-button>
                       <ribbon-button icon-class="custom-icon-css-class" text="button with custom icon"></ribbon-button>
                   </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>

3. 禁用 ribbon-button

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

4. Click 事件处理

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <ribbon-button name="alert-btn" text="Click Me!"></ribbon-button>
                   </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>

5. 使用 controller 处理点击事件

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <ribbon-button name="alert-btn" text="Click Me!"></ribbon-button>
                   </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>

6. 使用 controller 指令

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <ribbon-button name="alert-btn" text="Click Me!" @controller="custom-module:ClickButtonController"></ribbon-button>
                   </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>

7. 嵌套下拉组件

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <ribbon-button icon-class="fx-icon-ribbon_view_read-32" text="read-aloud:read-aloud.read.text" class="inline">
                           <dropdown
                               icon-class="fv__icon-read-aloud-read"
                               separate="false"
                           >
                               <xbutton icon-class="fx-icon-ribbon_view_read-16" text="read-aloud:read-aloud.read.text"></xbutton>
                               <xbutton icon-class="fx-icon-ribbon_view_read_rate-32" text="read-aloud:read-aloud.rate.text"></xbutton>
                               <xbutton icon-class="fx-icon-ribbon_view_read-32" text="read-aloud:read-aloud.volume.text"></xbutton>
                               <xbutton icon-class="fx-icon-ribbon_view_read_pause-16" text="read-aloud:read-aloud.pause.text"></xbutton>
                           </dropdown>
                       </ribbon-button>
                   </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: [
                       '/lib/uix-addons/read-aloud'
                   ]
           });
       </script>

       {
           "iframeOptions": {
               "style": "height: 400px"
           }
       }

## # API

### # Ribbon button 对象属性

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

### # 方法

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

## # 事件

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