# Appearance

Appearance is a class that defines the appearance of the UI, it provides a template to specify the layout of the UI and fragments to modify the layout and control the logic of the components.

Following is the declaration of the Appearance class, its sub-classes should override these methods to define new 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;
}

# Custom Appearance Example

# Device Adaptation

If the UI layout needs to be adaptive to the devices, you should determine the device type based on the characteristic value of your current device, and then pass the different appearance instance to PDFUI. Please refer to the following example:

The following code can be used to simulate the operation of different devices using the device mode of Chrome DevTool on the desktop Chrome browser.

# Built-in appearances

// desktop appearance
UIExtension.appearances.RibbonAppearance
// mobile appearance
UIExtension.appearances.MobileAppearance
// select ribbon or mobile appearance according to the device type（support both desktop and mobile)
UIExtension.appearances.AdaptiveAppearance

Modular →