selected

selected is a DOM event that occurs whenever the h-tab webcomponent gets selected.

Event body

The selected body has a TTabSelectedEventDetail type which represents the details of the selected tab. It is optional so it might not exist.

Example

In this example we listen to selected event and perform an action whenever it's emitted.

useStorefront(async (storefront) => {
    document.addEventListener('selected', (event) => {
        const detail = event.detail;

        if (!detail) return;

        const { panelName } = detail;

        console.log('tab of name ', panelName, ' has been selected');
    });
});