topic Re: adding tab property, removes all tab members. in Calcite Design System Questions

adding tab property, removes all tab members.

LefterisKoumis — Thu, 07 Jul 2022 21:50:22 GMT

This is an example of multi level tabs.

https://codepen.io/benesri/pen/NWgeqgP

However, if you modify line 6, by adding the property tab="Test1" it removes all children of this tab.

The same occurs, if you add property tab="Test2" to line 7.

Why can't we use the tab property?

Re: adding tab property, removes all tab members.

BenElan — Fri, 08 Jul 2022 01:02:30 GMT

When using the tab property, you need to use the same value for the calcite-tab-title and its calcite-tab. Here is a codepen:

https://codepen.io/benesri/pen/WNzwxNg

It does mention it in the tab-title documentation - https://developers.arcgis.com/calcite-design-system/components/tab-title/#component-api-properties-tab

Re: adding tab property, removes all tab members.

LefterisKoumis — Fri, 08 Jul 2022 15:37:01 GMT

Thank you.

As soon as I insert the tab property, I get these errors in console regardless if I use Chrome or Edge. Any idea for the cause and how to prevent them?

Re: adding tab property, removes all tab members.

BenElan — Fri, 08 Jul 2022 15:42:36 GMT

If you added tab="test" to a calcite-tab-title, then adding tab="test" to the corresponding calcite-tab will make the errors go away.

Re: adding tab property, removes all tab members.

LefterisKoumis — Fri, 08 Jul 2022 16:26:38 GMT

I did that and that's when the error shows up in the console. I added the tab to both calcite-tab-title and its calcite-tab to begin with, but I was getting those errors. Then, I thought I was misreading the property instructions on calcite design website, so I modified the code and posted the codepen on the community forum. Thank you for the responses, and since the errors are not fatal I will just ignore them.

Re: adding tab property, removes all tab members.

BenElan — Fri, 08 Jul 2022 16:37:37 GMT

It is probably because codepen live updates, so you are getting the error when you add the tab property to calcite-tab-title and before you add it to calcite-tab. Once all of the tab properties are added you will no longer see the error.