UIDrawerContent

UIDrawerContent

A component that provides a structured layout for content within a UIDrawer, with support for header, body, and footer sections.

<template>
  <UIDrawer v-model:show="showDrawer">
    <UIDrawerContent
      :title="'Edit Profile'"
      :loading="loading"
      :showDivider="true"
      @close="handleClose"
    >
      <template #header>
        <div class="flex items-center justify-between">
          <h2 class="text-lg font-medium">
            Edit Profile
          </h2>
          <UIButton
            type="text"
            @click="handleClose"
          >
            <XIcon class="w-5 h-5" />
          </UIButton>
        </div>
      </template>

      <template #default>
        <div class="p-6">
          <UIForm
            :model="formData"
            :rules="formRules"
          >
            <UIFormItem label="Name">
              <UIInput v-model="formData.name" />
            </UIFormItem>
            <UIFormItem label="Email">
              <UIInput v-model="formData.email" />
            </UIFormItem>
          </UIForm>
        </div>
      </template>

      <template #footer>
        <div class="flex justify-end space-x-4 px-6 py-4">
          <UIButton
            type="default"
            @click="handleClose"
          >
            Cancel
          </UIButton>
          <UIButton
            type="primary"
            :loading="saving"
            @click="handleSave"
          >
            Save Changes
          </UIButton>
        </div>
      </template>
    </UIDrawerContent>
  </UIDrawer>
</template>

<script setup lang="ts">
const showDrawer = ref(false)
const loading = ref(false)
const saving = ref(false)
const formData = ref({
  name: '',
  email: ''
})

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

const handleSave = async () => {
  saving.value = true
  try {
    // Save changes
    showDrawer.value = false
  } finally {
    saving.value = false
  }
}
</script>

Props

• title (string): Drawer title
• loading (boolean): Show loading state
• showDivider (boolean): Show dividers between sections
• bodyStyle (object): Custom body section styles
• headerStyle (object): Custom header section styles
• footerStyle (object): Custom footer section styles
• scrollable (boolean): Enable body scrolling
• closeOnClickOutside (boolean): Close when clicking outside
• closeOnEsc (boolean): Close on Escape key
• maskClosable (boolean): Close when clicking mask

Events

• close: Emitted when drawer is closed
• afterClose: Emitted after close animation
• afterOpen: Emitted after open animation

Slots

• header: Custom header content
• default: Main drawer content
• footer: Custom footer content
• close: Custom close button content
• loading: Custom loading state

Usage Examples

1. Basic Drawer Content:

<template>
  <UIDrawerContent title="Details">
    <div class="p-6">
      Content goes here
    </div>
  </UIDrawerContent>
</template>

2. Form in Drawer:

<template>
  <UIDrawerContent
    title="Create Item"
    :loading="loading"
  >
    <UIForm class="p-6">
      <UIFormItem label="Name">
        <UIInput v-model="name" />
      </UIFormItem>
    </UIForm>

    <template #footer>
      <div class="flex justify-end space-x-4">
        <UIButton @click="cancel">
          Cancel
        </UIButton>
        <UIButton
          type="primary"
          @click="save"
        >
          Save
        </UIButton>
      </div>
    </template>
  </UIDrawerContent>
</template>

3. Custom Header:

<template>
  <UIDrawerContent>
    <template #header>
      <div class="flex items-center justify-between p-4">
        <div class="flex items-center space-x-4">
          <UIAvatar :src="user.avatar" />
          <div>
            <h3 class="font-medium">
              {{ user.name }}
            </h3>
            <p class="text-sm text-gray-500">
              {{ user.email }}
            </p>
          </div>
        </div>
        <UIButton
          type="text"
          @click="close"
        >
          <XIcon class="w-5 h-5" />
        </UIButton>
      </div>
    </template>
  </UIDrawerContent>
</template>

4. Loading State:

<template>
  <UIDrawerContent
    title="Loading Data"
    :loading="true"
  >
    <template #loading>
      <div class="flex items-center justify-center p-8">
        <UISpinner size="lg" />
      </div>
    </template>
  </UIDrawerContent>
</template>

Best Practices

1. Layout:

   • Use consistent padding
   • Maintain clear hierarchy
   • Group related actions
   • Consider content scrolling

2. Header:

   • Keep titles concise
   • Include close button
   • Show relevant metadata
   • Use appropriate icons

3. Footer:

   • Align actions consistently
   • Order buttons logically
   • Show loading states
   • Handle long labels

4. Content:

   • Structure content clearly
   • Use appropriate spacing
   • Handle overflow gracefully
   • Show loading states

5. Accessibility:

   • Use semantic markup
   • Support keyboard navigation
   • Manage focus properly
   • Provide ARIA labels