Oxygen includes an integration with Emmet, allowing you to add elements or entire layouts using a CSS-like syntax.
To activate the Emmet input, press CMD/CTRL+Shift+E. You'll notice an Emmet input in the +Add pane instead of the normal search box. You can also access this input by clicking the magnifying glass icon in the normal search box.
To get back to the normal search box, you can either click the icon in the Emmet input box or press CMD/CTRL+Shift+A.
After you've typed your abbreviation in the Emmet input, press enter to execute it.
Emmet uses a CSS-like syntax. Where CSS is targeting elements, Emmet is creating elements. It uses similar operators with similar logic.
You can find a full Emmet cheat sheet here: https://docs.emmet.io/cheat-sheet/. Note that not all of the operations included there will work with Oxygen, but most of them do.
Adding A Single Element
To add a single element, simply type its name in an Emmet-friendly format. This means all lowercase and hyphens instead of spaces. For example:
- section
- heading (also available: h1, h2, h3, h4, h5, h6)
- rich-text
- text (also available: p)
- link-wrapper
- text-link
In cases where a specific HTML tag is available as an alias for an Oxygen element, using that alias will insert the associated Oxygen element and swap its tag to the tag indicated. For example, typing "p" will insert a Text element and swap its tag to "p."
Adding Multiple Elements
To add multiple elements, you can use the child (>), sibling (+), and multiplication (*) operators.
Here's an example that will create a section with a heading inside of it:
section>heading
Note that spaces are not allowed.
If you want to add a sibling element to the heading inside the Section, you can use the sibling operator:
section>heading+text
If you want to add multiples of a single element, you can use the multiplication operator:
section>heading+text*5
This will create 5 text elements inside the section.
Grouping
Complex structures might require grouping. This can be accomplished by wrapping parts of your abbreviation in parentheses:
section>(div>h1+text+button)*2+(div>h1+text+link-wrapper>text)
This will create a section with 3 Divs. The first two Divs will each have a Heading, Text, and Button element inside them. The third Div will contain a Heading and Text element and a Link Wrapper element with a Text element nested inside.
This is especially helpful if you plan to use the multiplication operator and want an entire structure duplicated rather than the last element in the abbreviation.
Classes, IDs, Text Content, And Attributes
You can add classes to elements in your abbreviation:
section.classname
You can add multiple classes, as well:
section.classname1.classname2
You can also add IDs to elements:
section#myid
Or some combination of the two:
section#myid.myclass>columns>(div.yourclass>text)
You can also add text content to elements using curly brackets:
text{This is my text content.}
To add attributes, use square brackets. Note that you should not use quotes around the attribute value:
text[tooltip=true]
