# Appearance

Appearance 是一个用来定义 UI 外观的类，它需要提供一个布局模板来指定UI布局以及提供 fragments 来修改布局和控制组件逻辑。

以下是 Appearance 类的声明，继承该类的子类需要重写这些方法来定义新的外观：

class Appearance {
    constructor(pdfui);
    // 布局模板
    public getLayoutTemplate: () => string;
    // 返回fragments配置
    public getDefaultFragments: () => UIFragmentOptions[];
    // 组件被插入到DOM树之前触发
    public beforeMounted: (root: Component) => void
    // 组件被插入到DOM树之后触发
    public afterMounted: (root: Component) => void
    // PDF文档关闭后，这个方法会被调用来禁用组件
    protected disableAll: () => void;
    // PDF文档关闭后，这个方法会被调用来启用组件
    protected enableAll: () => void;
}

# 自定义 Appearance 示例

# 设备自适应

如果UI布局需要根据设备的不同来实现自适应，就需要根据当前设备特征值判断设备类型，并传给PDFUI不同的appearance实例，参考下面的示例。

以下代码可以使用桌面端Chrome浏览器 Chrome DevTool 的 device mode 来模拟（simulate）不同设备运行。

# 内置外观

// 桌面端外观
UIExtension.appearances.RibbonAppearance
// 移动端外观
UIExtension.appearances.MobileAppearance
// 根据设备类型选择功能区或移动外观 (支持桌面端和移动端)
UIExtension.appearances.AdaptiveAppearance

模块化 →