# Appearance

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

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

class Appearance {
    constructor(pdfui);
    // Layout template.
    public getLayoutTemplate: () => string;
    // Return fragment configuration.
    public getDefaultFragments: () => UIFragmentOptions[];
    // Triggered before inserting the component into the DOM tree.
    public beforeMounted: (root: Component) => void
    // Triggered after inserting the component into the DOM tree.
    public afterMounted: (root: Component) => void
    // Called to disable the component after closing PDF documents.
    protected disableAll: () => void;
    // Called to enable the component after closing PDF documents.
    protected enableAll: () => void;
}

# 自定义Appearance示例

# 设备自适应

如果UI布局需要根据设备的不同来实现自适应，就需要根据当前设备特征值判断设备类型，并传给PDFUI不同的appearance实例，参考下面的示例。以下代码可以使用桌面端Chrome浏览器 Chrome DevTool 的 device mode 来模拟（simulate）不同设备运行。

# 内置外观

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