Web Components
Introduced by Alex Rusell at the Fronteers Conference in 2011, Web Components
have since gained traction among web developers to create encapsulated and
reusable elements for the web.
They look like that:
<my-component name="Dennis"/>
As you can see, it's not much different than your standard HTML elements like
a div or li. Since web components are built with Javascript, they are executed
on the client-side, so when visited in a browser. A custom component could be
programmed in any way, depending on its purpose.
For example, the goal could be to create a card component that displays the
'name' attribute in an h2 tag wrapped in a div once executed:
<my-card name="Dennis">
<div class="card-wrap">
<h2 class="card-title">Dennis</h2>
</div>
</my-card>
Components behave like standard HTML elements, so you can target them by using
CSS:
my-card {
background: white;
padding: 1em;
border-radius: 0.125em;
}
That's it, for the most part. Let's dive deeper into how spx is utilizing the
power of web components.
Attributes
All settings for spx components are applied using attributes. These are no
different to attributes for standard HTML elements.
<spx-masonry
columns="4"
bp-columns="1000:2,600:1"
gap="2%">
<img src="img.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
...
</spx-masonry>
The above code would output a masonry layout of images that spans four
columns, with a gap of 2% between images. The number of columns will reduce to
2 when the screen size is under 1000px and to 1 when under 600px.
Every component has different possible attributes that can be applied. Please
head to the individual components to find out more.
CSS variables
Components which are not purely functional can also be styled using CSS
variables. The variable names correlate with their attribute counterpart like
this:
:root {
--spx-masonry-gap: 10px;
}
That would create a gap of 10px between all images of all existing masonry
components on the site. If you want to target a specific instance, you could
give an ID or class to the component:
<spx-masonry id="my-masonry">
<img src="img.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
...
</spx-masonry>
#my-masonry {
--spx-masonry-gap: 1em;
}
While it is technically possible to style the components directly and without
CSS variables, it is not recommended. Since all CSS is generated dynamically,
random classes are being applied by the CSS-in-JS engine (spx is using
Emotion
). These classes change depending on the applied attributes. CSS variables
are also future-proof in case components will be switched over to use the new
Shadow DOM API
.
On top of that, some component attributes apply the same value to many
different properties for the element to function correctly, making styling
without CSS variables not a viable option.
Tokens
Besides variables for all individual components, some general design tokens
that affect all components.
body {
--spx-font-family: var(--spx-token-font-family,helvetica,segoe,arial,sans-serif);
--spx-font-size: var(--spx-token-font-size,16px);
--spx-border-radius: var(--spx-token-border-radius,0.5em);
--spx-transition-duration: var(--spx-token-transition-duration,150ms);
--spx-transition-duration-2: var(--spx-token-transition-duration-2,500ms);
--spx-transition-timing-function: var(--spx-token-transition-timing-function,cubic-bezier(0.4,0,0.2,1));
}
Please note that all builder elements use a different system for the
font-family and font-size and are thus not altered by the above values.
Responsive design
Creating responsive designs using spx components is straight forward with the
help of CSS variables.
@media (min-width: 1280px) {
body {
--spx-navigation-font-size: 24px;
}
}
Styling
Some components can be styled using varying methods. If the styling attribute
is present on a component, up to three different techniques are available:
Default
Styles are applied using CSS attributes.
<spx-accordion styling="default" gap="0.4em">
<style>
:root {
// alternatively using CSS variables.
--spx-accordion-gap: 0.5em;
{
</style>
Fluid
In this mode, a value will responsively scale up or down in a linear fashion
depending on a set min and max value.
<spx-accordion styling="fluid" gap-min="0.5" gap-max="1">
<style>
:root {
// alternatively using CSS variables.
--spx-accordion-gap-min: 0.5;
--spx-accordion-gap-max: 1;
{
</style>
Headless
Great for a utility-first workflow using a library like Tailwind. Please refer
to the component docs for all possible class slots.
<spx-accordion styling="headless" class-header="grid gap-4">
Helpers
While many of the components will work without WordPress, the true,
time-saving power of spx comes from using it in conjunction with the provided
PHP helper functions. At the moment, helper functions exist for the masonry
and navigation component. The navigation component only works using the helper
function.
<?php $images = spx\Get::gallery("myGallery", "acf") ?>
<spx-masonry images="<?php echo $images ?>"/>
This will automatically create a masonry layout from the ACF gallery!
Available helpers:
<?php
// gets images for masonry, slider, slideshow
spx\Get::gallery($fieldName,$fieldType)
// gets a menu for navigation
spx\Get::navigation($name)
Helpers are also available as non class-based functions:
<?php
// gets images for masonry, slider, slideshow
spxGetGallery($fieldName,$fieldType)
// gets a menu for navigation
spxGetNavigation($name)
Slots
Some components have certain slots that can be filled with custom markup. For
example, the accordion can be filled with custom slots for the header and
content.
<spx-accordion>
<div slot="header">Click me to unveil the content</div>
<img slot="content" src="image.jpg"/>
</spx-accordion>
Events
Javascript events are being emitted by a couple of components. You can attach
an event listener to those just like you normally would.
document.addEventListener('spxEditButtonSave', function() {
// your functions
});
Methods
Components might expose public methods in Javascript:
(async () => {
await customElements.whenDefined('spx-typewriter');
const sT = document.querySelector('spx-typewriter');
await sT.play();
})();
The above code would start the animation of the typewriter component. Methods
come in handy when trying to interact with other libraries and functions.
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.
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
Accordion Available as: Web Component Shortcode Oxygen Element The classic method to show and hide elements on your website.
Can be used with custom markup for the header and/or content section.
Default
Linked Close
Linked Toggle
Reverse
<spx-accordion indicator-icon="happy"
header-text="Click me to show some more text">
<h1 slot="content">
Hello!
</h1>
</spx-accordion>
<style>
spx-accordion + spx-accordion {
margin-top: 12px;
}
</style>
<spx-accordion indicator-icon="cube"
header-text="Clicking one accordion will close the other ones"
link="my-link-id"
link-type="close">
</spx-accordion>
<spx-accordion indicator-icon="aperture"
header-text="Clicking one accordion will close the other ones"
link="my-link-id"
link-type="close">
</spx-accordion>
<spx-accordion indicator-icon="apps"
header-text="Clicking one accordion will close the other ones"
link="my-link-id"
link-type="close">
</spx-accordion>
<style>
spx-accordion + spx-accordion {
margin-top: 12px;
}
</style>
<spx-accordion indicator-icon="cube"
header-text="Clicking one accordion will toggle the other ones"
link="my-link-id"
link-type="toggle">
</spx-accordion>
<spx-accordion indicator-icon="aperture"
header-text="Clicking one accordion will toggle the other ones"
link="my-link-id"
link-type="toggle">
</spx-accordion>
<spx-accordion indicator-icon="apps"
header-text="Clicking one accordion will toggle the other ones"
link="my-link-id"
link-type="toggle">
</spx-accordion>
<spx-accordion indicator-icon="happy"
header-text="Click me to show some more text"
reverse>
<h1 slot="content">
Hello!
</h1>
</spx-accordion>
Properties class-content Type : string
Apply classes to content.
class-content-active Type : string
Apply classes to content active.
class-content-inactive Type : string
Apply classes to content inactive.
class-content-text Type : string
Apply classes to content text.
class-content-text-active Type : string
Apply classes to content text active.
class-content-text-inactive Type : string
Apply classes to content text inactive.
class-header Type : string
Apply classes to header.
class-header-active Type : string
Apply classes to header active.
class-header-icon Type : string
Apply classes to header icon.
class-header-icon-active Type : string
Apply classes to header icon active.
class-header-icon-container Type : string
Apply classes to header icon container.
class-header-icon-container-active Type : string
Apply classes to header icon container active.
class-header-icon-container-inactive Type : string
Apply classes to header icon container inactive.
class-header-icon-inactive Type : string
Apply classes to header icon inactive.
class-header-inactive Type : string
Apply classes to header inactive.
class-header-text Type : string
Apply classes to header text.
class-header-text-active Type : string
Apply classes to header text active.
class-header-text-inactive Type : string
Apply classes to header text inactive.
content-color Type : stringDefault : 'var(--spx-color-gray-900)'CSS variable : --spx-accordion-content-color
Content color.
content-text Type : stringDefault : 'Default Content Text'
Content text.
content-text-tag Type : stringDefault : 'span'
Content text tag.
content-transition-duration Type : stringDefault : 'var(--spx-transition-duration)'CSS variable : --spx-accordion-content-transition-duration
Content transition-duration.
content-transition-timing-function Type : stringDefault : 'var(--spx-transition-timing-function)'CSS variable : --spx-accordion-content-transition-timing-function
Content transition-timing-function.
disable-animation Type : boolean
Disables the animation.
Set this attribute if the accordion is starting hidden in the DOM.
font-size Type : stringDefault : 'var(--spx-font-size)'CSS variable : --spx-accordion-font-size
Component font-size property.
font-size-max Type : numberDefault : 1.2CSS variable : --spx-accordion-font-size-max
Component font-size-max property.
font-size-min Type : numberDefault : 1CSS variable : --spx-accordion-font-size-min
Component font-size-min property.
gap Type : stringDefault : '0.4em'CSS variable : --spx-accordion-gap
Space between header and content.
gap-max Type : numberDefault : 1.2
gap-min Type : numberDefault : 1
header-color Type : stringDefault : 'var(--spx-color-gray-900)'CSS variable : --spx-accordion-header-color
Header color.
header-gap Type : stringDefault : '0.4em'CSS variable : --spx-accordion-header-gap
Gap between header text and icon.
header-gap-max Type : numberDefault : 1
header-gap-min Type : numberDefault : 0.6
header-text Type : stringDefault : 'Default Header Text'
Header text.
header-text-open Type : string
Header text when component is closed.
header-text-tag Type : stringDefault : 'span'
Header text tag.
indicator-icon Type : stringDefault : 'arrow-down'
Indicator icon.
indicator-icon-transform Type : stringDefault : 'rotate(180deg)'
Indicator icon transform.
indicator-icon-type Type : stringDefault : 'ionicons'
Indicator icon type.
link Type : string
Sets the ID to link different accordions together.
link-type Type : stringChoices : 'open', 'close', 'toggle'
Sets the type of link.
open-state Type : booleanDefault : false
State of accordion.
reverse Type : boolean
Reverse icon positioning.
styling Type : stringDefault : 'default'Choices : 'default', 'fluid', 'headless'
Styling.
Slots content Slot for the content.
header Slot for the header.
Events spxAccordionDidLoad Fires after component has loaded.
Methods close Closes the accordion.
toggle Toggles the accordion.
Animate Available as: Web Component Shortcode Oxygen Element Wrapper around GSAP that allows for staggered and scroll-based animation.
<spx-animate
duration="1"
opacity="0"
viewport
stagger="0.05">
<h1>Hi!</h1>
<h1>Hi!</h1>
<h1>Hi!</h1>
<h1>Hi!</h1>
<h1>Hi!</h1>
</spx-animate>
Properties delay Type : number
Delay before animation starts.
display Type : stringDefault : 'block'CSS variable : --spx-animate-display
Component display property.
duration Type : numberDefault : 1
Animation duration.
ease Type : stringDefault : 'power1.out'
Ease being used. Accepts all common GSAP options.
once Type : boolean
Determines if animation should only play once. (if viewport is true)
opacity Type : number
Opacity level the animation starts from.
repeat Type : number
Repeats the animation. -1 to repeat indefinitely.
repeat-delay Type : number
Time to wait between repetitions.
reverse Type : boolean
Reverses the animation.
stagger Type : numberDefault : 0.15
Amount of time elements should be staggered by.
target Type : stringDefault : '*'
The target element that should be animated inside the component.
viewport Type : boolean
Starts animation when target is in the viewport.
viewport-margin-bottom Type : stringCSS variable : --spx-animate-viewport-margin-bottom
Adjust the root margin of the animation start.
viewport-margin-left Type : stringCSS variable : --spx-animate-viewport-margin-left
Adjust the root margin of the animation start.
viewport-margin-right Type : stringCSS variable : --spx-animate-viewport-margin-right
Adjust the root margin of the animation start.
viewport-margin-top Type : stringCSS variable : --spx-animate-viewport-margin-top
Adjust the root margin of the animation start.
x Type : number
X position the animation starts from.
y Type : number
Y position the animation starts from.
yoyo Type : boolean
Causes the animation to go back and forth, alternating backward and forward on each repeat.
Events spxAnimateDidLoad Fires after component has loaded.
Methods restart Restarts animation.
Class Toggle Available as: Web Component Shortcode Oxygen Element Toggle CSS classes on any element in the document.
Multiple
Single
<style>
.color-red {
color: red;
}
.bg-yellow {
background-color: yellow;
border-color: yellow;
}
</style>
<spx-class-toggle toggle="color-red bg-yellow" local="spxClassToggleDocumentationMultiple">
<button>
Click me!
</button>
</spx-class-toggle>
<style>
.red {
color: red;
}
</style>
<spx-class-toggle toggle="red" local="spxClassToggleDocumentationSingle">
<button>
Click me!
</button>
</spx-class-toggle>
Properties display Type : stringDefault : 'block'CSS variable : --spx-class-toggle-display
Component display property.
local Type : string
Specify a local storage item, so the toggle state will be remembered when the user visits the site again.
target Type : string
Target element. Can take any querySelector value. (id, class, tag etc.) If none is set it will default to the first element inside.
toggle Type : stringDefault : 'spx-class-toggle--active'
List of classes that should be toggled.
Events spxClassToggleDidLoad Fires after component has loaded.
Methods Code Available as: Web Component Shortcode Oxygen Element Highlight a block of code similar to a code editor.
<spx-code type="css">
@media (min-width: 1280px) {
body {
margin: 18px;
padding: 24px;
}
}
</spx-code>
Properties background Type : stringDefault : 'var(--spx-color-gray-900)'CSS variable : --spx-code-background
Component background property.
border-radius Type : stringDefault : 'var(--spx-border-radius)'CSS variable : --spx-code-border-radius
Component border-radius property.
clipboard Type : booleanDefault : true
Enable clipboard button.
clipboard-button-background Type : stringDefault : 'var(--spx-color-gray-800)'CSS variable : --spx-code-clipboard-button-background
Clipboard button background.
clipboard-button-color Type : stringDefault : 'var(--spx-color-gray-400)'CSS variable : --spx-code-clipboard-button-color
Clipboard button color.
clipboard-button-font-size Type : stringDefault : '12px'CSS variable : --spx-code-clipboard-button-font-size
Clipboard button font-size.
clipboard-button-font-weight Type : anyDefault : 600CSS variable : --spx-code-clipboard-button-font-weight
Clipboard button font-weight.
clipboard-button-padding Type : stringDefault : '6px 12px'CSS variable : --spx-code-clipboard-button-padding
Clipboard button padding.
clipboard-button-text Type : stringDefault : 'Copy'
clipboard-button-text-copied Type : stringDefault : 'Copied!'
clipboard-button-text-transform Type : stringDefault : 'uppercase'CSS variable : --spx-code-clipboard-button-text-transform
Clipboard button text-transform.
display Type : stringDefault : 'block'CSS variable : --spx-code-display
Component display property.
font-size Type : stringDefault : 'clamp(12px, 1.6vw, 16px)'CSS variable : --spx-code-font-size
Component font-size property.
height Type : stringDefault : 'auto'
lazy Type : boolean
Load component when it enters the viewport.
line-numbers Type : booleanDefault : true
Enable line numbers.
line-numbers-background Type : stringDefault : 'var(--spx-color-gray-800)'CSS variable : --spx-code-line-numbers-background
Line numbers background.
line-numbers-color Type : stringDefault : 'var(--spx-color-gray-400)'CSS variable : --spx-code-line-numbers-color
Line numbers color.
line-numbers-start Type : number
Start of line number.
max-width Type : stringDefault : '100%'CSS variable : --spx-code-max-width
Component max-width property.
overflow Type : stringDefault : 'auto'
padding Type : stringDefault : 'clamp(20px, 2.4vw, 40px)'CSS variable : --spx-code-padding
Component padding property.
scrollbar Type : booleanDefault : true
Hide scrollbar.
theme Type : stringDefault : 'default'Choices : 'default', 'dracula'
Colour theme.
type Type : stringDefault : 'markup'Choices : 'markup', 'css', 'php'
Determines the programming language.
Events spxCodeDidLoad Fires after component has loaded.
Methods Docs Available as: Web Component Shortcode Oxygen Element Renders a documentation page similar to the one you are currently seeing here.
Every heading tag becomes a navigation entry, while navigation headings get created by applying
the "data-spx-docs-heading" attribute to the first h1 of a new section.
Properties bp-mobile Type : numberDefault : 1024
content-padding Type : stringCSS variable : --spx-docs-content-padding
Content padding.
content-padding-y-max Type : numberCSS variable : --spx-docs-content-padding-y-max
Content y max padding.
content-padding-y-min Type : numberCSS variable : --spx-docs-content-padding-y-min
Content y min padding.
gap Type : stringDefault : '3rem'
navigation-background Type : stringCSS variable : --spx-docs-navigation-background
Navigation background.
navigation-gap Type : string
navigation-gap-max Type : numberDefault : 0.4
navigation-gap-min Type : numberDefault : 0.2
navigation-heading-tag Type : stringDefault : 'h1'
navigation-height-adjust Type : string
navigation-link-color Type : stringCSS variable : --spx-docs-navigation-link-color
Navigation link color.
navigation-link-color-active Type : stringCSS variable : --spx-docs-navigation-link-color-active
Navigation link active color.
navigation-link-font-size Type : anyCSS variable : --spx-docs-navigation-link-font-size
Navigation link font-size.
navigation-link-font-size-max Type : numberDefault : 1CSS variable : --spx-docs-navigation-link-font-size-max
Navigation link max font-size.
navigation-link-font-size-min Type : numberDefault : 0.8CSS variable : --spx-docs-navigation-link-font-size-min
Navigation link min font-size.
navigation-link-font-weight Type : stringDefault : '500'CSS variable : --spx-docs-navigation-link-font-weight
Navigation link font-weight.
navigation-link-letter-spacing Type : stringDefault : '0'CSS variable : --spx-docs-navigation-link-letter-spacing
Navigation link letter-spacing.
navigation-link-line-height Type : stringDefault : '1.25'CSS variable : --spx-docs-navigation-link-line-height
Navigation link line-height.
navigation-link-text-transform Type : stringDefault : 'default'CSS variable : --spx-docs-navigation-link-text-transform
Navigation link text-transform.
navigation-padding-y Type : stringCSS variable : --spx-docs-navigation-padding-y
Navigation y padding.
navigation-padding-y-max Type : numberCSS variable : --spx-docs-navigation-padding-y-max
Navigation y max padding.
navigation-padding-y-min Type : numberCSS variable : --spx-docs-navigation-padding-y-min
Navigation y min padding.
navigation-title-color Type : stringCSS variable : --spx-docs-navigation-title-color
Navigation title color.
navigation-title-font-size Type : anyCSS variable : --spx-docs-navigation-title-font-size
Navigation title font-size.
navigation-title-font-size-max Type : numberDefault : 0.9CSS variable : --spx-docs-navigation-title-font-size-max
Navigation title max font-size.
navigation-title-font-size-min Type : numberDefault : 0.8CSS variable : --spx-docs-navigation-title-font-size-min
Navigation title min font-size.
navigation-title-font-weight Type : stringDefault : '500'CSS variable : --spx-docs-navigation-title-font-weight
Navigation title font-weight.
navigation-title-letter-spacing Type : stringDefault : '0'CSS variable : --spx-docs-navigation-title-letter-spacing
Navigation title letter-spacing.
navigation-title-line-height Type : stringDefault : '1.25'CSS variable : --spx-docs-navigation-title-line-height
Navigation title line-height.
navigation-title-margin-bottom Type : numberDefault : 1CSS variable : --spx-docs-navigation-title-margin-bottom
Navigation title margin-bottom.
navigation-title-margin-bottom-max Type : numberDefault : 2CSS variable : --spx-docs-navigation-title-margin-bottom-max
Navigation title max margin-bottom.
navigation-title-margin-bottom-min Type : numberDefault : 1CSS variable : --spx-docs-navigation-title-margin-bottom-min
Navigation title min margin-bottom.
navigation-title-text-transform Type : stringDefault : 'uppercase'CSS variable : --spx-docs-navigation-title-text-transform
Navigation title text-transform.
navigation-top Type : stringDefault : '0'
offset-margin-top Type : stringDefault : ''CSS variable : --spx-docs-offset-margin-top
Offset margin-top.
scrolling Type : number
Activates automatic navigation scrolling and sets the offset.
separator Type : string
Create a separator between sections.
styling Type : stringDefault : 'fluid'Choices : 'default', 'fluid'
Styling.
Events spxDocsDidLoad Fires after component has loaded.
Edit Button Available as: Web Component Shortcode Oxygen Element Let your clients edit text on their site using this handy component.
<h1 data-spx-edit="test">Hello, I am test content.</h1>
<spx-edit-button test position="bottom-right"></spx-edit-button>
There is a guide available for this component.
Properties background Type : stringDefault : 'var(--spx-color-gray-900)'CSS variable : --spx-edit-button-background
Component background property.
background-discard Type : stringDefault : 'var(--spx-color-gray-600)'CSS variable : --spx-edit-button-background-discard
Discard button background.
border Type : stringDefault : 'none'CSS variable : --spx-edit-button-border
Component border property.
border-radius Type : stringDefault : 'var(--spx-border-radius)'CSS variable : --spx-edit-button-border-radius
Component border-radius property.
class-button Type : string
Apply classes to button.
class-button-discard Type : string
Apply classes to button discard.
class-loader Type : string
Apply classes to loader.
color Type : stringDefault : '#ffffff'CSS variable : --spx-edit-button-color
Component color property.
color-discard Type : stringDefault : '#ffffff'CSS variable : --spx-edit-button-color-discard
Discard button color.
distance-x Type : stringDefault : '1em'CSS variable : --spx-edit-button-distance-x
Distance to the edge of the viewport on the x-axis.
distance-y Type : stringDefault : '1em'CSS variable : --spx-edit-button-distance-y
Distance to the edge of the viewport on the y-axis.
edit-id Type : string
Corresponding ID for editable fields. This property is needed when multiple edit-button components are used on the page. Simply apply a "data-spx-edit-id" attribute with the same value to editable elements.
font-family Type : stringDefault : 'var(--spx-font-family)'CSS variable : --spx-edit-button-font-family
Component font-family property.
font-size Type : stringDefault : 'var(--spx-font-size)'CSS variable : --spx-edit-button-font-size
Component font-size property.
font-size-max Type : numberDefault : 1.2CSS variable : --spx-edit-button-font-size-max
Component font-size-max property.
font-size-min Type : numberDefault : 1CSS variable : --spx-edit-button-font-size-min
Component font-size-min property.
gap Type : stringDefault : '0.4em'CSS variable : --spx-edit-button-gap
Gap between the buttons.
padding Type : stringDefault : '0.8em 1.2em'CSS variable : --spx-edit-button-padding
Component padding property.
padding-x-max Type : numberDefault : 1.4CSS variable : --spx-edit-button-padding-x-max
Component padding-x-max property.
padding-x-min Type : numberDefault : 1CSS variable : --spx-edit-button-padding-x-min
Component padding-x-min property.
padding-y-max Type : numberDefault : 1.2CSS variable : --spx-edit-button-padding-y-max
Component padding-y-max property.
padding-y-min Type : numberDefault : 0.7CSS variable : --spx-edit-button-padding-y-min
Component padding-y-min property.
position Type : stringDefault : 'bottom-right'Choices : 'bottom-right', 'bottom-center', 'bottom-left', 'top-right', 'top-center', 'top-right'
Component position in page.
position-css Type : "absolute" | "fixed" | "relative" | "static"Default : 'fixed'
CSS property position of button.
styling Type : stringDefault : 'default'Choices : 'default', 'fluid', 'headless'
Styling.
test Type : booleanDefault : false
text-discard Type : stringDefault : 'Discard'
Discard button text.
text-edit Type : stringDefault : 'Edit site'
Edit button text.
text-save Type : stringDefault : 'Save'
Save button text.
text-success Type : stringDefault : 'Save was successful'
Success message.
z-index Type : numberDefault : 99CSS variable : --spx-edit-button-z-index
Component z-index property.
Events spxEditButtonDidLoad Fires after component has loaded.
spxEditButtonDiscard Fires after pressing the discard button.
spxEditButtonSave Fires after pressing the save button.
Methods Group Available as: Web Component Oxygen Element Pass attributes to all inner (spx) child elements.
All attributes that start with g-* will be passed on to child elements.
<spx-group g-indicator-icon="color-wand"
g-header-gap="8px">
<spx-accordion>
</spx-accordion>
<spx-accordion>
</spx-accordion>
<spx-accordion>
</spx-accordion>
</spx-group>
Properties display Type : stringDefault : 'block'CSS variable : --spx-group-display
Component display property.
target Type : string
Specifies a target element.
Events spxGroupDidLoad Fires after component has loaded.
Methods Icon Available as: Web Component Shortcode Oxygen Element Wrapper component for different kinds of icon sets. Currently comes included with Ionicons.
<spx-icon icon="cube"></spx-icon>
<spx-icon icon="cube-outline"></spx-icon>
<spx-icon icon="extension-puzzle"></spx-icon>
<spx-icon icon="extension-puzzle-outline"></spx-icon>
Properties color Type : stringDefault : 'inherit'CSS variable : --spx-icon-color
Component color property.
icon Type : string
Icon code.
size Type : stringDefault : '1em'
Icon size.
size-max Type : numberDefault : 1
size-min Type : numberDefault : 0.8
styling Type : stringDefault : 'default'Choices : 'default', 'fluid'
Styling.
type Type : stringDefault : 'ionicons'Choices : 'ionicons', 'caret'
Icon type.
Events spxIconDidLoad Fires after component has loaded.
Iframe Available as: Web Component Shortcode A wrapper around a standard iframe element, which scales proportionally to its parent.
Great for showing desktop versions of a website on smaller screens or viewports.
<spx-iframe src="https://spx.dev" size="1920px">
</spx-iframe>
Properties display Type : stringDefault : 'block'CSS variable : --spx-iframe-display
Component display property.
document-border Type : stringDefault : 'none'CSS variable : --spx-iframe-document-border
Document border.
document-border-radius Type : stringDefault : 'none'CSS variable : --spx-iframe-document-border-radius
Document radius border.
document-height Type : stringDefault : 'auto'
document-width Type : stringDefault : '100%'
fit Type : boolean
Automatically resize iframe to fit content.
lazy Type : boolean
Lazy load content.
size Type : stringDefault : '1440px'
Screen size of the site shown inside the iframe.
src Type : stringDefault : 'https://spx.dev'
Source for the iframe.
type Type : stringDefault : 'resize'Choices : 'resize', 'document', 'default'
Screen size of the site shown inside the iframe.
Events spxIframeDidLoad Fires after component has loaded.
Methods Image Comparison Available as: Web Component Shortcode Oxygen Element Compare two images visually using a slider. Handy for showing subtle (or not so subtle) before/after differences.
<spx-image-comparison
src-before="https://source.unsplash.com/random/1200x300"
src-after="https://source.unsplash.com/random/1201x300"
height="300px">
</spx-image-comparison>
Properties color Type : stringDefault : '#ffffff'CSS variable : --spx-image-comparison-color
Component color property.
height Type : stringDefault : '100%'
icon-color Type : stringDefault : 'var(--spx-color-gray-900)'CSS variable : --spx-image-comparison-icon-color
Icon color.
loading Type : "auto" | "eager" | "lazy"
Lazy load attribute.
src-after Type : stringDefault : 'https://source.unsplash.com/random/1200x300'
Image URL of the before image.
src-before Type : stringDefault : 'https://source.unsplash.com/random/1201x300'
Image URL of the after image.
start Type : numberDefault : 150
Opening state in pixels.
Events spxImageComparisonDidLoad Fires after component has loaded.
Methods Lightbox Available as: Web Component Shortcode Oxygen Element Overlay a gallery of images on top of the current page.
Properties display Type : stringDefault : 'block'CSS variable : --spx-lightbox-display
Component display property.
height Type : stringDefault : 'auto'
overlay-color Type : stringDefault : 'rgba(0, 0, 0, 0.92)'CSS variable : --spx-lightbox-overlay-color
Overlay color.
width Type : stringDefault : '100%'
Events spxLightboxDidLoad Fires after component has loaded.
Methods Masonry Available as: Web Component Shortcode Oxygen Element Arrange images in a masonry layout.
<spx-masonry columns="5"
gap="12px">
<img src="/wp-content/themes/spx-child/assets/images/playground/andre-benz-RRshxnCn8Lk-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/beasty--HxIhfS_dUk-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/domenico-loia-BkEF69vp3Ck-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/erol-ahmed-FTy5VSGIfiQ-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/ian-dooley-aaAllJ6bmac-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/jason-briscoe--T0La6F_WrE-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/jing-xi-lau-3ccEU_8ddog-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/leo-manjarrez--vygi0Cvz_c-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/michele-tardivo-UyiDcG_AXXs-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-Dv2n1Tv_WcI-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-NB9XC3h_jWo-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/nichlas-andersen-ZFXrgzHu1KU-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/niti-k-Ie430IZPF90-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/ryan-spencer-WJDR8_QxVR8-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/s-o-c-i-a-l-c-u-t-9b2KOWOP0OY-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/scott-webb-TYso4-CK-as-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0_x2PkKmx1Q-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0aFrSMJ3i-g-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-8FUD82rlJxs-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-93J0T3YU6io-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-GnHUOyPV0WI-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Gruxs0ZQw7E-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Km8L8QoJIq8-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-MO2tsiJ5Bek-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/zdenek-klein-mQAaKT4SuU4-unsplash.jpg"/>
</spx-masonry>
Properties bp-columns Type : string
Columns for different screen sizes. Example value: 1000:3;600:2 - this will switch to a three column layout when the screen size is under 1000px and to a two column layout under 600px.
columns Type : numberDefault : 4
Number of columns.
gap Type : stringDefault : '10px'CSS variable : --spx-masonry-gap
Gap between images.
image-size Type : string
WordPress media size when using the helper function..
images Type : string
<?php spx\Get::gallery($fieldName, $type) ?>
Gets images from an ACF or Metabox field.
images-src Type : stringChoices : 'acf', 'mb'
Gets images from an ACF or Metabox field.
Events spxMasonryDidLoad Fires after component has loaded.
Methods Mockup Available as: Web Component Shortcode Oxygen Element Display device mockups around your content.
<spx-mockup type="iphone-x" src="https://picsum.photos/1000/1000">
</spx-mockup>
Properties color-galaxy-s8 Type : stringDefault : 'black'CSS variable : --spx-mockup-color-galaxy-s8Choices : 'black', 'blue'
Samsung S8 color.
color-google-pixel Type : stringDefault : 'silver'CSS variable : --spx-mockup-color-google-pixelChoices : 'silver', 'black', 'blue'
Google Pixel color.
color-ipad-pro Type : stringDefault : 'silver'CSS variable : --spx-mockup-color-ipad-proChoices : 'silver', 'gold', 'rosegold', 'spacegray'
iPad Pro color.
color-iphone8 Type : stringDefault : 'silver'CSS variable : --spx-mockup-color-iphone8Choices : 'silver', 'gold', 'spacegray'
iPhone 8 color.
color-macbook Type : stringDefault : 'silver'CSS variable : --spx-mockup-color-macbookChoices : 'silver', 'gold', 'rosegold', 'spacegray'
MacBook color.
color-macbook-pro Type : stringDefault : 'silver'CSS variable : --spx-mockup-color-macbook-proChoices : 'silver', 'spacegray'
MacBook Pro color.
display Type : stringDefault : 'inline-block'CSS variable : --spx-mockup-display
Component display property.
image-position Type : stringDefault : '50% 50%'CSS variable : --spx-mockup-image-position
Component image-position property.
src Type : stringDefault : 'https://picsum.photos/400/1200'
Image src if no inner slot is used.
type Type : stringDefault : 'iphone-8'Choices : 'iphone-8', 'iphone-x', 'google-pixel-2-xl', 'google-pixel', 'galaxy-s8', 'ipad-pro', 'surface-pro', 'surface-book', 'macbook', 'macbook-pro', 'surface-studio', 'imac-pro', 'apple-watch'
Device type.
Events spxMockupDidLoad Fires after component has loaded.
Methods Navigation Available as: Web Component Render a complete WordPress menu with nested submenus and automatic positioning.
<spx-navigation menu="{"27":{"ID":27,"post_author":"1","post_date":"2020-04-25 23:26:27","post_date_gmt":"2020-04-25 23:26:27","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-1","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/harmoni\/?p=27","menu_order":1,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":27,"menu_item_parent":"0","object_id":"27","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"28":{"ID":28,"post_author":"1","post_date":"2020-04-25 23:26:27","post_date_gmt":"2020-04-25 23:26:27","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-2","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/harmoni\/?p=28","menu_order":2,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":28,"menu_item_parent":"0","object_id":"28","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"29":{"ID":29,"post_author":"1","post_date":"2020-04-25 23:26:27","post_date_gmt":"2020-04-25 23:26:27","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-3","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/harmoni\/?p=29","menu_order":3,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":29,"menu_item_parent":"0","object_id":"29","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":"","spxChildren":{"33":{"ID":33,"post_author":"1","post_date":"2020-04-26 20:50:47","post_date_gmt":"2020-04-26 20:50:47","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-sub-3","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/harmoni\/?p=33","menu_order":4,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":33,"menu_item_parent":"29","object_id":"33","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":"","spxChildren":{"119":{"ID":119,"post_author":"1","post_date":"2020-05-15 13:00:14","post_date_gmt":"2020-05-15 13:00:14","post_content":"","post_title":"Menu Item 1","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-6-1","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=119","menu_order":5,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":119,"menu_item_parent":"33","object_id":"119","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 1","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"120":{"ID":120,"post_author":"1","post_date":"2020-05-15 13:00:14","post_date_gmt":"2020-05-15 13:00:14","post_content":"","post_title":"Menu Item 1","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-6-2","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=120","menu_order":6,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":120,"menu_item_parent":"33","object_id":"120","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 1","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"121":{"ID":121,"post_author":"1","post_date":"2020-05-15 13:00:14","post_date_gmt":"2020-05-15 13:00:14","post_content":"","post_title":"Menu Item 1","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-6-3","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=121","menu_order":7,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":121,"menu_item_parent":"33","object_id":"121","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 1","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""}}},"129":{"ID":129,"post_author":"1","post_date":"2020-05-15 13:27:04","post_date_gmt":"2020-05-15 13:27:04","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=129","menu_order":8,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":129,"menu_item_parent":"29","object_id":"129","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":"","spxChildren":{"132":{"ID":132,"post_author":"1","post_date":"2020-05-15 13:28:07","post_date_gmt":"2020-05-15 13:28:07","post_content":"","post_title":"Menu Item 2","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-4","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=132","menu_order":9,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":132,"menu_item_parent":"129","object_id":"132","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 2","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"133":{"ID":133,"post_author":"1","post_date":"2020-05-15 13:28:07","post_date_gmt":"2020-05-15 13:28:07","post_content":"","post_title":"Menu Item 2","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-5","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=133","menu_order":10,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":133,"menu_item_parent":"129","object_id":"133","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 2","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"134":{"ID":134,"post_author":"1","post_date":"2020-05-15 13:28:07","post_date_gmt":"2020-05-15 13:28:07","post_content":"","post_title":"Menu Item 2","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-6","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=134","menu_order":11,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":134,"menu_item_parent":"129","object_id":"134","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 2","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"130":{"ID":130,"post_author":"1","post_date":"2020-05-15 13:27:04","post_date_gmt":"2020-05-15 13:27:04","post_content":"","post_title":"Menu Item 2","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-3","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=130","menu_order":12,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":130,"menu_item_parent":"129","object_id":"130","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 2","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""}}},"125":{"ID":125,"post_author":"1","post_date":"2020-05-15 13:25:11","post_date_gmt":"2020-05-15 13:25:11","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-3-2","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=125","menu_order":13,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":125,"menu_item_parent":"29","object_id":"125","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":"","spxChildren":{"126":{"ID":126,"post_author":"1","post_date":"2020-05-15 13:25:11","post_date_gmt":"2020-05-15 13:25:11","post_content":"","post_title":"Menu Item 3","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-3-2-1","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=126","menu_order":14,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":126,"menu_item_parent":"125","object_id":"126","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 3","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"127":{"ID":127,"post_author":"1","post_date":"2020-05-15 13:25:11","post_date_gmt":"2020-05-15 13:25:11","post_content":"","post_title":"Menu Item 3","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-3-2-2","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=127","menu_order":15,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":127,"menu_item_parent":"125","object_id":"127","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 3","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"128":{"ID":128,"post_author":"1","post_date":"2020-05-15 13:25:11","post_date_gmt":"2020-05-15 13:25:11","post_content":"","post_title":"Menu Item 3","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-3-2-3","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=128","menu_order":16,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":128,"menu_item_parent":"125","object_id":"128","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 3","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"131":{"ID":131,"post_author":"1","post_date":"2020-05-15 13:27:04","post_date_gmt":"2020-05-15 13:27:04","post_content":"","post_title":"Menu Item 3","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-item-2","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/spx\/?p=131","menu_order":17,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":131,"menu_item_parent":"125","object_id":"131","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item 3","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""}}}}},"30":{"ID":30,"post_author":"1","post_date":"2020-04-25 23:26:27","post_date_gmt":"2020-04-25 23:26:27","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-4","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/harmoni\/?p=30","menu_order":18,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":30,"menu_item_parent":"0","object_id":"30","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"39":{"ID":39,"post_author":"1","post_date":"2020-04-27 17:10:36","post_date_gmt":"2020-04-27 17:10:36","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"custom","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/harmoni\/?p=39","menu_order":19,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":39,"menu_item_parent":"0","object_id":"39","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":"","spxChildren":{"34":{"ID":34,"post_author":"1","post_date":"2020-04-26 20:50:47","post_date_gmt":"2020-04-26 20:50:47","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-sub-4","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/harmoni\/?p=34","menu_order":20,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":34,"menu_item_parent":"39","object_id":"34","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"31":{"ID":31,"post_author":"1","post_date":"2020-04-26 20:50:47","post_date_gmt":"2020-04-26 20:50:47","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-sub-1","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/harmoni\/?p=31","menu_order":21,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":31,"menu_item_parent":"39","object_id":"31","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""},"32":{"ID":32,"post_author":"1","post_date":"2020-04-26 20:50:47","post_date_gmt":"2020-04-26 20:50:47","post_content":"","post_title":"Menu Item","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"menu-sub-2","to_ping":"","pinged":"","post_modified":"2020-05-29 22:02:35","post_modified_gmt":"2020-05-29 22:02:35","post_content_filtered":"","post_parent":0,"guid":"http:\/\/fabrikatdigital.com\/harmoni\/?p=32","menu_order":22,"post_type":"nav_menu_item","post_mime_type":"","comment_count":"0","filter":"raw","db_id":32,"menu_item_parent":"39","object_id":"32","object":"custom","type":"custom","type_label":"Custom Link","title":"Menu Item","url":"#","target":"","attr_title":"","description":"","classes":[""],"xfn":""}}}}" mobile="1">
</spx-navigation>
Properties child-border Type : stringDefault : '1px solid var(--spx-color-gray-200)'CSS variable : --spx-navigation-child-border
Child border.
child-border-radius Type : stringDefault : 'var(--spx-border-radius)'CSS variable : --spx-navigation-child-border-radius
Child menu border-radius.
child-box-shadow Type : stringDefault : '0 3px 10px 0 rgba(0,0,0,0.05)'CSS variable : --spx-navigation-child-box-shadow
Child menu box-shadow.
child-child-gap Type : stringDefault : '0.8em'CSS variable : --spx-navigation-child-child-gap
Gap between nested child menus.
child-gap Type : stringDefault : '0.5em'CSS variable : --spx-navigation-child-gap
Gap between top level menu items and child menus.
child-icon Type : stringDefault : 'arrow-down'
Indicator icon..
child-icon-type Type : stringDefault : 'ionicons'
Indicator icon type.
child-indicator-gap Type : stringDefault : '0.2em'CSS variable : --spx-navigation-child-indicator-gap
Gap between child menu indicator and text.
child-item-background Type : stringDefault : '#ffffff'CSS variable : --spx-navigation-child-item-background
Child item background.
child-item-background-hover Type : stringDefault : 'var(--spx-color-gray-100)'CSS variable : --spx-navigation-child-item-background-hover
Child item hover background.
child-item-color Type : stringDefault : 'var(--spx-color-gray-700)'CSS variable : --spx-navigation-child-item-color
Child item color.
child-item-color-hover Type : stringDefault : 'var(--spx-color-gray-900)'CSS variable : --spx-navigation-child-item-color-hover
Child item hover color.
child-item-padding Type : stringDefault : '0.6em 0.8em'CSS variable : --spx-navigation-child-item-padding
Child item padding.
child-placement Type : stringDefault : 'start'CSS variable : --spx-navigation-child-placementChoices : 'start', 'end'
Child menu placement.
font-size Type : stringDefault : 'clamp(18px, 1.6vw, 20px)'CSS variable : --spx-navigation-font-size
Component font-size property.
item-transition-duration Type : stringDefault : 'var(--spx-transition-duration)'CSS variable : --spx-navigation-item-transition-duration
Item transition-duration.
item-transition-timing-function Type : stringDefault : 'var(--spx-transition-timing-function)'CSS variable : --spx-navigation-item-transition-timing-function
Item transition-timing-function.
item-underline Type : boolean
Underlines all links.
item-underline-hover Type : boolean
Underlines all links on hover.
menu Type : string
<?php spx\Get::navigation("myMenu") ?>
Renders a WordPress menu.
mobile Type : numberDefault : 768
Mobile breakpoint.
mobile-icon Type : string
Mobile button icon.
mobile-icon-type Type : stringDefault : 'ionicons'
Mobile button icon type.
mobile-item-background Type : stringDefault : '#ffffff'CSS variable : --spx-navigation-mobile-item-background
Mobile item background.
mobile-item-background-hover Type : stringDefault : 'var(--spx-color-gray-100)'CSS variable : --spx-navigation-mobile-item-background-hover
Mobile item hover background.
mobile-item-color Type : stringDefault : 'var(--spx-color-gray-800)'CSS variable : --spx-navigation-mobile-item-color
Mobile item color.
mobile-item-color-hover Type : stringDefault : 'var(--spx-color-gray-900)'CSS variable : --spx-navigation-mobile-item-color-hover
Mobile item hover color.
mobile-item-nested-margin-left Type : stringDefault : '0.8em'CSS variable : --spx-navigation-mobile-item-nested-margin-left
Mobile item nested margin-left.
mobile-item-padding Type : stringDefault : '0.6em'CSS variable : --spx-navigation-mobile-item-padding
Mobile item padding.
mobile-placement Type : stringDefault : 'start'CSS variable : --spx-navigation-mobile-placementChoices : 'start', 'end'
Mobile placement.
parent-item-background Type : stringDefault : '#ffffff'CSS variable : --spx-navigation-parent-item-background
Parent item background.
parent-item-background-hover Type : stringDefault : 'var(--spx-color-gray-100)'CSS variable : --spx-navigation-parent-item-background-hover
Parent item hover background.
parent-item-color Type : stringDefault : 'var(--spx-color-gray-800)'CSS variable : --spx-navigation-parent-item-color
Parent item color.
parent-item-color-hover Type : stringDefault : 'var(--spx-color-gray-900)'CSS variable : --spx-navigation-parent-item-color-hover
Parent item hover color.
parent-item-gap Type : stringDefault : '0.4em'CSS variable : --spx-navigation-parent-item-gap
Gap between parent menu items.
parent-item-padding Type : stringDefault : '0.6em'CSS variable : --spx-navigation-parent-item-padding
Parent item padding.
vertical Type : boolean
Renders menu vertically.
Events spxNavigationDidLoad Fires after component has loaded.
Methods Notation Available as: Web Component Shortcode Annotate letters, words or whole sentences.
<p>
I'm baby vice keytar beard godard pitchfork stumptown ugh meditation aesthetic shabby chic listicle meh. Leggings
austin fanny pack readymade. Intelligentsia literally green juice pop-up glossier keffiyeh, actually portland enamel
pin.
</p>
<spx-notation color="blue"
type="box">
<p>
Twee fam kogi swag banh mi before they sold out chillwave. 8-bit sustainable stumptown austin freegan, lyft
godard vexillologist skateboard franzen shoreditch. Lo-fi cronut brooklyn put a bird on it gluten-free.
</p>
</spx-notation>
<p>
Typewriter helvetica kombucha succulents. Brunch copper mug tote bag literally pok pok succulents woke shaman
wayfarers humblebrag pop-up. Mustache DIY health goth echo park lyft YOLO lomo.
</p>
Properties animation Type : booleanDefault : true
Turn animation on or off when animation.
animation-duration Type : numberDefault : 800CSS variable : --spx-notation-animation-duration
Animation duration.
color Type : stringDefault : 'var(--spx-color-secondary-100)'CSS variable : --spx-notation-color
Component color property.
display Type : stringDefault : 'inline-block'CSS variable : --spx-notation-display
Component display property.
iterations Type : numberDefault : 1
Number of iterations.
multiline Type : booleanDefault : true
Annotate multiline text.
stroke-width Type : numberDefault : 1
Stroke width.
type Type : stringDefault : 'underline'Choices : 'underline', 'box', 'circle', 'highlight', 'strike-through', 'crossed-off', 'bracket'
Type of notation.
Events spxNotationDidLoad Fires after component has loaded.
Methods clear Remove the annotation.
hide Hides the annotation. (non animated)
show Draws the annotation.
Offset Available as: Web Component Shortcode Oxygen Element The component offsets itself to the height of a specified element.
It comes in handy when dealing with a fixed header and is used on this site.
Simply wrap your main content container with it and select a target element. The distance will adjust on screen resize.
Properties display Type : stringDefault : 'block'CSS variable : --spx-offset-display
Component display property.
target Type : stringDefault : 'header'
Target element.
Events spxOffsetDidLoad Fires after component has loaded.
Methods recalc Recalculate distance.
Scrollspy Available as: Web Component Oxygen Element Automatically add CSS classes to navigation items and content elements depending on the scroll position.
Properties content-class Type : stringDefault : 'spx-scrollspy__content--active'
Applied class to active content element.
display Type : stringDefault : 'block'CSS variable : --spx-scrollspy-display
Component display property.
nav-class Type : stringDefault : 'spx-scrollspy__nav--active'
Applied class to active navigation element.
offset Type : any
Selects the height of an element (any querySelector value) or number that is used for offsetting how far from the top the next section is activated.
scrolling Type : number
Activates automatic navigation scrolling and sets the offset.
target Type : stringDefault : 'a'
Target element. Can take any querySelector value. (id, class, tag etc.)
url-change Type : booleanDefault : false
Appends the currently active link to the end of the URL.
Events spxScrollspyDidLoad Fires after component has loaded.
Methods Share Available as: Web Component Shortcode Oxygen Element Social share buttons. Currently includes Facebook, Twitter, Whatsapp and E-Mail.
Coloured
Default
<spx-share item-background="black">
</spx-share>
Properties class-item Type : string
Apply classes to item.
font-size Type : stringDefault : 'var(--spx-font-size)'CSS variable : --spx-share-font-size
Component font-size property.
font-size-max Type : numberDefault : 1.4CSS variable : --spx-share-font-size-max
Component font-size-max property.
font-size-min Type : numberDefault : 1CSS variable : --spx-share-font-size-min
Component font-size-min property.
item-background Type : stringCSS variable : --spx-share-item-background
Item background.
item-border-radius Type : stringDefault : 'var(--spx-border-radius)'CSS variable : --spx-share-item-border-radius
Item radius border.
item-color Type : stringCSS variable : --spx-share-item-color
Gap between buttons.
item-filter-hover Type : stringDefault : 'brightness(110%) saturate(120%)'CSS variable : --spx-share-item-filter-hover
Filter hover.
item-gap Type : stringDefault : '0.5em'CSS variable : --spx-share-item-gap
Gap between buttons.
item-gap-max Type : numberDefault : 1
item-gap-min Type : numberDefault : 0.4
item-padding Type : stringDefault : '0.5em'CSS variable : --spx-share-item-padding
Item padding.
item-padding-max Type : numberDefault : 1.2CSS variable : --spx-share-item-padding-max
Item max padding.
item-padding-min Type : numberDefault : 0.5CSS variable : --spx-share-item-padding-min
Item min padding.
item-size Type : stringDefault : '1em'
item-size-max Type : numberDefault : 1
item-size-min Type : numberDefault : 0.7
item-transition-duration Type : stringDefault : 'var(--spx-transition-duration)'CSS variable : --spx-share-item-transition-duration
Item transition-duration.
item-transition-timing-function Type : stringDefault : 'var(--spx-transition-timing-function)'CSS variable : --spx-share-item-transition-timing-function
Item transition-timing-function.
styling Type : stringDefault : 'default'Choices : 'default', 'fluid', 'headless'
Styling.
target Type : stringDefault : '_blank'
Button href target.
theme Type : stringDefault : 'default'Choices : 'default', 'outline', 'minimal'
Button theme.
vertical Type : boolean
Render buttons vertically.
Events spxShareDidLoad Fires after component has loaded.
Methods Slider Available as: Web Component Shortcode Oxygen Element A slider is a revolving carousel that displays photos or other types of content.
<style>
spx-slider {
height: 350px;
}
</style>
<spx-slider max-height="350px" max-width="350px" navigation>
<img src="/wp-content/themes/spx-child/assets/images/playground/andre-benz-RRshxnCn8Lk-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/beasty--HxIhfS_dUk-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/domenico-loia-BkEF69vp3Ck-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/erol-ahmed-FTy5VSGIfiQ-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/ian-dooley-aaAllJ6bmac-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/jason-briscoe--T0La6F_WrE-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/jing-xi-lau-3ccEU_8ddog-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/leo-manjarrez--vygi0Cvz_c-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/michele-tardivo-UyiDcG_AXXs-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-Dv2n1Tv_WcI-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-NB9XC3h_jWo-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/nichlas-andersen-ZFXrgzHu1KU-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/niti-k-Ie430IZPF90-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/ryan-spencer-WJDR8_QxVR8-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/s-o-c-i-a-l-c-u-t-9b2KOWOP0OY-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/scott-webb-TYso4-CK-as-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0_x2PkKmx1Q-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0aFrSMJ3i-g-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-8FUD82rlJxs-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-93J0T3YU6io-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-GnHUOyPV0WI-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Gruxs0ZQw7E-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Km8L8QoJIq8-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-MO2tsiJ5Bek-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/zdenek-klein-mQAaKT4SuU4-unsplash.jpg"/>
</spx-slider>
Properties autoheight Type : booleanDefault : false
Automatically adjusts height of slider.
autoplay Type : booleanDefault : false
Starts navigating to the next slide when page is loaded.
autoplay-delay Type : numberDefault : 6000
Autoplay delay.
autoplay-disable-on-interaction Type : booleanDefault : false
Disable autoplay after interaction with slides.
bp-tabs Type : string
Starts navigating to the next slide when page is loaded.
centered-slides Type : booleanDefault : false
Centers slides in viewport.
direction Type : stringDefault : 'horizontal'Choices : 'horizontal', 'vertical'
Slider direction.
effect Type : stringDefault : 'slide'Choices : 'slide', 'effect'
Slider effect.
image-object-fit Type : stringDefault : 'cover'Choices : 'fill', 'contain', 'cover', 'scale-down', 'none'
Image object-fit.
image-size Type : string
WordPress media size when using the helper function..
images Type : string
<?php spx\Get::gallery($fieldName, $type) ?>
Gets images from an ACF or Metabox field.
images-src Type : stringChoices : 'acf', 'mb'
Gets images from an ACF or Metabox field.
loop Type : booleanDefault : false
Loops all slides infinitely.
max-height Type : stringDefault : '100%'
Max height.
max-width Type : stringDefault : '100%'CSS variable : --spx-slider-max-width
Max width.
navigation-background Type : stringDefault : 'rgba(0,0,0,0.7)'CSS variable : --spx-slider-navigation-background
Navigation background.
navigation-border-radius Type : stringDefault : 'var(--spx-border-radius)'CSS variable : --spx-slider-navigation-border-radius
Navigation radius border.
navigation-color Type : stringDefault : '#ffffff'CSS variable : --spx-slider-navigation-color
Navigation color.
navigation-distance-x Type : stringDefault : '12px'CSS variable : --spx-slider-navigation-distance-x
Navigation distance.
navigation-icon-next Type : stringDefault : 'arrow-forward'
Navigation icon type.
navigation-icon-prev Type : stringDefault : 'arrow-back'
Navigation icon type.
navigation-icon-type Type : stringDefault : 'ionicons'
Navigation icon type.
navigation-padding Type : stringDefault : '12px'CSS variable : --spx-slider-navigation-padding
Navigation padding.
navigation-size Type : stringDefault : '20px'CSS variable : --spx-slider-navigation-size
Navigation size.
pagination Type : stringDefault : 'bullets'Choices : 'bullets', 'tabs', 'none'
Pagination type.
pagination-bullets-background Type : stringDefault : 'var(--spx-color-gray-300)'CSS variable : --spx-slider-pagination-bullets-background
Pagination bullets background.
pagination-bullets-background-active Type : stringDefault : 'var(--spx-color-gray-900)'CSS variable : --spx-slider-pagination-bullets-background-active
Pagination bullets active background.
pagination-bullets-clickable Type : boolean
Make bullets clickable.
pagination-bullets-dynamic Type : boolean
Will only keep a selected amount of bullets visible.
pagination-bullets-dynamic-amount Type : numberDefault : 5
Amount of dynamic bullets.
pagination-bullets-size Type : stringDefault : '8px'CSS variable : --spx-slider-pagination-bullets-size
Size of the bullets.
pagination-bullets-space-between Type : stringDefault : '4px'CSS variable : --spx-slider-pagination-bullets-space-between
Space between the bullets.
pagination-tabs-gap-max Type : numberDefault : 1.8
pagination-tabs-gap-min Type : numberDefault : 1
pagination-tabs-inner-gap-max Type : numberDefault : 1
pagination-tabs-inner-gap-min Type : numberDefault : 0.8
pagination-tabs-margin-bottom-max Type : numberDefault : 2.6CSS variable : --spx-slider-pagination-tabs-margin-bottom-max
Pagination tabs max margin-bottom.
pagination-tabs-margin-bottom-min Type : numberDefault : 1.4CSS variable : --spx-slider-pagination-tabs-margin-bottom-min
Pagination tabs min margin-bottom.
pagination-tabs-max-width Type : stringDefault : '320px'CSS variable : --spx-slider-pagination-tabs-max-width
Pagination tabs max-width.
pagination-tabs-padding-max Type : numberDefault : 1.4CSS variable : --spx-slider-pagination-tabs-padding-max
Pagination tabs max padding.
pagination-tabs-padding-min Type : numberDefault : 1CSS variable : --spx-slider-pagination-tabs-padding-min
Pagination tabs min padding.
pagination-transition-duration Type : stringDefault : 'var(--spx-transition-duration)'CSS variable : --spx-slider-pagination-transition-duration
Pagination transition-duration.
pagination-transition-timing-function Type : stringDefault : 'var(--spx-transition-timing-function)'CSS variable : --spx-slider-pagination-transition-timing-function
Pagination transition-timing-function.
prev-next-filter Type : string
Filter property for the previous and next elements.
slide-message-first Type : stringDefault : 'This is the first slide'
Screen reader message for first slide.
slide-message-last Type : stringDefault : 'This is the last slide'
Screen reader message for last slide.
slide-message-next Type : stringDefault : 'Next slide'
Screen reader message for next slide.
slide-message-previous Type : stringDefault : 'Previous slide'
Screen reader message for previous slide.
slides-per-view Type : numberDefault : 1
Amount of slides shown at once.
space-between Type : number
Space between slides.
speed Type : numberDefault : 1000
Sliding speed.
Events spxSliderDidLoad Fires after component has loaded.
Methods Slideshow Available as: Web Component Shortcode Oxygen Element Continuously playing slideshow.
<style>
img {
height: 150px;
object-fit: cover;
width: 100%;
}
</style>
<spx-slideshow gap="12px">
<img src="/wp-content/themes/spx-child/assets/images/playground/andre-benz-RRshxnCn8Lk-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/beasty--HxIhfS_dUk-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/domenico-loia-BkEF69vp3Ck-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/erol-ahmed-FTy5VSGIfiQ-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/ian-dooley-aaAllJ6bmac-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/jason-briscoe--T0La6F_WrE-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/jing-xi-lau-3ccEU_8ddog-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/leo-manjarrez--vygi0Cvz_c-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/michele-tardivo-UyiDcG_AXXs-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-Dv2n1Tv_WcI-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-NB9XC3h_jWo-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/nichlas-andersen-ZFXrgzHu1KU-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/niti-k-Ie430IZPF90-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/ryan-spencer-WJDR8_QxVR8-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/s-o-c-i-a-l-c-u-t-9b2KOWOP0OY-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/scott-webb-TYso4-CK-as-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0_x2PkKmx1Q-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0aFrSMJ3i-g-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-8FUD82rlJxs-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-93J0T3YU6io-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-GnHUOyPV0WI-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Gruxs0ZQw7E-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Km8L8QoJIq8-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-MO2tsiJ5Bek-unsplash.jpg"/>
<img src="/wp-content/themes/spx-child/assets/images/playground/zdenek-klein-mQAaKT4SuU4-unsplash.jpg"/>
</spx-slideshow>
Properties display Type : stringDefault : 'block'CSS variable : --spx-slideshow-display
Component display property.
duration Type : stringDefault : '60s'CSS variable : --spx-slideshow-duration
Duration of slideshow to complete one cycle.
gap Type : stringDefault : '1em'CSS variable : --spx-slideshow-gap
Gap between inner elements.
image-size Type : string
WordPress media size when using the helper function..
images Type : string
<?php spx\get::gallery($fieldName, $type) ?>
Gets images from an ACF or Metabox field.
images-src Type : stringChoices : 'acf', 'mb'
Gets images from an ACF or Metabox field.
max-width Type : stringDefault : '350px'CSS variable : --spx-slideshow-max-width
Max width of inner elements.
overflow Type : stringCSS variable : --spx-slideshow-overflow
If not set with this attribute, overflow should be set on the parent element.
Events spxSlideshowDidLoad Fires after component has loaded.
Snackbar Available as: Web Component Notification bars with a variety of options.
Great for success or failure messages.
In default mode, the snackbar will fade out and remove itself from the DOM.
Disappearing
Fixed Reverse
Fixed
<spx-snackbar text="Hello, I'm a snackbar.">
</spx-snackbar>
<style>
body {
min-height: 200px;
}
</style>
<spx-snackbar text="Hello, I'm a snackbar."
fixed
closeable
reverse>
</spx-snackbar>
<style>
body {
min-height: 100px;
}
</style>
<spx-snackbar text="Hello, I'm a snackbar."
fixed
closeable>
</spx-snackbar>
Properties animation-delay Type : stringDefault : '200ms'CSS variable : --spx-snackbar-animation-delay
Component animation-delay property.
animation-duration Type : stringDefault : '2000ms'CSS variable : --spx-snackbar-animation-duration
Component animation-duration property.
background Type : stringDefault : 'var(--spx-color-gray-900)'CSS variable : --spx-snackbar-background
Component background property.
border Type : stringCSS variable : --spx-snackbar-border
Component border property.
border-radius Type : stringDefault : 'var(--spx-border-radius)'CSS variable : --spx-snackbar-border-radius
Component border-radius property.
class-button Type : string
Apply classes to button.
class-text Type : string
Apply classes to text.
closeable Type : boolean
Adds option to close snackbar after its creation.
color Type : stringDefault : '#ffffff'CSS variable : --spx-snackbar-color
Component color property.
distance-x Type : stringDefault : '1em'CSS variable : --spx-snackbar-distance-x
Distance to the edge of the viewport on the x-axis.
distance-y Type : stringDefault : '1em'CSS variable : --spx-snackbar-distance-y
Distance to the edge of the viewport on the y-axis.
fixed Type : boolean
Makes snackbar not removable.
font-size Type : stringDefault : '18px'CSS variable : --spx-snackbar-font-size
Component font-size property.
font-size-max Type : numberDefault : 1.6CSS variable : --spx-snackbar-font-size-max
Component font-size-max property.
font-size-min Type : numberDefault : 1CSS variable : --spx-snackbar-font-size-min
Component font-size-min property.
identifier Type : stringDefault : 'primary'
Unique identifier for snackbar instance.
padding Type : stringDefault : '1em'CSS variable : --spx-snackbar-padding
Component padding property.
padding-max Type : numberDefault : 1.4CSS variable : --spx-snackbar-padding-max
Component padding-max property.
padding-min Type : numberDefault : 1CSS variable : --spx-snackbar-padding-min
Component padding-min property.
position Type : stringDefault : 'bottom-right'Choices : 'bottom-right', 'bottom-center', 'bottom-left', 'top-right', 'top-center', 'top-right'
Component position in page.
position-css Type : "absolute" | "fixed" | "relative" | "static"Default : 'fixed'
CSS property position of button.
reverse Type : boolean
Reverses the close button if "closable" prop is true.
space-between Type : stringDefault : '12px'
Space between snackbars.
styling Type : stringDefault : 'default'Choices : 'default', 'fluid', 'headless'
Styling.
target Type : stringDefault : 'body'
Element where snackbars should be created in.
text Type : stringDefault : "Hello, I'm a snackbar."
Text inside snackbar.
z-index Type : numberDefault : 103CSS variable : --spx-snackbar-z-index
Component z-index property.
Events spxSnackbarDidLoad Fires after component has loaded.
Methods Typewriter Available as: Web Component Shortcode Oxygen Element Animates text like it is being written on a typewriter.
Multiple
Single
<style>
* {
font-family: helvetica, sans-serif;
}
</style>
<spx-typewriter text="['First Message', 'Second Message']"
auto-start
loop>
</spx-typewriter>
<style>
* {
font-family: helvetica, sans-serif;
}
</style>
<spx-typewriter text="This text is being typed like on a typewriter :-)"
auto-start>
</spx-typewriter>
Properties auto-start Type : booleanDefault : true
Automatically starts writing.
delay Type : anyDefault : 'natural'
Writing delay in ms. Also accepts 'natural' value.
delete-speed Type : anyDefault : 'natural'
Delete delay in ms. Also accepts 'natural' value.
display Type : stringDefault : 'block'CSS variable : --spx-typewriter-display
Component display property.
loop Type : boolean
Loops the animation.
text Type : stringDefault : "I'm a typewriter"
Text that should be written.
Events spxTypewriterDidLoad Fires after component has loaded.
Methods
