API

spx contains a set of .json files that includes all of the component information. It is located in the plugin folder and named data.

Inside each file, you'll find information about the component, attribute names, default values, data types and more. The data can be used to integrate the components into page builders or other systems with ease.

We are using the same set internally to automatically generate a good portion of this documentation and all of the available shortcodes.

Since the data is recreated with every update, all information found inside the files is always current and up to date.

Oxygen

Before version 2.0, components were integrated inside of Oxygen as separate elements.

2.0 is changing that behaviour. Instead of individual elements, there now is a master element, which can become any of the core components. This has various advantages for the development team behind spx, since it isn't necessary to implement every component and property again.

Instead, the wrapper now correlates with the core JavaScript components, meaning that every new element and property is immediately available to be used inside Oxygen. Settings can be applied using the "Attributes" text box just like outside of Oxygen. The single components are still available in 2.0, but will be removed with version 3.0. It is advised to use the wrapper element from now on.

oxygen wrapper

Of course, it is still possible to use spx elements inside code blocks.

Shortcodes

Components as shortcodes are available starting from version 3.0. This means that spx can be now used in even more places. Using shortcodes is not much different than using web components themselves.

[spx-accordion header-text="I was made with a shortcode"] <spx-accordion header-text="I was made with a shortcode"/>

The code above would render the same accordion component. It is also possible to use enclosing shortcodes where applicable:

[spx-accordion] <div slot="header">My custom header</div> [/spx-accordion] <spx-accordion> <div slot="header">My custom header</div> </spx-accordion>

Since helper functions are not yet supported and functionality restrictions, the following components are not available as:

  • Navigation
  • Group
  • Scrollspy
  • Snackbar