nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

adding tab property, removes all tab members.

LefterisKoumis

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?

タグ付けされた投稿をもっと見る

Accepted answers

BenElan

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.

All comments

LefterisKoumis

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.

BenElan

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.

LefterisKoumis

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?

BenElan

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

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.