-
-
Notifications
You must be signed in to change notification settings - Fork 328
Can I convert existing HTML templates into IDOM components? #361
-
For example, if I wanted to create a custom IDOM modal component, that originally looked like this:
<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-hidden="true"> <div id="modal-dialog" class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-header"> <!-- Stuff in here --> </div> <div class="modal-body"> <!-- Stuff in here --> </div> <div class="modal-footer"> <!-- Stuff in here --> </div> </div> </div>
Would it be possible to create a custom IDOM component (within Python) that could directly replicate this template? Or will I need to create a react component and idom install() it?
(Let's pretend this component doesn't already exist as a part of react-bootstrap)
Beta Was this translation helpful? Give feedback.
All reactions
Yup, that should be fine. As a general rule, so long as you don't need direct access to the DOM (i.e. anything you'd need a ref for in React) you should be able to do it with IDOM.
Also, the nice thing about custom components (once the interface is finalized) is that you won't actually need to idom install anything (which requires Node to be installed). Users can just pip install a package that distributes pre-bundled JS without any extra build steps or dependencies.
Replies: 1 comment 1 reply
-
Yup, that should be fine. As a general rule, so long as you don't need direct access to the DOM (i.e. anything you'd need a ref for in React) you should be able to do it with IDOM.
Also, the nice thing about custom components (once the interface is finalized) is that you won't actually need to idom install anything (which requires Node to be installed). Users can just pip install a package that distributes pre-bundled JS without any extra build steps or dependencies.
Beta Was this translation helpful? Give feedback.
All reactions
-
Maybe something like this:
@idom.component def MyModel(header, body, footer): return idom.html.div( {"id": "modal-contains", ...}, idom.html.div( {"id": "modal-dialog", ...}, idom.html.div( {"class": "modal-header"}, header, ), idom.html.div( {"class": "modal-body"}, body, ), idom.html.div( {"class": "modal-footer"}, footer, ) ) )
I'm assuming bootstrap is required for some of this too, so if that's not already on the page where IDOM is being rendered you can just put idom.html.link({"rel": "stylesheet", "href": "..."}) somewhere.
Beta Was this translation helpful? Give feedback.