Any way to allow some tab to be closable and not others

[Chris Dietz]

I'm aware of the showCloseButton feature, but is there a way I can enable or disable this on a per tab basis?  i.e.  I want my first tab to be not closable, but all others are?

[Satheesh Kumar Balasubramanian]

Hi Chris,

 

You can use the below customized style to achieve your requirement.

 

https://stackblitz.com/edit/react-tab-hide-icon-customize?file=index.js

 

index.js:   

          <TabComponent

            showCloseButton={true}

            heightAdjustMode="Auto"

            id="defaultTab"

          >

            <TabItemsDirective>

              <TabItemDirective

                cssClass={customClass}

                header={headertext[0]}

                content={tabContent1}

              />

              <TabItemDirective header={headertext[1]} content={tabContent2} />

              <TabItemDirective header={headertext[2]} content={tabContent3} />

            </TabItemsDirective>

          </TabComponent>

 

index.css:   

.e-tab .e-tab-header.e-close-show .hide-close-icon .e-icons.e-close-icon {

  display: none;

}

 

Kindly try the above sample and let us know if this meets your requirement.

 

Regards,

Satheesh Kumar B

[Chris Dietz]

perfect thank you!

[Vengatesh Maniraj]

You are most welcome!!!