add initialSelectedIndex prop

README.md

@@ -34,6 +34,10 @@ A tabs component for Svelte
 </Tabs>
 ```
 
+## Props
+
+- `initialSelectedIndex` (number): The index of the tab to initially select, when the Tabs component is mounted.
+
 ## Overriding styling
 
 svelte-tabs comes with a basic default style, but it can be overridden. To override the styles to use your own, you will need to use global styles that have a higher specificity than the built-in styles.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tabs",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "svelte": "src/index.js",
   "module": "dist/index.mjs",
   "main": "dist/index.js",

src/Tabs.svelte

@@ -3,9 +3,11 @@
 </script>
 
 <script>
-  import { afterUpdate, setContext, onDestroy, tick } from 'svelte';
+  import { afterUpdate, setContext, onDestroy, onMount, tick } from 'svelte';
   import { writable } from 'svelte/store';
 
+  export let initialSelectedIndex = 0;
+
   const tabElements = [];
   const tabs = [];
   const panels = [];
@@ -56,6 +58,10 @@
     labeledBy
   });
 
+  onMount(() => {
+    selectTab(tabs[initialSelectedIndex]);
+  });
+
   afterUpdate(() => {
     for (let i = 0; i < tabs.length; i++) {
       controls.update(controlsData => ({...controlsData, [tabs[i].id]: panels[i].id}));
@@ -91,4 +97,4 @@
 
 <div class="svelte-tabs" on:keydown={handleKeyDown}>
   <slot></slot>
-</div>
+</div>