UI Customization Concepts
Variants
Variants allow you to create and use multiple customized versions of a single component in different parts of your app.
Example: You can have a customized Comment Dialog for the sidebar and another for the pin.
1. Define a Variant
To define a variant:
- Add a template of the component wireframe to the
Velt Wireframe
component - Give it a
variant
name
<VeltWireframe>
<VeltCommentsSidebarWireframe variant="preview-page">
#Your wireframe for the variant
</VeltCommentsSidebarWireframe>
<VeltCommentsSidebarWireframe variant="editor-page">
#Your wireframe for the variant
</VeltCommentsSidebarWireframe>
</VeltWireframe>
2. Use a Variant
To apply a specific variant, simply set the variant
prop when using the Velt component in your app.
<VeltCommentsSidebar variant="preview-page"/>
3. Pre-defined Variants
- Some components have pre-defined variants with reserved names and specific functionality
- To customize pre-defined variants:
- Add the
variant
property with its reserved name to the specific Velt Wireframe component you want to customize - Provide the customized template for that variant within the wireframe component
- Add the
- Check each component’s customization documentation for available pre-defined variants
For example, the Comment Dialog
has two pre-defined variants
:
<VeltWireframe>
{/* This pre-defined variant will change the appearance of the Comment Dialog within Pin, Area, and Text comments only */}
<VeltCommentDialogWireframe variant="dialog">
#Your wireframe for variant
</VeltCommentDialogWireframe>
{/* This pre-defined variant will change the appearance of the Comment Dialog within the Sidebar only */}
<VeltCommentDialogWireframe variant="sidebar">
#Your wireframe for variant
</VeltCommentDialogWireframe>
</VeltWireframe>
4. Unsupported Components
Some components currently do not support variants
. Please check the customization docs for each component to check if variants
are supported.
Was this page helpful?