Multi level tabs

[LefterisKoumis]

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 

[BenElan · Accepted solution]

Hi @LefterisKoumis,

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

Let me know if you have any additional questions!

Ben

[LefterisKoumis]

Hello BenElan.

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

[BenElan]

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

[LefterisKoumis]

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.

/** @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>
    )
  }
}

[BenElan]

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?

[LefterisKoumis]

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.

[BenElan]

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.

[BenElan]

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