Concepts
Async Collaboration
- Comments
- Comment Dialog
- Comment Pin
- Comment Tool
- Comment Bubble
- Comment Video Player
- Comment Player Timeline
- Confirmation Dialog
- Inline Comments
- Multithread Comment Dialog
- Persistent Comment Mode Banner
- Text Comment Tool
- Text Comment Toolbar
- Standalone Components
- Comments Sidebar
- Overview
- Styling
- Variants
- Subcomponents
- Empty placeholder
- Filter
- Focused thread
- Header
- List
- Page mode composer
- Reset filter button
- Sidebar Button
- Skeleton
- In-app Notifications
- Recorder
- Inline Reactions
- Arrows
Realtime Collaboration
- Presence
- Cursors
- Live Selection
- Huddle
- Single Editor Mode
Minimal Filter Dropdown
Overview
<VeltWireframe>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Trigger />
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortDate>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Sort date
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortDate>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Sort unread
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAll>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter all
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAll>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter unread
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterRead>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter read
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterRead>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterResolved>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter resolved
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterResolved>
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content>
</VeltCommentsSidebarWireframe.MinimalFilterDropdown>
</VeltWireframe>
We recommend that you familiarize yourselves with Customization Concepts before attempting to modify any components.
Default Subcomponent
- This enables minimal filtering and sorting dropdown in the sidebar. By default it’s not enabled. You need to explicitly add the wireframe to the sidebar. It includes options like:
- Filter by
All
- Filter by
Unread
- Filter by
Read
- Filter by
Resolved
- Sort by
Unread
- Sort by
Last Updated Timestamp
<VeltWireframe>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Trigger />
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortDate>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Sort date
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortDate>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Sort unread
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAll>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter all
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAll>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter unread
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterRead>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter read
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterRead>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterResolved>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter resolved
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterResolved>
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content>
</VeltCommentsSidebarWireframe.MinimalFilterDropdown>
</VeltWireframe>
<VeltWireframe>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Trigger />
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortDate>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Sort date
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortDate>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Sort unread
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SortUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAll>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter all
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAll>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter unread
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterUnread>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterRead>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter read
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterRead>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterResolved>
<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.SelectedIcon />
Filter resolved
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterResolved>
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content>
</VeltCommentsSidebarWireframe.MinimalFilterDropdown>
</VeltWireframe>