Commands
Command is way of automate repetative tasks inside Oxygen Builder Commands in the most cases are made of two things:
- 1.OPERATOR - this part indicate which action
- 2.ARGUMENT - what action should do
Example 1: Adding class with class name of my-class
command:
.my-classoperator: ' . '
argument: my-class
In Example 1 we can see command for adding one class. In Workspace dot is special character which suggest that class with followed-up name should be added to element.
All Recoda Workspace commands have operators. Imagine operators as languge between you and Oxygen. When we designed it we were heavily inspired with emmet. Our opinion is that emmet syntax is superb and industry standard so we wanted to adopt something logical, easy to write but with mind in that this is Oxygen specific so there are differences because emmet is string manipulation tool and command is Oxygen manipulation thing.
Operator | What operator does? |
|---|---|
> | Add element |
+ | Add sibling element |
^ | Select parent (^X), where X is number of repeats |
. | Add class eg. .someClassToAdd |
' | Change Tag eg. 'li = set <li> custom tag
eg. txt'li = add text element with custom li tag |
* | Duplicate once or *X = duplicate X times |
@ | Rename, followed by new nicename eg. @new_name |
{} | change content, {Buy it now!} |
[] | add attribute, for eg. [data-theme=dark] |
() | Import GitHub Gist snippet
eg. (https://gist.github.com/re-co/18c7b776fbd20c6d3c1343c04792944c#file-xray-gridguide-css) |
/ | add stylesheet eg. /stylesheetName |
| | add folder eg. |folderName |
Table 1: List of command-line operatorsIf you are adding elements one of following operators (>, +, or ^)should be used before element argument.
How it works?
You write some name from table an it will add Oxygen element with custom tag. Some elements has full version and shorthand version, you can use both it will do same.
In Table 2 (below) all supported elements are listed. If you want other element you can write HTML tag as argument and command-line will add DIV element with specified custom-tag in argument. (eg >aside = add div element with custom tag aside)
Command argument | Shorthand | Oxygen element | Custom tag |
|---|---|---|---|
h1-h6 | | Heading element | h1-h6 |
p | | Text block element | p |
a | | Text link element | a |
awrap | aw | Link wrapper | a |
abutton | ab | Button element | a |
cb | | Code block element | - |
button | | Button element | button |
img | | Image element | img |
video | v | Video element | - |
icon | | Icon element | - |
testimonial | tt | Testimonial element | - |
ibox | ib | Icon box element | - |
pbox | pb | Progress bar element | - |
gallery | - | Gallery element | - |
slider | | Slider element | - |
section | | Section element | - |
tabs | | Tabs element | - |
superbox | | Superbox element | - |
toggle | gg | Toggle elemet | - |
text | txt | Text element | - |
textarea | | Text element | textarea |
modal | | Modal element | - |
map | | Map element | - |
some-other eg. aside | | Div element | some-other eg. aside |
Table 2: List of command-line elementsLast modified 9mo ago