import {component$, useClientEffect$, useStore, useTask$, $} from '@builder.io/qwik';
import {Tabset, Tab, TabsetCustomEvent} from 'ngx-bootstrap';
export default component$(() => {
const state = useStore({
isTabDisabled: false
});
const customId = 'disabledTabs';
const disableTab = $(() => {
state.isTabDisabled = !state.isTabDisabled
const eventDetail: TabsetCustomEvent = {
tabsetId: customId,
tab: {id: 'tabs-disabled-2', disabled: state.isTabDisabled}
}
window.dispatchEvent(new CustomEvent('updateTabBs', {'detail': eventDetail}))
})
return (
<>
<p>Tabs can be enabled or disabled by changing <code>disabled</code> input property</p>
<button class={'btn btn-primary'} onClick$={() =>(disableTab())}>Toggle disabled state</button>
<hr/>
<p>disabled state value: {(state.isTabDisabled).toString()}</p>
<hr/>
{state.isTabDisabled}
<Tabset customId={customId}>
<Tab heading="Basic title" id="tabs-disabled-1">Basic content</Tab>
<Tab heading="Basic Title 1" id="tabs-disabled-2">Basic content 1</Tab>
<Tab heading="Basic Title 2" id="tabs-disabled-3">Basic content 2</Tab>
</Tabset>
</>
);
});