You can change the default HTML of Velt Components using two patterns:

If you modify the component using both the Standalone and Hierarchical patterns, the Hierarchical pattern will override the Standalone pattern.

​
Patterns

  • This pattern lets you modify any Velt Component without the need to include all of its siblings. e.g., Composer submit button, Comment Dialog Header.
  • By focusing on individual components, this approach simplifies the customization process and enhances maintainability.
  • It provides greater flexibility and granular control over specific parts of the UI without needing to write the entire component structure.
<VeltWireframe>
    <VeltCommentDialogWireframe.Header>
        <div>
            Custom HTML
        </div>
        <VeltCommentDialogWireframe.Status />
        <VeltCommentDialogWireframe.Priority />
        <VeltCommentDialogWireframe.Options />
        <VeltCommentDialogWireframe.CopyLink />
        <VeltCommentDialogWireframe.ResolveButton />
    </VeltCommentDialogWireframe.Header>
</VeltWireframe>

​
b. Hierarchical Component Customization

  • This pattern lets you modify any Velt Component by specifying its entire structure.
  • This approach facilitates easier modifications to multiple sibling components simultaneously, offering a larger control on the component’s:
    • structure and hierarchy.
    • styling relationships between sibling components.
  • The trade-off is writing more code.
<VeltWireframe>
    <VeltCommentDialogWireframe>
        {/*  Ghost Banner */}
        <VeltCommentDialogWireframe.GhostBanner />
        {/*  Assignee Banner */}
        <VeltCommentDialogWireframe.AssigneeBanner />
        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>  {/*  Increase gap between components */}
            {/*  Header */}
            <VeltCommentDialogWireframe.Header />
            {/* Body */}
            <VeltCommentDialogWireframe.Body />
            {/* Composer */}
            <VeltCommentDialogWireframe.Composer />
        </div>
        {/* All Comments */}
        <VeltCommentDialogWireframe.AllComment />
    </VeltCommentDialogWireframe>
</VeltWireframe>

Was this page helpful?

OverviewReplace component layout