search

daief / daisyui-vue

(WIP) Vue3 UI components based on daisyui.
https://daief.tech/daisyui-vue/components/button
Apache License 2.0
163 stars 9 forks source link

Putting class on TabPanel doesn't work #9

Open sugoidesune opened 1 year ago

sugoidesune commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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!