Skip to content

Latest commit

richardhand @releng - 2.8.0 Pre-release - Documentation (#868)
- adds 2.8.0 to README and VERSIONS.
- adds 2.8.0 to Component Library.
- formatting fixes.
- comment fixes.
Latest commit 9ee5102 Dec 5, 2019

Files

Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
_cq_design_dialog Migrate unit test to aem mocks 2.7 (#708) Aug 30, 2019
_cq_dialog Migrate unit test to aem mocks 2.7 (#708) Aug 30, 2019
clientlibs Migrate unit test to aem mocks 2.7 (#708) Aug 30, 2019
.content.xml [Accordion][Carousel][Tabs] ./cq:isContainer="true" is in String form… Sep 13, 2019
README.md @releng - 2.8.0 Pre-release - Documentation (#868) Dec 5, 2019
_cq_editConfig.xml [Tabs][Carousel] Merge changes to master branch (#329) Oct 15, 2018
tabs.html Migrate unit test to aem mocks 2.7 (#708) Aug 30, 2019

README.md

Tabs (v1)

Tabs component written in HTL.

Features

  • Allows addition of tab panel components of varying resource type.
  • Allowed components can be configured through policy configuration.
  • Navigation to tab panels via tabs.
  • Editing features for tab panels (adding, removing, editing, re-ordering).

Use Object

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

Component Policy Configuration Properties

The component policy dialog allows definition of allowed components for the Tabs.

Edit Dialog Properties

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

  1. ./activeItem - defines the name of the item that is active by default.
  2. ./accessibilityLabel - defines an accessibility label for the tabs.

The edit dialog also allows editing of Tabs items (adding, removing, naming, re-ordering).

Client Libraries

The component provides a core.wcm.components.tabs.v1 client library category that contains a recommended base CSS styling and JavaScript component. It should be added to a relevant site client library using the embed property.

BEM Description

BLOCK cmp-tabs
    ELEMENT cmp-tabs__tablist
    ELEMENT cmp-tabs__tab
        MOD cmp-tabs__tab--active
    ELEMENT cmp-tabs__tabpanel
        MOD cmp-tabs__tabpanel--active

JavaScript Data Attribute Bindings

Apply a data-cmp-is="tabs" attribute to the wrapper block to enable initialization of the JavaScript component.

A hook attribute from the following should be added to the corresponding element so that the JavaScript is able to target it:

data-cmp-hook-tabs="tab"
data-cmp-hook-tabs="tabpanel"

Enabling Tabs Editing Functionality

The following properties and child nodes are required in the proxy component to enable full editing functionality for the Tabs:

  1. ./cq:isContainer - set to {Boolean}true, marks the Tabs as a container component
  2. ./cq:editConfig - afterchilddelete, afterchildinsert and afterchildmove listeners should be provided via the edit configuration of the proxy. _cq_editConfig.xml contains the recommended actions and can be copied to the proxy component.

The default Tabs site Client Library provides a handler for message requests between the editor and the Tabs. If the built-in Client Library is not used, a message request handler should be registered:

new Granite.author.MessageChannel("cqauthor", window).subscribeRequestMessage("cmp.panelcontainer", function(message) {
    if (message.data && message.data.type === "cmp-tabs" && message.data.id === myTabsHTMLElement.dataset["cmpPanelcontainerId"]) {
        if (message.data.operation === "navigate") {
            // handle navigation
        }
    }
});

The handler should subscribe to a cmp.panelcontainer message that allows routing of a navigate operation to ensure that the UI component is updated when the active item is switched in the editor layer.

Information

You can’t perform that action at this time.