Create a better implementation for the Tabs component #16

New issue

Open

opened 2024-12-19 15:33:16 -05:00 by BenjaminPalko · 1 comment

BenjaminPalko commented

2024-12-19 15:33:16 -05:00

(Migrated from github.com)

Currently we give the Tabs component a list of strings to use as tab labels and then bind the index value of the currently active tab.

<Tabs bind:selected={tabIndex} tabs={['Login', 'Register']} />

Can we see if its possible to implement tabs to use sub-components like so...

<Tabs bind:selected={tabIndex}>
    <Tab label='Tab 1'>{content-1}</Tab>
    <Tab label='Tab 2'>{content-2</Tab>
</Tabs>

To achieve this, the Tabs component would have to attach an onclick to its children so that they can set the 'selected' value to their index, the 'active' prop would also need to be set which is just a comparison of the tabs index to the current 'selected' value.

The implementation using DaisyUI is defined in these docs:
https://daisyui.com/components/tab/#radio-tab-lifted--tab-content

Currently we give the Tabs component a list of strings to use as tab labels and then bind the index value of the currently active tab. ```html <Tabs bind:selected={tabIndex} tabs={['Login', 'Register']} /> ``` Can we see if its possible to implement tabs to use sub-components like so... ```html <Tabs bind:selected={tabIndex}> <Tab label='Tab 1'>{content-1}</Tab> <Tab label='Tab 2'>{content-2</Tab> </Tabs> ``` To achieve this, the Tabs component would have to attach an onclick to its children so that they can set the 'selected' value to their index, the 'active' prop would also need to be set which is just a comparison of the tabs index to the current 'selected' value. The implementation using DaisyUI is defined in these docs: https://daisyui.com/components/tab/#radio-tab-lifted--tab-content

BenjaminPalko commented

2025-01-08 10:25:14 -05:00

(Migrated from github.com)

Can probably just adopt melt-ui
https://www.melt-ui.com/docs/builders/tabs

Can probably just adopt melt-ui https://www.melt-ui.com/docs/builders/tabs