Custom variants let you define your own versions of components. For example: You can have a variant of Comment Sidebar for one page and another for another page.
1
Define variants
On the wireframe component, add the variant prop to define your custom variants.
<VeltWireframe> {/* Variant for preview page */} <VeltCommentsSidebarWireframe variant="preview-page"> {/* Custom layout for preview */} </VeltCommentsSidebarWireframe> {/* Variant for editor page */} <VeltCommentsSidebarWireframe variant="editor-page"> {/* Custom layout for editor */} </VeltCommentsSidebarWireframe></VeltWireframe>
<VeltWireframe> {/* Variant for preview page */} <VeltCommentsSidebarWireframe variant="preview-page"> {/* Custom layout for preview */} </VeltCommentsSidebarWireframe> {/* Variant for editor page */} <VeltCommentsSidebarWireframe variant="editor-page"> {/* Custom layout for editor */} </VeltCommentsSidebarWireframe></VeltWireframe>
<velt-wireframe style="display:none;"> {/* Variant for preview page */} <velt-comments-sidebar-wireframe variant="preview-page"> {/* Custom layout for preview */} </velt-comments-sidebar-wireframe> {/* Variant for editor page */} <velt-comments-sidebar-wireframe variant="editor-page"> {/* Custom layout for editor */} </velt-comments-sidebar-wireframe></velt-wireframe>
2
Use variants
Use the variant prop on the related Velt component to apply the custom variant you defined. The value should match the variant name from step 1.
For example, use variant="preview-page" to apply the preview page variant you created above.
Many components come with built-in variants optimized for specific use cases. For example, the Comment Dialog has two pre-defined variants for different contexts:
<VeltWireframe> {/* For Pin, Area, and Text comments */} <VeltCommentDialogWireframe variant="dialog"> {/* Custom layout */} </VeltCommentDialogWireframe> {/* For Sidebar comments */} <VeltCommentDialogWireframe variant="sidebar"> {/* Custom layout */} </VeltCommentDialogWireframe></VeltWireframe>
<VeltWireframe> {/* For Pin, Area, and Text comments */} <VeltCommentDialogWireframe variant="dialog"> {/* Custom layout */} </VeltCommentDialogWireframe> {/* For Sidebar comments */} <VeltCommentDialogWireframe variant="sidebar"> {/* Custom layout */} </VeltCommentDialogWireframe></VeltWireframe>
<velt-wireframe style="display:none;"> {/* For Pin, Area, and Text comments */} <velt-comment-dialog-wireframe variant="dialog"> {/* Custom layout */} </velt-comment-dialog-wireframe> {/* For Sidebar comments */} <velt-comment-dialog-wireframe variant="sidebar"> {/* Custom layout */} </velt-comment-dialog-wireframe></velt-wireframe>
Each component’s documentation lists its supported pre-defined variants
Pre-defined variants are optimized for specific use cases but can still be customized
You can combine pre-defined variants with your own custom styling