Comments Sidebar
Overview
Concepts
- Overview
- Customize Layout
- Customize CSS
- Template Variables
- Conditional Templates
- Action Components
- Variants
General Wireframe Setup
Async Collaboration
- Comments
- In-app Notifications
- Inline Reactions
- Arrows
Realtime Collaboration
- Presence
- Cursors
- Live Selection
- Huddle
Comments Sidebar
Overview
<VeltWireframe>
<VeltCommentsSidebarWireframe>
{/* Skeleton */}
<VeltCommentsSidebarWireframe.Skeleton />
<VeltCommentsSidebarWireframe.Panel>
{/* Header - Contains search, status filters, close button etc */}
<VeltCommentsSidebarWireframe.Header />
{/* Custom Action Button - Use to define custom filter, sorting, grouping */}
<VeltCommentsSidebarWireframe.ActionButton id="all" type="toggle" />
{/* Filter - The filter panel that contains the default system filters */}
<VeltCommentsSidebarWireframe.Filter />
{/* List - The list of comments that appear in the sidebar */}
<VeltCommentsSidebarWireframe.List />
{/* Empty Placeholder - The placeholder that appears when there are no comments */}
<VeltCommentsSidebarWireframe.EmptyPlaceholder />
{/* Reset Filter Button - Not included in default component */}
<VeltCommentsSidebarWireframe.ResetFilterButton />
{/* Page Mode Composer - The composer that appears when the page mode is enabled */}
<VeltCommentsSidebarWireframe.PageModeComposer />
</VeltCommentsSidebarWireframe.Panel>
{/* Focused Thread - This only appears when focused thread mode is enabled */}
<VeltCommentsSidebarWireframe.FocusedThread />
</VeltCommentsSidebarWireframe>
</VeltWireframe>
We recommend that you familiarize yourselves with Customization Concepts before attempting to modify any components.
Default Component
Here’s how the default comments sidebar component looks like:
<VeltWireframe>
<VeltCommentsSidebarWireframe>
{/* Skeleton */}
<VeltCommentsSidebarWireframe.Skeleton />
<VeltCommentsSidebarWireframe.Panel>
{/* Header - Contains search, status filters, close button etc */}
<VeltCommentsSidebarWireframe.Header />
{/* Custom Action Button - Use to define custom filter, sorting, grouping */}
<VeltCommentsSidebarWireframe.ActionButton id="all" type="toggle" />
{/* Filter - The filter panel that contains the default system filters */}
<VeltCommentsSidebarWireframe.Filter />
{/* List - The list of comments that appear in the sidebar */}
<VeltCommentsSidebarWireframe.List />
{/* Empty Placeholder - The placeholder that appears when there are no comments */}
<VeltCommentsSidebarWireframe.EmptyPlaceholder />
{/* Reset Filter Button - Not included in default component */}
<VeltCommentsSidebarWireframe.ResetFilterButton />
{/* Page Mode Composer - The composer that appears when the page mode is enabled */}
<VeltCommentsSidebarWireframe.PageModeComposer />
</VeltCommentsSidebarWireframe.Panel>
{/* Focused Thread - This only appears when focused thread mode is enabled */}
<VeltCommentsSidebarWireframe.FocusedThread />
</VeltCommentsSidebarWireframe>
</VeltWireframe>
<VeltWireframe>
<VeltCommentsSidebarWireframe>
{/* Skeleton */}
<VeltCommentsSidebarWireframe.Skeleton />
<VeltCommentsSidebarWireframe.Panel>
{/* Header - Contains search, status filters, close button etc */}
<VeltCommentsSidebarWireframe.Header />
{/* Custom Action Button - Use to define custom filter, sorting, grouping */}
<VeltCommentsSidebarWireframe.ActionButton id="all" type="toggle" />
{/* Filter - The filter panel that contains the default system filters */}
<VeltCommentsSidebarWireframe.Filter />
{/* List - The list of comments that appear in the sidebar */}
<VeltCommentsSidebarWireframe.List />
{/* Empty Placeholder - The placeholder that appears when there are no comments */}
<VeltCommentsSidebarWireframe.EmptyPlaceholder />
{/* Reset Filter Button - Not included in default component */}
<VeltCommentsSidebarWireframe.ResetFilterButton />
{/* Page Mode Composer - The composer that appears when the page mode is enabled */}
<VeltCommentsSidebarWireframe.PageModeComposer />
</VeltCommentsSidebarWireframe.Panel>
{/* Focused Thread - This only appears when focused thread mode is enabled */}
<VeltCommentsSidebarWireframe.FocusedThread />
</VeltCommentsSidebarWireframe>
</VeltWireframe>