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

feat(utabs): add badge component to UTabs #2627

Open
wants to merge 7 commits into
base: dev
Choose a base branch
from

Conversation

husamMousa
Copy link
Contributor

@husamMousa husamMousa commented Nov 13, 2024

πŸ”— Linked issue

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

This PR introduces a badge component to the UTabs feature. The badge is intended to provide users with visual indicators (e.g., notifications or counts) on tab elements.

Key changes include:

  • Implementation of a badge element within UTabs.
  • Updated styling and logic to support badge integration without impacting existing tab functionality.

Screenshot 2024-11-13 115631
Screenshot 2024-11-13 115818

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@maxsteinwand
Copy link
Contributor

You can already use the default slot of UTabs to customize the label: https://ui.nuxt.com/components/tabs#default

<script setup lang="ts">
const items = [
  {
    label: 'Getting Started',
    content: 'This is the content shown for Tab1',
    badge: 20,
    icon: 'i-heroicons-information-circle'
  },
  {
    label: 'Installation',
    content: 'And, this is the content for Tab2',
    disabled: true,
  },
  {
    label: 'Theming',
    content: 'Finally, this is the content for Tab3',
    badge: 'New',
  },
];
</script>

<template>
  <UTabs :items="items" class="w-full">
    <template #default="{ item, index, selected, disabled }">
      <span>{{ item.label }}</span>
      <UBadge
        v-if="item.badge"
        class="flex-shrink-0 ms-1.5 relative rounded"
        :label="item.badge"
        size="xs"
      />
    </template>
  </UTabs>
</template>

@husamMousa
Copy link
Contributor Author

@maxsteinwand,

Thank you for your feedback! I see that it's possible to customize the label using the default slot, as shown in your example. However, my proposed feature aims to enhance the user experience and streamline the implementation process.

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

Successfully merging this pull request may close these issues.

2 participants