I think tabs and steppers would be a great feature, what do you think?

[Features] Steppers and Tabs about vue-tailwind HOT 3 CLOSED

alfonsobries commented on July 17, 2024

[Features] Steppers and Tabs

from vue-tailwind.

Comments (3)

alfonsobries commented on July 17, 2024

Sounds good! I think the tabs are more usual as an starting point I will add that to my todo list

from vue-tailwind.

commented on July 17, 2024

I love this, I'm moving over from vuetify to this. So I'll jump in with pull requests and what-not. Also, do you know for the dropdown, can we replace text with an icon so it looks something like so:

Should I create a new issue for that?

from vue-tailwind.

alfonsobries commented on July 17, 2024

Yeah its possible you can use the button-content slot

<t-dropdown>
  <template v-slot:button-content >
     <icon>
 </template>
  <p>Content of the dropdown</p>
</t-dropdown>

Notice that this component internally uses a <t-button /> so you probably will need to update the template of the button also, you can do that with the buttonProps prop

This a piece of code of a project where I do something like that:

<t-dropdown 
      v-if="actions.length"
      :visible-arrow="false"
      :button-props="{
        baseClass: 'h-full border-0 rounded-lg overflow-hidden p-0 bg-transparent',
        defaultClass: '',
        defaultSizeClass: ''
      }"
      placement="bottom-end"
      class="ml-auto block sm:hidden"
      dropdown-class="bg-white rounded-lg flex flex-col py-2 shadow-xl z-10 mt-3 w-56"
    >
      <template v-slot:button-content="{ shown }">
        <span 
          :class="[
            'flex h-full w-full py-2 px-3 text-white rounded-lg',
            shown ? 'bg-gray-600' : 'bg-gray-700 hover:bg-gray-800',
          ]"
        >
          <icon
            class="fill-current"
            name="menu"
            width="20"
            heigth="20"
          />
        </span>
      </template>
      <nuxt-link
        v-for="({ text, to, variant }, index) in actions"
        :key="index"
        :to="to"
        class="block hover:text-white text-gray-800 px-4 py-2 hover:bg-indigo-500 w-full text-left"
      >{{ text }}</nuxt-link>
    </t-dropdown>

PD: im not happy with how the button props work in this component I probably will refactor it soon

from vue-tailwind.

Recommend Projects