Can we add image as the title of the tab in tabs component? | Community
Skip to main content
N
NaveenT10
Level 2
March 10, 2023
Solved

Can we add image as the title of the tab in tabs component?

  • March 10, 2023
  • 2 replies
  • 2154 views

Hi All,

I want to add icon(image field) along with the title of the tab. Is it possible to do it?

similar to below:-

 

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Rohit_Utreja

@rohit_utreja Have you created the tabitems node ? if yes, can you share the resourceType of it? because i'm unable to find that node in core components.


@naveent10 
Please find below dialog xml.

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="nt:unstructured" jcr:title="Tabs" sling:resourceType="cq/gui/components/authoring/dialog" extraClientlibs="[core.wcm.components.commons.editor.dialog.childreneditor.v1,core.wcm.components.tabs.v1.editor]" helpPath="https://www.adobe.com/go/aem_cmp_tabs_v1" trackingFeature="core-components:tabs:v1"> <content granite:class="cmp-tabs__editor" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabs jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs" maximized="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <tabitems jcr:primaryType="nt:unstructured" jcr:title="Items" sling:resourceType="granite/ui/components/coral/foundation/container" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabitems jcr:primaryType="nt:unstructured" sling:resourceType="core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor"/> </items> </column> </items> </columns> </items> <parentConfig jcr:primaryType="nt:unstructured" icon="/content/dam/mynewsite/346c4c9073be5d94887f2db0a6cf3f4f.png"/> </tabitems> <properties jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="granite/ui/components/coral/foundation/container" maximized="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <activeItem jcr:primaryType="nt:unstructured" sling:resourceType="/libs/granite/ui/components/coral/foundation/form/hidden" name="./activeItem"> <granite:data jcr:primaryType="nt:unstructured" cmp-tabs-v1-dialog-edit-hook="activeItem"/> </activeItem> <activeSelect jcr:primaryType="nt:unstructured" sling:resourceType="/libs/granite/ui/components/coral/foundation/form/select" fieldDescription="The item that is active by default." fieldLabel="Active Item"> <granite:data jcr:primaryType="nt:unstructured" cmp-tabs-v1-dialog-edit-hook="activeSelect"/> <items jcr:primaryType="nt:unstructured"> <default jcr:primaryType="nt:unstructured" text="Default" value=""/> </items> </activeSelect> <id jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldDescription="HTML ID attribute to apply to the component." fieldLabel="ID" name="./id"/> </items> </column> </items> </columns> </items> </properties> <accessibility jcr:primaryType="nt:unstructured" jcr:title="Accessibility" sling:resourceType="granite/ui/components/coral/foundation/container" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <accessibilityLabel jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldDescription="Value of an aria-label attribute, which describes the purpose of the set of tabs." fieldLabel="Label" name="./accessibilityLabel" value=""/> </items> </column> </items> </columns> </items> </accessibility> </items> </tabs> </items> </content> </jcr:root>

2 replies

Rohit_Utreja
Community Advisor
Rohit_UtrejaCommunity Advisor
Community Advisor
March 10, 2023

Hi @naveent10 ,
could you please elaborate the use case by providing more details?

    N
    NaveenT10Author
    Level 2
    March 11, 2023

    @rohit_utreja updated the question with a image.

      Rohit_Utreja
      Community Advisor
      Rohit_UtrejaCommunity Advisor
      Community Advisor
      March 11, 2023

      Hi @naveent10 ,

      Add a "parentConfig" node inside the tab, parallel to "items" as shown below.

      Add a new property name as icon(String) and provide icon path. 

      Please find below the screenshot for more details.

       

      Hope it helps!!

        SantoshSai
        Community Advisor
        SantoshSaiCommunity Advisor
        Community Advisor
        March 11, 2023

        Hi @naveent10 ,

        Yes It's possible! As you can see in the below image

        instead of the text field you can customize it by implementing icons either with the datasource or asset path. You can achieve this by leveraging/extending core component here "core/wcm/components/tabs/v1/tabs"

        Hope that helps!

        Regards,

        Santosh

         

        Santosh Sai
          N
          NaveenT10Author
          Level 2
          March 11, 2023

          Thanks for the reply @santoshsai, I see that text field is coming from children editor(/libs/core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor) html. How can we modify it in our extended component? 

            Terms & ConditionsAccessibility statement

            Loading footer...