Boomla automatically provides some user interface features for you out of the box. Here is how you can take advantage of them.
Warning: do not use undocumented features. See our reserved namespaces.
o1-file marks a HTML tag to contain a file. The attribute
data-o1-path selects the file.
After marking a HTML tag to represent a file, Boomla will show an icon for you when, hovering your mouse over it and you will be able to drop files on it. With the icon, you will be able to sort files, cut/copy/paste them, show them in the IDE, etc.
Note that the entire document (page) is recognized as a file WITHOUT having this class and attribute specified. The path of this file matches that in the location bar.
Inlined contents are wrapped in a div that contains this class (among other things). Its purpose is to encapsulating the content into a box.
overflow: hidden; position: relative for this purpose. Of course, this
is not perfect encapsulation, you can escape it - but you shouldn’t.
This is part of the Boomla philosophy borrowed from the concepts of functional
programming. In the future, the platform will take further actions to enforce
that contents are forced into their containing boxes.
Note that any time you want to a show an overlay greater than your box, you could as well increase your content size instead, to have enough space. For example, instead of a dropdown menu that shows an overlay, just show it inline.
Turn off all present and future graphical user interface features, like showing the icon, supporting file drop or highlighting the file on hover in structure view.
Do not show icon for this file upon hovering the mouse.
Do not allow dropping files relative to this one. The drop target highlighter is not shown either.
Do not highlight file in structure view.
Specifies a dropzone for the closest tag with
Note that when no ancestor has this class, the entire document (page) will be recognized as the drop target, specified by the path in the location bar.
When the Edit tab of the Toolbar is open, this class is added the the
element of the page. You may want to apply custom styles when in editing mode.
Make the HTML tag text editable when the Boomla Toolbar’s Edit tab is open. The attribute value specifies where to save the contents of the tag when the user presses the Save button on the Toolbar.
Possible values are:
attr KEY TYPE- custom file attribute key KEY of type TYPE. For example,
attr foo string
The values will be stored on the represented file - selected by the closest
HTML ancestor tag with
Note that by default, rich text formatting (HTML) is not enabled. To enable it,
add the attribute
Enable rich text formatting on an editable element. See attribute
data-o1-contenteditable for more details.
If you want to position an element
fixed to the top of the browser window,
instead of defining
top = 0 in your CSS, add this class to your HTML code.
Boomla will update the value of
top to match the Toolbar’s height.