<VeltWireframe>
    <VeltCommentsSidebarWireframe>
        {/* Header */}
        <VeltCommentsSidebarWireframe.Header>
            <VeltCommentsSidebarWireframe.CloseButton/>
            <VeltCommentsSidebarWireframe.Search/>
            <VeltCommentsSidebarWireframe.Status/>
            <VeltCommentsSidebarWireframe.FilterButton/>
        </VeltCommentsSidebarWireframe.Header>
        {/* Filter */}
        <VeltCommentsSidebarWireframe.Filter>
            <VeltCommentsSidebarWireframe.Filter.Title/>
            <VeltCommentsSidebarWireframe.Filter.CloseButton/>
            <VeltCommentsSidebarWireframe.Filter.Location/>
            <VeltCommentsSidebarWireframe.Filter.People/>
            <VeltCommentsSidebarWireframe.Filter.Category/>
            <VeltCommentsSidebarWireframe.Filter.Priority/>
            <VeltCommentsSidebarWireframe.Filter.CommentType/>
            <VeltCommentsSidebarWireframe.Filter.Versions/>
            <VeltCommentsSidebarWireframe.Filter.GroupBy/>
            <VeltCommentsSidebarWireframe.Filter.DoneButton/>
        </VeltCommentsSidebarWireframe.Filter>
        {/* List */}
        <VeltCommentsSidebarWireframe.List/>
        {/* Empty Placeholder */}
        <VeltCommentsSidebarWireframe.EmptyPlaceholder/>
        {/* Page Mode Composer */}
        <VeltCommentsSidebarWireframe.PageModeComposer/>
    </VeltCommentsSidebarWireframe>
</VeltWireframe>

We recommend that you familiarize yourselves with Advanced UI Customization Concepts before attempting to modify any components.

Default Component

There are 5 Subcomponents within the Comments Sidebar component.

Subcomponents

  1. Header
<VeltCommentsSidebarWireframe.Header>
    <VeltCommentsSidebarWireframe.CloseButton/>
    <VeltCommentsSidebarWireframe.Search/>
    <VeltCommentsSidebarWireframe.Status/>
    <VeltCommentsSidebarWireframe.FilterButton/>
</VeltCommentsSidebarWireframe.Header>
  1. Filter
<VeltCommentsSidebarWireframe.Filter>
    <VeltCommentsSidebarWireframe.Filter.Title/>
    <VeltCommentsSidebarWireframe.Filter.CloseButton/>
    <VeltCommentsSidebarWireframe.Filter.Location/>
    <VeltCommentsSidebarWireframe.Filter.People/>
    <VeltCommentsSidebarWireframe.Filter.Category/>
    <VeltCommentsSidebarWireframe.Filter.Priority/>
    <VeltCommentsSidebarWireframe.Filter.CommentType/>
    <VeltCommentsSidebarWireframe.Filter.Versions/>
    <VeltCommentsSidebarWireframe.Filter.GroupBy/>
    <VeltCommentsSidebarWireframe.Filter.DoneButton/>
</VeltCommentsSidebarWireframe.Filter>
  1. List
<VeltCommentsSidebarWireframe.List/>
  1. EmptyPlaceholder
<VeltCommentsSidebarWireframe.EmptyPlaceholder/>
  1. Page Mode Composer
<VeltCommentsSidebarWireframe.PageModeComposer/>

Subcomponents that don’t support any children

<VeltCommentsSidebarWireframe.Search>
<VeltCommentsSidebarWireframe.Status>
<VeltCommentsSidebarWireframe.List>
<VeltCommentsSidebarWireframe.PageModeComposer>
<VeltCommentsSidebarWireframe.Filter.Location>
<VeltCommentsSidebarWireframe.Filter.People>
<VeltCommentsSidebarWireframe.Filter.Category>
<VeltCommentsSidebarWireframe.Filter.Priority>
<VeltCommentsSidebarWireframe.Filter.CommentType>
<VeltCommentsSidebarWireframe.Filter.Versions>
<VeltCommentsSidebarWireframe.Filter.GroupBy>

Variants

You can customize the Comment Dialog and the Page Mode Composer that appear in the Comments Sidebar with variants.

To do so, set the dialogVariant and pageModeComposerVariant to the variant that you want to use.

<VeltCommentsSidebar variant=”sidebar1” dialogVariant=”dialogInSidebar” pageModeComposerVariant=”pageModeDialogInSidebar”/>