I have a few templates that cannot be replicated inside bootstrap studio without using HTML code. Sometimes I have a lot of componets inside I would like to manage with the tool, but all I have is a complex HTML code I need to handle manually. If I could have a custom wrapper component that would be easily solved. I will give you an example (please ignore any issue with standards, I will try to simplify the use case):
The nav component contains a container div inside:
If I do not want the container I need to create a custom component. The problem: I cannot add any other components inside.
I was expecting to have a "Custom wrapper" component:
(Custom code) (Bootstrap Studio Container (blocked)) (Custom code)
Bootstrap Studio could allow me to change the code as HTML before and after. I am currently using custom codes before and after in such cases, but the tool shows me "<div></div>" if I have only </nav>, for example. There is no native solution for the issue.
Another suggestion is to have a component I can control only through attributes:
- tagName: I can type the tag here
- attributes: key/value pairs
That would generate something like:
<tagNameValue attr1="attr2Value" attr2="attr2Value" ...>
(Area to drop other components)
</tagNameValue>
Thank you for the suggestion! I imagine that this would be helpful in a lot of cases. But building a separate component for it is a bit of an overkill. Maybe we can instead support some convention for custom code which allows Bootstrap Studio to insert child components. This could be done by adding a special attribute like "data-bss-container" to a specific HTML element in your custom code. When the app sees it, it will allow drag and drop in the custom code and place children in that element.
I Love Love Love that idea!! That would really add a lot of versatility to the drag and drop parts of the program without losing the coding aspect.
I would like to also further this in that it should have a way to reverse this (cleanly delete in some way) should someone decide they don't want that in there anymore and "forget" how they added it etc.
I bring that up because of all the posts we see about cleaning up the files for components when they remove them as it is now. Lots of people complaining about the inability to just delete a component they added and have it remove the files that came with it. Hence, you will probably see a bunch of complaining on this as well if they can't easily just remove things they added. Of course, if you do fix this and it starts to remove them, they will complain because they needed that file and just wanted the all the other files removed ...
Personally I couldn't care less, it's pretty straight forward with the components naming their sub files for the component names, so .. yeah lol, if they can't figure out what to remove well then ... go back to school LOL.
I totally love this idea, I don't care if there's cleanup or not I'll make notes if I have to, but I would love to see this put into place in some way or another! :)
I believe your suggestion solves the problem. IMHO, the main issue with custom components is the inability to receive other internal components. If you can solve it with a convention and clearly document it in the documentation, it will give us a lot of power!
There are, of course, issues with incorrect HTML (not closed tags, typos etc.), but the developer must deal with these problems if he/she wants to use custom code. Perhaps later the tool can validate the HTML syntax for custom components.