Kestros is currently in beta, all documentation is subject to change. Additional documentation will be added in subsequent releases. Beta releases are not recommended for production use.

Component Variations

Variations provide optional styles or scripts to a baseline Component View. Any number or combination of Variations can be applied to a Component. Variations can be configured in one of two ways:

  • Wrapper Variations
  • Inline Variations

Before creating any variations, you will need to add a variations folder under your Component View.

Wrapping Variations

Wrapper Variations automatically apply the variation's class to a Component's wrapping DOM element when applied. These variations generally need their own CSS and/or JS to be added, which works the same as Vendor Libraries.

<?xml version="1.0" encoding="UTF-8"?>\n<jcr:root\n    xmlns:jcr="http://www.jcp.org/jcr/1.0"\n    jcr:primaryType="kes:ComponentVariation"\n    jcr:title="Center"\n    inline="false"/>

Inline Variations

Inline Variations can be used when the variation classes are already provided by the UI Framework's CSS/JS. When creating you Variation folder, make sure that the folder name matches the desired class.

<?xml version="1.0" encoding="UTF-8"?>\n<jcr:root\n    xmlns:jcr="http://www.jcp.org/jcr/1.0"\n    jcr:primaryType="kes:ComponentVariation"\n    jcr:title="Center"\n    inline="false"/>

Configuring Components to Use Inline Variations

Since Inline Variations are not automatically applied to a Component's wrapping HTML, Component Views should be manually call the inlineVariations property of ComponentRequestContext, like the following:

<sly\n    data-sly-use.link="${'io.kestros.cms.components.basic.content.button.Button'}"\n    data-sly-use.context="${'io.kestros.cms.foundation.content.ComponentRequestContext'}"/>\n\n<button href="${button.link}" class="my-button-class ${context.inlineVariations}">${button.text}</button>