<VeltWireframe>
<VeltTextCommentToolbarWireframe>
<VeltTextCommentToolbarWireframe.CommentAnnotation />
<VeltTextCommentToolbarWireframe.Divider />
<VeltTextCommentToolbarWireframe.Copywriter />
<VeltTextCommentToolbarWireframe.Generic />
</VeltTextCommentToolbarWireframe>
</VeltWireframe>
<VeltWireframe>
<VeltTextCommentToolbarWireframe>
<VeltTextCommentToolbarWireframe.CommentAnnotation />
<VeltTextCommentToolbarWireframe.Divider />
<VeltTextCommentToolbarWireframe.Copywriter />
<VeltTextCommentToolbarWireframe.Generic />
</VeltTextCommentToolbarWireframe>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-text-comment-toolbar-wireframe>
<velt-text-comment-toolbar-comment-annotation-wireframe></velt-text-comment-toolbar-comment-annotation-wireframe>
<velt-text-comment-toolbar-divider-wireframe></velt-text-comment-toolbar-divider-wireframe>
<velt-text-comment-toolbar-copywriter-wireframe></velt-text-comment-toolbar-copywriter-wireframe>
<velt-text-comment-toolbar-generic-wireframe></velt-text-comment-toolbar-generic-wireframe>
</velt-text-comment-toolbar-wireframe>
</velt-wireframe>
<VeltWireframe>
<VeltTextCommentToolbarWireframe.CommentAnnotation />
</VeltWireframe>
<VeltWireframe>
<VeltTextCommentToolbarWireframe.CommentAnnotation />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-text-comment-toolbar-comment-annotation-wireframe></velt-text-comment-toolbar-comment-annotation-wireframe>
</velt-wireframe>
Divider
<VeltWireframe>
<VeltTextCommentToolbarWireframe.Divider />
</VeltWireframe>
<VeltWireframe>
<VeltTextCommentToolbarWireframe.Divider />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-text-comment-toolbar-divider-wireframe></velt-text-comment-toolbar-divider-wireframe>
</velt-wireframe>
Copywriter
<VeltWireframe>
<VeltTextCommentToolbarWireframe.Copywriter />
</VeltWireframe>
<VeltWireframe>
<VeltTextCommentToolbarWireframe.Copywriter />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-text-comment-toolbar-copywriter-wireframe></velt-text-comment-toolbar-copywriter-wireframe>
</velt-wireframe>
Generic
<VeltWireframe>
<VeltTextCommentToolbarWireframe.Generic />
</VeltWireframe>
<VeltWireframe>
<VeltTextCommentToolbarWireframe.Generic />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-text-comment-toolbar-generic-wireframe></velt-text-comment-toolbar-generic-wireframe>
</velt-wireframe>
Styling
Disable ShadowDOM
- By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
- Disable the shadow dom to apply your custom CSS to the component.
Default: true
<VeltComments shadowDom={false} textCommentToolbarShadowDom={false} />
<VeltComments shadowDom={false} textCommentToolbarShadowDom={false} />
<velt-comments shadow-dom="false" text-comment-toolbar-shadow-dom="false"></velt-comments>
Dark Mode
By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode.
Default: false
Using Props:
<VeltComments textCommentToolbarDarkMode={true} />
Using API:
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
Using Props:
<VeltComments textCommentToolbarDarkMode={true} />
Using API:
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
Using Props:
<velt-comments text-comment-toolbar-dark-mode="true"></velt-comments>
Using API:
const commentElement = Velt.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
