topic Re: Multi level tabs in Calcite Design System Questions

Multi level tabs

LefterisKoumis — Wed, 11 Aug 2021 22:56:48 GMT

I see the example for tabs in the components. It is a two-level tabs

https://esri.github.io/calcite-components/?path=/story/components-tabs--simple

Is there a way to define another level of tabs like this? Thanks.

link to image

Re: Multi level tabs

BenElan — Mon, 27 Sep 2021 18:30:29 GMT

Hi @LefterisKoumis,

You can nest tabs like this: https://codepen.io/benesri/pen/NWgeqgP

Let me know if you have any additional questions!

Ben

Re: Multi level tabs

LefterisKoumis — Thu, 07 Jul 2022 20:59:45 GMT

Hello BenElan.

This solution you provided how can it be displayed as a vertical tabs?

Re: Multi level tabs

LefterisKoumis — Wed, 27 Jul 2022 18:37:09 GMT

Hello @BenElan.

I tried to use the same script in Experience Builder to get nested tabs. But it has a strange behavior.

See this short video that when you click on the Tab B Title it removes the nest tabs and it displays the content of Title 2 Title. Below is the script. Any ideas why is happening? Thanks.

(view in My Videos)

/** @jsx jsx */ import { React, AllWidgetProps, jsx } from "jimu-core"; import { setAssetPath } from "@esri/calcite-components/dist/components"; import "@esri/calcite-components/dist/components/calcite-tabs"; import "@esri/calcite-components/dist/components/calcite-tab"; import "@esri/calcite-components/dist/components/calcite-tab-nav"; import "@esri/calcite-components/dist/components/calcite-tab-title"; import { CalciteTabs, CalciteTab, CalciteTabNav, CalciteTabTitle } from "@esri/calcite-components-react"; import "@esri/calcite-components/dist/calcite/calcite.css"; export default class Widget extends React.PureComponent<AllWidgetProps<any>, any> { render() { return ( <div> <calcite-tabs> <calcite-tab-nav slot="tab-nav"> <calcite-tab-title active>Tab 1 Title</calcite-tab-title> <calcite-tab-title>Tab 2 Title</calcite-tab-title> </calcite-tab-nav> <calcite-tab active> <calcite-tabs> <calcite-tab-nav slot="tab-nav"> <calcite-tab-title>Tab A Title</calcite-tab-title> <calcite-tab-title>Tab B Title</calcite-tab-title> </calcite-tab-nav> <calcite-tab>Tab A Content</calcite-tab> <calcite-tab>Tab B Content</calcite-tab> </calcite-tabs> </calcite-tab> <calcite-tab>Tab 2 Content</calcite-tab> </calcite-tabs> </div> ) } }

Re: Multi level tabs

BenElan — Mon, 01 Aug 2022 18:36:24 GMT

We do not support vertical tabs at the moment. You can use a vertical Stepper or an Action Bar instead

Re: Multi level tabs

BenElan — Mon, 01 Aug 2022 18:41:26 GMT

That is expected. The nested Tabs is the content for the first parent Tab. The content for the second parent Tab is just "Tab 2 Content". The code I provided has the same behavior. Isn't that what you were looking for?

Re: Multi level tabs

LefterisKoumis — Mon, 01 Aug 2022 18:53:18 GMT

Well not exactly. As the video shows, when you click on the Tab B Title it show the content of that tab (Tab BTitle) not of its parent Tab 2 Title.

The link you sent to me from codepen, it works. It shows Tab B Title content when you click on the Tab B Title (see below) . However, in ExB it doesn't. See the last second of the video clip I attached above when you click on the Tab B Title.

Re: Multi level tabs

BenElan — Mon, 01 Aug 2022 19:04:17 GMT

Oh sorry, I misunderstood. Hmm not sure what's going on. I wasn't able to reproduce it in this codesandbox:

https://codesandbox.io/s/ccr-nested-tabs-lp7ei6?file=/src/App.js

Are there any errors in the browser console? Have you tried using the CCR components that you are importing?

You're also importing React from Experience Buidler; they may be customizing something on their end that is causing the issue. I suggest asking this in the Experience Builder community, hopefully they some insight.

Re: Multi level tabs

BenElan — Mon, 01 Aug 2022 19:18:42 GMT

Also make sure you are using at least Calcite Components (CC) v1.0.0-beta.81 and/or its corresponding Calcite Components React (CCR) version, which is v0.22.0. A bug fix for nested tabs was released with beta.81:

https://github.com/Esri/calcite-components/pull/4250

FYI - you can check which version of CC is being used by CCR with this shell command:

npm view @esri/calcite-components-react@0.22.0 dependencies.@esri/calcite-components