Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Putting class on TabPanel doesn't work #9

Open
sugoidesune opened this issue Mar 8, 2023 · 2 comments
Open

Putting class on TabPanel doesn't work #9

sugoidesune opened this issue Mar 8, 2023 · 2 comments

Comments

@sugoidesune
Copy link

Putting a class on <TabPanel> doesn't get passed down to the html
so this:
<TabPanel name="1" title="Login" class="rounded-xl m-0">
resutls in this <div class="dv-tab-content">

@daief
Copy link
Owner

daief commented Mar 8, 2023

TabPanel can be understood as a "placeholder" component that does not render content itself. Its job is to send its props and children to Tabs for rendering. From another perspective, the <div class="dv-tab-content"> is defined within Tabs and currently cannot be configured.

If you want to apply some style to tab content, can you try like this?

<Tabs v-model="{currentTab.value}" class="my-tabs">
  <TabPanel name="1" title="TabPanel 1"> ... </TabPanel>
  <TabPanel name="2" title="TabPanel 2"> ... </TabPanel>
</Tabs>

<style>
  .my-tabs .dv-tab-content {
    /* ... */
  }
</style>

Finally, thank you for using this library! But to be honest, I do not recommend using it at this time as some of the designs and implementations are not very mature, and there will be some changes in the future that may cause you trouble.

@sugoidesune
Copy link
Author

sugoidesune commented Mar 8, 2023

Thank you. Initially i just needed to remove the margin-top: 8px; but later wanted to add a border and more. So in the end i had to put another div inside so i can add flex etc.

<TabPanel > <div class="flex flex-col ..."  </TabPanel>

I will keep that in mind, and try to use it as little as possible!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants