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; } } }

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

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

Components

Accepted answers

BenElan

Hi @LefterisKoumis,

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

Let me know if you have any additional questions!

Ben

All comments

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

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?

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>
    )
  }
}

LefterisKoumis

Hello BenElan.

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

BenElan

Hi @LefterisKoumis,

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

Let me know if you have any additional questions!

Ben

会話に参加する

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

クイックリンク

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