If you want to have multiple versions of customized components that you can swap between, you can use the variants.

Defining Multiple Variants

To define multiple variants, add multiple templates of the same component wireframe to the VeltWireframe component and give them each a variant name.

<VeltWireframe>

    <VeltCommentsSidebarWireframe variant=”sidebar1”>
        #Your wireframe for variant sidebar1
    </VeltCommentsSidebarWireframe>

    <VeltCommentsSidebarWireframe variant=”sidebar2”>
        #Your wireframe for variant sidebar2
    </VeltCommentsSidebarWireframe>
</VeltWireframe>

Using Variants

To use a specific variant, define it on the variant props when using the Velt component in your app.

<div>
    <VeltCommentsSidebar variant="sidebar2"/>
</div>

Pre-defined variants

Some components have pre-defined variants, these are reserved variant names that have specific functionality based on the component they are associated with.

Pre-defined variants don’t need to be explicity mentioned as a variant props when using the Velt component in your app.

To customize pre-defined variants, you still need to add them to a wireframe template.

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”>
    ...
</VeltCommentDialogWireframe>

{/* This pre-defined variant will change the appearance of the Comment Dialog within the Sidebar only */}
<VeltCommentDialogWireframe variant=”sidebar”>
    ...
</VeltCommentDialogWireframe>
</VeltWireframe>

The customization docs for each component will mention if any of them have pre-defined variants.

Unsupported Components

Some components currently do not support variants.

Please check the customization docs for each component to check if variants are supported or not.