Nutrient Web SDK
    Preparing search index...

    Interface DocumentEditorFooterItem

    Describes the properties of a Document Editor Footer Item.

    Check out our guides for more examples.

    Note: node and icon are only applicable when type is 'custom'. Built-in items receive only the Event in onPress; custom items also receive a DocumentEditorUIHandler and id.

    export interface DocumentEditorFooterItem extends DocumentEditorBuiltinFooterItem, DocumentEditorCustomFooterItem { type: BuiltInDocumentEditorFooterItemType | 'custom' }

    interface DocumentEditorFooterItem {
        className?: string;
        icon?: string;
        id?: string;
        node: Node;
        onPress?: (e: Event) => void;
        title?: string;
        type:
            | | "spacer"
            | "cancel"
            | "save-as"
            | "save"
            | "selected-pages"
            | "loading-indicator"
            | "custom";
    }

    Hierarchy

    • DocumentEditorBuiltinFooterItem
    • DocumentEditorCustomFooterItem
      • DocumentEditorFooterItem
    Index

    Properties

    className?: string

    Useful to set a custom CSS class name on the item.

    For default document editor footer items the className is appended to the default item ones.

    icon?: string

    Icon for the item.

    The icon should either be an URL, a base64 encoded image or the HTML for an inline SVG.

    id?: string

    Unique identifier for the item.

    This is useful to identify items whose type is custom.

    Note: It is not possible to override this option for built-in document editor footer items.

    // In your JavaScript
    const documentEditorFooterItems = NutrientViewer.defaultDocumentEditorFooterItems
    documentEditorFooterItems.push({
    type: 'custom',
    id: 'my-button',
    // other properties...
    })
    NutrientViewer.load({
    ...otherOptions,
    documentEditorFooterItems
    });
    node: Node

    required

    custom tool items have to define a DOM node which NutrientViewer will render.

    In this case the tool item is rendered inside of a container div. The className which you pass is set to this container div and not to the node that you passed.

    The onPress event is registered and fires any time the item is clicked.

    onPress?: (e: Event) => void
    title?: string

    Title for the tool items.

    It is shown on hover or when the item doesn't have an icon.

    type:
        | | "spacer"
        | "cancel"
        | "save-as"
        | "save"
        | "selected-pages"
        | "loading-indicator"
        | "custom"