import {component$, useTask$, $} from '@builder.io/qwik';
import {Tabset, Tab, TabsetCustomEvent} from 'ngx-bootstrap';
import {isBrowser} from "@builder.io/qwik/build";
export default component$(() => {
const customId = 'manualSelectionTabs';
const openTabManualy = $((tabId: string) => {
const eventDetail: TabsetCustomEvent = {
tabsetId: customId,
tab: {id: tabId, active: true}
}
window.dispatchEvent(new CustomEvent('updateTabBs', {'detail': eventDetail}))
})
return (
<>
<p>You can select tabs directly from component</p>
<button class="btn btn-primary" onClick$={() => openTabManualy('tabs-manual-selection-2')}>Select second tab</button>
<button class="btn btn-primary" onClick$={() => openTabManualy('tabs-manual-selection-3')}>Select third tab</button>
<hr/>
<Tabset customId={customId}>
<Tab heading="Basic title" id="tabs-manual-selection-1">Basic content</Tab>
<Tab heading="Basic Title 1" id="tabs-manual-selection-2">Basic content 1</Tab>
<Tab heading="Basic Title 2" id="tabs-manual-selection-3">Basic content 2</Tab>
</Tabset>
</>
);
});