Svelte dinamik children
Arkadaşlar sekmeler dinamik olduğu için Tabs bileşeninin sekmelerini nasıl çağırabilirim?
App.svelte
<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>
Tabs.svelte
???
<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">
<!-- Sekmeler Başlıkları -->
</ul>
<div>
<!-- Sekme İçeriği -->
</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}