Foxit PDF SDK For Web - V10.0.0

# 布局模板

# 示例

在Foxit PDF SDK For Web中，模板由包含UIExtension特定元素、属性和指令的HTML编写。UIExtension 将布局模板与来自组件、控制器和指令的信息相结合，以在浏览器中渲染 UI。以下代码段展示了带有 UIExtension 组件和指令的模板。

<webpdf>
    <div class="toolbar" style="display:flex;flex-direction:row;padding:6px">
        <print:print-ribbon-button></print:print-ribbon-button>
        <ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title" @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter" >toolbar.create.typewriter</ribbon-button>
    </div>
    <div class="fv__ui-body">
        <viewer @touch-to-scroll></viewer>
    </div>
    <template name="template-container">
        <print:print-dialog></print:print-dialog>
    </template>
</webpdf>

点击 "run" 按钮来查看运行结果：

# 布局模板格式说明

<!-- 布局模板必须以 <webpdf> 为根组件 -->
<webpdf>
    <!-- 布局模板支持所有html标签和属性 -->
    <div class="toolbar" style="display:flex;flex-direction:row;padding:6px">
        <!-- 冒号前缀是组件模块的名字，组件名字和模快名必须是小写 -->
        <print:print-ribbon-button></print:print-ribbon-button>

        <!-- @开头的参数用于标记指令，@后面跟随的是指令的名称，如果指令注册在非根模快中，则指令名需要以 @module-name:directive-name 的格式编写 -->
        <ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title" @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter" >toolbar.create.typewriter</ribbon-button>
    </div>
    <div class="fv__ui-body">
        <!-- Viewer 是用来显示 PDF 的区域，布局模板中必须有一个 viewer 组件 -->
        <viewer @touch-to-scroll></viewer>
    </div>
    <!-- template是被重写以后的html template标签, 通常用来容纳不需要立即显示的组件，比如对话框、右键菜单以及浮动框等 -->
    <template name="template-container">
        <print:print-dialog></print:print-dialog>
    </template>
</webpdf>

# 如何指定布局模板和实现设备自适应

请参阅Appearance小节。

# 动态插入布局模板

请点击 "run" 按钮运行如下的示例：

支持插入模板的接口有：

  • Component
    • #after(component|template, fragments)
    • #before(component|template, fragments)
  • ContainerComponent
    • #append(component|template,fragments)
    • #prepend(component|template,fragments)
    • #insert(component|template, index, fragments)

有关这些接口的详细信息，请参考 API Reference: Component 和 ContainerComponent

# 初始化时插入布局模板

请参阅 UI Fragments 小节。