Store.dispatch(nnectAnchor(docId, sidenoteId, anchorId)) First dispatch the action to connect to any ID in the dom You can also use sidenotes from vanilla javascript, this is done by first connecting the ID. To import from javascript (assuming your bundler works with CSS): import 'sidenotes/dist/sidenotes.css' You can import it directly, or look at it and change it (~30 lines of scss). The sidenotes class is the only CSS that is recommended. The demo is pretty basic, and not nearly as pretty as the gif above, just blue, green and red divs floating around. All positioning is based on the article, and works with relative, fixed or absolute positioning.Provide actions to attach non-react bases, anchors or reposition sidenotes.Have fallback placements to a `` AnchorBase is a div.Multiple inline references per sidenote, wrapped in `` InlineAnchor is a span.Multiple documents on the page, currently based on the wrapping ID.Used Redux rather than a hook approach (open to discussion if people are passionate!).This is showing Curvenote, which is a scientific writing platform that connects to Jupyter. Do not provide UI or impose any styling, only placement.When an inline reference is clicked, animate the relevant sidenote to be as close as possible and move non-relevant sidenotes out of the way without overlapping.Place notes/comments to the side of one or more documents with inline references.Position floating sidenotes/comments next to a document with inline references.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |