Customize Layout
Overview
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
a. Standalone Component Customization (recommended):
- 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?