Type Alias CommentUI

Type Declaration

• SlotConfigurationCallback<{ id: string }>
• {
      body?: SlotConfigurationCallback<{ id: string }>;
      footer?: SlotConfigurationCallback<{ id: string }>;
      header?: SlotConfigurationCallback<{ id: string }>;
  }

  • Optionalbody?: SlotConfigurationCallback<{ id: string }>

    Use this to customize the body (main content) of the comment.

    Example

    Replace the body of each comment by customizing the body slot:

    NutrientViewer.load({
      // ... Your configuration.
      ui: {
        commentThread: {
          comment: {
            body: () => {
              return {
                render: () => {
                  const div = document.createElement("div");
                  div.style.backgroundColor = "lightgreen";
                  div.style.padding = "5px";
                  div.innerText = "This is a custom body for the comment.";
    
                  return div;
                },
              };
            },
          },
        },
      },
    });
    Copy

  • Optionalfooter?: SlotConfigurationCallback<{ id: string }>

    Use this to render a custom UI in the footer (bottom area) of each comment

    Example

    Add a custom footer to each comment by customizing the footer slot:

    NutrientViewer.load({
      // ... Your configuration.
      ui: {
        commentThread: {
          comment: {
            footer: () => {
              return {
                render: () => {
                  const div = document.createElement("div");
                  div.style.backgroundColor = "lightgreen";
                  div.style.padding = "5px";
                  div.innerText = "This is a custom footer for the comment.";
    
                  return div;
                },
              };
            },
          },
        },
      },
    });
    Copy

  • Optionalheader?: SlotConfigurationCallback<{ id: string }>

    Use this to render a custom UI in the header (top area) of each comment.

    Example

    Add a custom header to each comment by customizing the header slot:

    NutrientViewer.load({
      // ... Your configuration.
      ui: {
        commentThread: {
          comment: {
            header: () => {
              return {
                render: () => {
                  const div = document.createElement("div");
                  div.style.backgroundColor = "lightgreen";
                  div.style.padding = "5px";
                  div.innerText = "This is a custom header for the comment.";
    
                  return div;
                },
              };
            },
          },
        },
      },
    });
    Copy