Tabs (v1)

Adaptive Form Tabs component written in HTL.

Features

Allows addition of tab items of varying resource type.
Allowed components can be configured through policy configuration.
Ability to force a single panel to be displayed.
First tab is selected by default.
Allows replacing this component with other component (as mentioned below).

Use Object

The Tabs component uses the com.adobe.cq.forms.core.components.models.form.Panel Sling model as its Use-object.

Edit Dialog Properties

The following properties are written to JCR for this Panel Container component and are expected to be available as Resource properties: The following properties are written to JCR for this Accordion component and are expected to be available as Resource properties:

./jcr:title - defines the label to use for this panel
./name - defines the name of the panel, which will be submitted with the form data
./layout - defines the layout type, either simple (default) or responsiveGrid; if no value is defined, the component will fallback to the value defined by the component's policy
./bindref - defines the data binding, and how data will be sent
./visible - defines initial state of panel visibility
./enabled - defines initial state of panel if its enabled or not
./tooltip - defines tooltip on panel title
./description - defines a help message that can be rendered in the field as a hint for the user

BEM Description

BLOCK cmp-tabs
    ELEMENT cmp-tabs__it
    ELEMENT cmp-tabs__label
    ELEMENT cmp-tabs__label-container
    ELEMENT cmp-tabs__tablist
    ELEMENT cmp-tabs__tab
        MOD cmp-tabs__tab--active
    ELEMENT cmp-tabs__title
    ELEMENT cmp-tabs__icon
    ELEMENT cmp-tabs__label
    ELEMENT cmp-tabs__shortdescription
    ELEMENT cmp-tabs__longdescription
    ELEMENT cmp-tabs__questionmark

Note

By placing the class names cmp-tabs__label and cmp-tabs__questionmark within the cmp-tabs__label-container class, you create a logical grouping of the label and question mark elements. This approach simplifies the process of maintaining a consistent styling for both elements.

Client Libraries

The component provides a core.forms.components.tabs.v1.runtime client library category that contains a JavaScript component. It should be added to a relevant site client library using the embed property.

JavaScript Data Attribute Bindings

The following attributes must be added for the initialization of the horizontal-tabs component in the form view:

data-cmp-is="adaptiveFormTabs"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"

Enabling Editing Functionality

The following property is required in the proxy component to enable full editing functionality for the Panel Container:

./cq:isContainer - set to {Boolean}true, marks the Panel Container as a container component

Replace feature:

We support replace feature that allows replacing accordion component to any of the below components:

Accordion
Panel
Wizard Layout

Information

Vendor: Adobe
Version: v1
Compatibility: Cloud
Status: production-ready