Svelte dinamik children

<script> import Tabs from './Tabs.svelte'; import Tab1 from './Tab1.svelte'; import Tab2 from './Tab2.svelte'; import Tab3 from './Tab3.svelte'; </script> <Tabs selectIndex={0}> <Tab1 title="Sekme 1" /> <Tab2 title="Sekme 2" /> <Tab3 title="Sekme 3" /> </Tabs>

<div class="absolute inset-2 mx-auto bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"> <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">  </ul> <div>  </div> </div>

Bir kaynak buldum ve uyarladım. Şimdilik işimi çözdü.

App.svelte

<script>
    import Tabs from "./Tabs.svelte";
	import Tab1 from "./Tab1.svelte";
	import Tab2 from "./Tab2.svelte";
	const children = [
	    {
	        title: "Tab 1",
	        component: Tab1
	    },
	    {
	        title: "Tab 2",
	        component: Tab2
	    }
    ]
</script>

<Tabs children={[Tab1, Tab2]} defaultName="Tab1" />

Tabs.svelte

<script>
	export let children = [], index=0, defaultName = "";
	defaultName = children[0].component.name
</script>
{#each children as child , i (i)}
	<button on:click={()=>{index=i; defaultName=child.component.name}}>{child.title}</button>
{/each}
<h2>Sekmenin Index değerine göre</h2>	
{#each children as child , i (i)}
	{#if i == index}
		<svelte:component this={child.component} />
	{/if}
{/each}
<hr>
<h2>Sekmenin Adına Göre(Benzersiz olmalı)</h2>
{#each children as child , i (i)}
	{#if child.component.name == defaultName}
		<svelte:component this={child.component} />
	{/if}
{/each}