Component Title | Tab |
Description | Tabs allow a user to switch between panels of related content. Panels of varying component type can be created. |
Features |
|
Location | /apps/ehi-core/aem65/components/content/tabs/v1/tabs |
sling:resourceSuperType | core/wcm/components/tabs/v1/tabs |
Supported AEM Versions | 6.5 |
Editing Mode | inPlaceEdit |
Component Group | Cheerios Experience |
Use Object | The Tabs component uses the com.adobe.cq.wcm.core.components.models.Tabs Sling model as its Use-object. |
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.
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
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"
The following properties and child nodes are required in the proxy component to enable full editing functionality for the Tabs:
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.
Extending the components can be done in multiple ways depending on the needs of the brand component.
Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.
Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.
The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.
Use this approach if you need to change the Sling Model to update the backend logic.
Files that will need to be added when extending:
It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.
This gives us the flexibility to change our classes or add attributes easily. Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.
The following properties are written to JCR for this Tabs component and are expected to be available as Resource properties:
The edit dialog also allows editing of Tabs items (adding, removing, naming, re-ordering).
The component policy dialog allows definition of allowed components for the Tabs.
Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.
Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.
The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.
Use this approach if you need to change the Sling Model to update the backend logic.
Files that will need to be added when extending:
It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.
This gives us the flexibility to change our classes or add attributes easily. Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.
- jcr:primaryType: nt:unstructured
- jcr:createdBy: E524Z2
- jcr:lastModifiedBy: E524Z2
- jcr:created:
- jcr:lastModified:
- sling:resourceType: ehi-core/aem65/components/content/tabs/v1/tabs
- List
- RTE
- Image
-
Accordion
2020-01-06
-
Anchor
2020-01-06
-
Container
2019-12-20
-
External Content
2019-12-20
-
Form - Button
2019-11-26
-
Form - Hidden
2019-11-26
-
Form - Options
2020-01-06
-
Form - Text
2020-01-06
-
Image
2020-01-30
-
Link
2019-11-26
-
List
2020-02-06
-
Rich Text Component
2020-02-14
-
Separator
2019-11-26
-
Tab
2020-02-06
-
Teaser
2020-01-06
-
Title / Heading
2019-11-26
Rich Text Header 1
Here is some bullets
- item 1
- item 2
- item 3
- etc