Variants

1. 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>

2. 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>

3. 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>

4. 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.