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.
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.