Skip to content

Conversation

rasyidly
Copy link

πŸ”— 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 adds a dedicated actions slot to UPageCard, enabling users to place interactive controls (e.g., buttons, menus) alongside the title/leading area without mixing them into the default slot. This solves the common struggle when the default slot contains complex content like UTable or UForm, ensuring a clean, predictable layout. The actions slot is rendered within the card’s wrapper area so actions align naturally with the header/body composition across orientations and variants.

Here the example usage:

  • On default orientation (vertical)
<UPageCard title="Card Title" description="This is a description." icon="i-lucide-star" class="w-4xl">
  <template #actions>
    <UButton label="Action 1" />
    <UButton label="Action 2" variant="soft" />
  </template>
  <Placeholder class="h-32" />
</UPageCard>
  • On horizontal orientation
<UPageCard title="Card Title" description="This is a description." icon="i-lucide-star" orientation="horizontal" class="w-4xl">
  <template #actions>
    <UButton label="Action 1" />
    <UButton label="Action 2" variant="soft" />
  </template>
  <Placeholder class="h-32" />
</UPageCard>

Output:

Screenshot 2025-09-27 at 23 05 58

πŸ“ Checklist

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v4 #4488
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant