ui
ui copied to clipboard
feat(PageCard): add `links` slot and props
π Linked issue
β Type of change
- [ ] π Documentation (updates to the documentation or readme)
- [ ] π Bug fix (a non-breaking change that fixes an issue)
- [x] π 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 links slot and props 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 links slot or props 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 #links>
<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-full" :links="[
{ label: 'Action 1' },
{ label: 'Action 2', variant: 'soft' }
]">
<Placeholder class="h-32" />
</UPageCard>
Output:
π Checklist
- [x] I have linked an issue or discussion.
- [x] I have updated the documentation accordingly.