Change Default HTML

You can change the default HTML of subcomponents using two patterns:

a. Parentless - Modifying the subcomponent without its parent within the <VeltWireframe /> component. (recommended)

In this pattern, only the specific subcomponent’s styling will be affected. All other sibling components will remain the unaffected.

In this example, we modify the Header subcomponent, which is a subcomponent of the Velt Comment Dialog. In this pattern, we just put the Header subcomponent in the root of <VeltWireframe /> and modify it. We do not need to add its parent component or any of its siblings.

Example:

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Header>
        <div>
            Custom HTML
        </div>
        <VeltCommentsSidebarWireframe.CloseButton/>
        <VeltCommentsSidebarWireframe.Search/>
        <VeltCommentsSidebarWireframe.Status/>
        <VeltCommentsSidebarWireframe.FilterButton/>
    </VeltCommentsSidebarWireframe.Header>
</VeltWireframe>

a. With Parent - Modifying the subcomponent within the context of its parent within the <VeltWireframe /> component. (not recommended)

In this pattern, we include the subcomponent’s parent and sibling components. This makes it easier to modify several sibling components at once.

In this example, we modify the Header subcomponent, which is a subcomponent of the Velt Comment Dialog.

Example:

<VeltWireframe>
   <VeltCommentsSidebarWireframe>
        {/* Skeleton */}
        ...
        <VeltCommentsSidebarWireframe.Panel>
            {/* Header */}
            <VeltCommentsSidebarWireframe.Header>
                <div>
                    Custom HTML
                </div>
                <VeltCommentsSidebarWireframe.CloseButton/>
                <VeltCommentsSidebarWireframe.Search/>
                <VeltCommentsSidebarWireframe.Status/>
                <VeltCommentsSidebarWireframe.FilterButton/>
            </VeltCommentsSidebarWireframe.Header>
            {/* Filter */}
            ...
            {/* List */}
            <VeltCommentsSidebarWireframe.List/>
            {/* Empty Placeholder */}
            ...
            {/* Page Mode Composer */}
            ...
        <VeltCommentsSidebarWireframe.Panel/>
    </VeltCommentsSidebarWireframe>
</VeltWireframe>
If you modify the component in both the Parentless and With Parent pattern, the With Parent pattern will override the Parentless pattern.

Was this page helpful?

OverviewRemove Existing Components