v2.5.2
Giriş yap

Svelte dinamik children

trsherlock
227 defa görüntülendi

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>
Cevap yaz
Cevaplar (1)
trsherlock
366 gün önce

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}