UIModalHeader

UIModalHeader

A header component designed for use within UIModal components, providing a consistent layout for modal titles, descriptions, and close buttons.

<template>
  <UIModal v-model:show="showModal">
    <UIModalHeader
      :title="'Confirm Action'"
      :description="'Are you sure you want to proceed?'"
      :showClose="true"
      @close="handleClose"
    >
      <template #icon>
        <AlertTriangleIcon
          class="w-6 h-6 text-warning-500"
        />
      </template>

      <template #extra>
        <UIBadge type="warning">
          Important
        </UIBadge>
      </template>
    </UIModalHeader>

    <div class="p-6">
      Modal content
    </div>

    <UIModalFooter>
      <UIButton @click="handleClose">
        Cancel
      </UIButton>
      <UIButton type="primary" @click="handleConfirm">
        Confirm
      </UIButton>
    </UIModalFooter>
  </UIModal>
</template>

<script setup lang="ts">
const showModal = ref(false)

const handleClose = () => {
  showModal.value = false
}

const handleConfirm = () => {
  // Handle confirmation
  showModal.value = false
}
</script>

Props

• title (string): Modal title
• description (string): Modal description
• showClose (boolean): Show close button
• closeIcon (Component): Custom close icon
• bordered (boolean): Show bottom border
• size (‘small’ | ‘medium’ | ‘large’): Header size
• align (‘left’ | ‘center’ | ‘right’): Content alignment
• divider (boolean): Show divider below header

Events

• close: Emitted when close button is clicked

Slots

• default: Custom header content
• title: Custom title content
• description: Custom description content
• icon: Icon before title
• extra: Additional content after title
• close: Custom close button content

Usage Examples

1. Basic Header:

<template>
  <UIModalHeader
    title="Settings"
    description="Configure your preferences"
  />
</template>

2. Custom Icon and Badge:

<template>
  <UIModalHeader title="Delete Account">
    <template #icon>
      <TrashIcon class="w-6 h-6 text-error-500" />
    </template>
    <template #extra>
      <UIBadge type="error">
        Destructive Action
      </UIBadge>
    </template>
  </UIModalHeader>
</template>

3. Centered Header:

<template>
  <UIModalHeader
    title="Welcome"
    description="Get started with your account"
    align="center"
  >
    <template #icon>
      <LogoIcon class="w-8 h-8" />
    </template>
  </UIModalHeader>
</template>

4. Custom Title:

<template>
  <UIModalHeader>
    <template #title>
      <div class="flex items-center space-x-2">
        <UserIcon class="w-5 h-5" />
        <span>User Profile</span>
        <UIBadge type="success">
          Pro
        </UIBadge>
      </div>
    </template>
  </UIModalHeader>
</template>

Best Practices

1. Content:

   • Keep titles clear and concise
   • Use descriptions for context
   • Include relevant icons
   • Show important metadata

2. Layout:

   • Maintain consistent spacing
   • Align content appropriately
   • Use dividers when needed
   • Consider mobile views

3. Interaction:

   • Provide clear close button
   • Handle keyboard navigation
   • Support touch targets
   • Consider animations

4. Accessibility:

   • Use semantic headings
   • Include ARIA labels
   • Support screen readers
   • Maintain focus management

5. Visual Hierarchy:

   • Use appropriate sizing
   • Maintain contrast
   • Group related elements
   • Consider visual weight