[Feature Request] Pass Svelte Component inside InterActiveTab component body

[themesberg]

[Feature Request] Pass Svelte Component inside InterActiveTab component body

[shinokada]

I just modified it for the svelte components.
You can see an example here.
Please update npm:

npm i -D flowbite-svelte@latest

Also please change your key name from title to name. After adding TS, I changed some of key names. Sorry.

interface InteractiveTabType {
    name: string;
    id: number;
    content: string | typeof SvelteComponent;
}

As you can see the content can hold either string or Svelte component.

[shinokada]

In the future version, the Interactive tab component change the structure. It will use slot so you can add another component or HTML etc. So it will be a BREAKING CHANGE.
The reason behind this change is to make the component more flexible. By using the slot, uses can add anything in the slot.

More details

[shinokada]

I leave the InteractiveTabs component as it is. And I just added InteractiveTabHead and TabContent components. It makes easy to add anything in the tab.
Demo

[shinokada]

Can I ask what kind of svelte component you are planning use? If you can give me an example, it will be helpful.

[Gildedter]

I'm nesting this inside a modal, as a sort of per row menu.

i.e.
Table
->Rows
-->(column) Edit Button Modal
--->XL Modal
---->Interactive Tab as a tabbed menu of sorts
----->Individual Svelte Component Forms that hold menu items

[Gildedter]

Thank you for the quick update, will update versions now. Haven't had any issues with the typings (new type props), its an easy update, thanks again for the library.