Actions CLI
Action or command is the way to automate repeating tasks inside Oxygen Builder. If you need to do anything multiple or apply on multiple this will be go-to solution.
Some common use cases are:
- Adding multiple classes
- Adding class to multiple elements
- Removing class from multiple elements
- Renaming multiple elements
- Adding multiple elements
- Adding single element at multiple places
- Adding custom attribute to multiple elements
Supported Actions
Actions are single job things which will help add elements, rename, change ID etc.
Real power is hidden in chaining them and repeating them on multiple elements.
In the table below we can see list of the supported actions and symbols which corresponds to certain action.
Symbol | Action | Example |
> | Add child element | >div |
+ | Add sibling element | section>h2+p |
. | Add class | .class-first.class2 |
@ | Rename | @newName |
' | Change Tag eg. 'li = set <li> custom tag eg. txt'li = add text element with custom li tag | txt'li |
* | Duplicate X times | div*5 |
[] | Set attribute | [data-demo=value] |
{} | Set new content: {newTxt} | {newTxt} |
^ | Select parent (^X), where X is number of repeats | div>div>div^2 |
Supported elements
When you are using actions to add elements, you will have option to write HTML tags with emmet like syntax and generate Oxygen elements.
In the table below we can see how Recoda Action CLI will map them
Action | Oxygen Element | Custom Tag |
h1-h6 | Heading element | h1-h6 |
section | Section element | |
p | Text block element | p |
a | Text link element | a |
aw | Link wrapper | a |
ab | Button element | a |
button | Button element | button |
img | Image element | |
video | Video element | |
icon | Icon element | |
ib | Icon box element | |
pb | Progress bar element | |
gallery | Gallery element | |
slider | Slider element | |
tt | Testimonial element | |
tabs | Tabs element | |
superbox | Superbox element | |
gg | Toggle element | |
txt | Text element | |
modal | Modal element |
If Element is not in supported table, Recoda CLI will create div with custom tag so everything outside table will be DIV element with defined tags like main, aside, etc.
Watch it in action
Adding elements
Adding multiple classes
Multiple classes to multiple elements
Rename multiple elements