Can't activate a Tab programmatically
MDesharnaisX opened this issue · comments
When using Tabs and trying to change the active one programmatically, nothing happens.
I can't change the active one at load time but not afterwards (that excludes onMount).
Example
import "bootstrap/dist/css/bootstrap.min.css";
import { TabContent, TabPane, Button } from "sveltestrap";
let active = 1;
function increase() {
active = (active + 1) % 3;
}
</script>
<style>
</style>
<Button on:click={increase}>Another tab</Button>
{active}
<TabContent>
<TabPane tabId="alpha" tab="Alpha" active={active==0}>
<h2>Alpha</h2>
<img
alt="Alpha Flight"
src="https://upload.wikimedia.org/wikipedia/en/4/49/Alpha_Flight_cast_picture_%28John_Byrne_era%29.gif"
/>
</TabPane>
<TabPane tabId="bravo" tab="Bravo" active={active==1}>
<h2>Bravo</h2>
<img
alt="Johnny Bravo"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Johnny_Bravo_series_logo.png/320px-Johnny_Bravo_series_logo.png"
/>
</TabPane>
<TabPane tabId="charlie" tab="Charlie" active={active==2}>
<h2>Charlie</h2>
<img
alt="Charlie Brown"
src="https://upload.wikimedia.org/wikipedia/en/2/22/Charlie_Brown.png"
/>
</TabPane>
</TabContent>