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

Get tab name onclick

LefterisKoumis

Using the tabs and wondering of how to capture the title of the tab when it's clicked on.

Tried:

document.querySelector("calcite-tab-title").addEventListener("click", handleActionBarClick1);

Najděte více příspěvků označených jako

Components

Accepted answers

BenElan

Here is a codepen: https://codepen.io/benesri/pen/wvprVQd?editors=1010

All comments

LefterisKoumis

There are current issues with the selectedTitle as acknowledged by ESRI.

Please use this instead.

https://codepen.io/lkoumis1/pen/GRXEwyN?editors=1111

Wittawat

Thank you for your reply. I've tried the event.target.selectedTitle but I have received an incorrect tab name.

Please kindly see the example here: https://codepen.io/aonwittawat/pen/vYzZozd

LefterisKoumis

Since version 1.0.3 the event.detail.tab is depreciated.

See:

https://github.com/Esri/calcite-components/blob/master/CHANGELOG.md

use instead:

event.target.selectedTitle

Wittawat

@BenElan could you please share the code with calcite v1.0.7? It seems like the event.detail.tab did not work with new version.

BenElan

Here is a codepen: https://codepen.io/benesri/pen/wvprVQd?editors=1010

BenElan

The event's callback function doesn't need to be async in your code snippet. Also, the tab info is event.detail.tab. Here is the code:

document.addEventListener("calciteTabChange", (event) => console.log(event.detail.tab));

LefterisKoumis

Thanks.

I setup id:

<calcite-tab-nav slot="tab-nav" id="thetabs">
 
//then wanted to capture the event:
const controlTabs = document.getElementById("thetabs")
  controlTabs.addEventListener("calciteTabChange", async (event) => { console.log(event.target.value) });

When you click the first tab it works. but when you click the other tabs it return undefined.

BenElan

Calcite Components have custom events which you can find on their doc page. For example, here is the event for `calcite-tab-title`:

https://developers.arcgis.com/calcite-design-system/components/tab-title/#component-api-events

calcite-tab-nav also has an event:

https://developers.arcgis.com/calcite-design-system/components/tab-nav/#component-api-events-calciteTabChange

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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