UITabPane

UITabPane

A tab panel component that works in conjunction with UITabs to organize content into tabbed sections.

<template>
  <UITabs v-model:activeKey="activeTab">
    <UITabPane
      key="info"
      tab="Information"
      :closable="false"
      :disabled="false"
    >
      <div class="p-4">
        <h3 class="text-lg font-medium mb-2">
          Basic Information
        </h3>
        <p class="text-gray-600">
          Tab content goes here
        </p>
      </div>
    </UITabPane>

    <UITabPane
      key="settings"
      tab="Settings"
      :forceRender="true"
    >
      <template #tab>
        <div class="flex items-center space-x-2">
          <SettingsIcon class="w-4 h-4" />
          <span>Settings</span>
        </div>
      </template>

      <div class="p-4">
        Settings content
      </div>
    </UITabPane>
  </UITabs>
</template>

<script setup lang="ts">
const activeTab = ref('info')
</script>

Props

• key (string | number): Unique identifier for the tab
• tab (string): Tab label text
• disabled (boolean): Disable this tab
• closable (boolean): Show close button
• forceRender (boolean): Render content even when inactive
• animated (boolean): Enable content transition
• destroyInactiveTabPane (boolean): Destroy inactive tab content
• active (boolean): Control active state manually
• lazy (boolean): Lazy load tab content

Events

• click: Emitted when tab is clicked
• close: Emitted when close button is clicked
• contextmenu: Emitted on right click

Slots

• tab: Custom tab label content
• default: Tab panel content
• closeIcon: Custom close button content

Usage Examples

1. Basic Tab Pane:

<template>
  <UITabs v-model:activeKey="activeTab">
    <UITabPane
      key="1"
      tab="Tab 1"
    >
      Content for Tab 1
    </UITabPane>
  </UITabs>
</template>

2. Custom Tab Label:

<template>
  <UITabPane key="notifications">
    <template #tab>
      <div class="flex items-center">
        <BellIcon class="w-4 h-4 mr-2" />
        <span>Notifications</span>
        <UIBadge
          :value="count"
          class="ml-2"
        />
      </div>
    </template>
    Notifications content
  </UITabPane>
</template>

3. Closable Tab:

<template>
  <UITabPane
    key="editor"
    :closable="true"
    @close="handleClose"
  >
    <template #tab>
      <div class="flex items-center">
        <FileIcon class="w-4 h-4 mr-2" />
        <span>{{ fileName }}</span>
      </div>
    </template>
    <UICodeEditor v-model="code" />
  </UITabPane>
</template>

4. Lazy Loading:

<template>
  <UITabPane
    key="data"
    tab="Data"
    :lazy="true"
  >
    <template #default="{ active }">
      <DataTable
        v-if="active"
        :data="tableData"
      />
    </template>
  </UITabPane>
</template>

Best Practices

1. Content Organization:

   • Group related content logically
   • Use clear, concise tab labels
   • Maintain consistent content structure
   • Consider content hierarchy

2. Performance:

   • Use lazy loading for heavy content
   • Destroy inactive content when needed
   • Optimize tab switching animations
   • Handle data loading efficiently

3. Accessibility:

   • Use descriptive tab labels
   • Support keyboard navigation
   • Maintain focus management
   • Provide ARIA attributes

4. User Experience:

   • Keep tab order logical
   • Handle tab overflow gracefully
   • Provide loading states
   • Preserve tab state when needed

5. Responsive Design:

   • Handle long tab labels
   • Adapt to container width
   • Consider mobile interactions
   • Maintain touch targets