DashboardSection
A customizable section to display content in a DashboardPanelContent.
Take a look at the Dashboard template to see what you can do! (view source)
Usage
The DashboardSection component is used to group related content together.
Use the icon, title and description props to customize the content of the section.
Profile
This information will be displayed publicly.
<template>
<UDashboardSection
icon="i-heroicons-user"
title="Profile"
description="This information will be displayed publicly."
orientation="vertical"
class="px-4 mt-6"
/>
</template>
You can also add some Buttons with the links prop or use the #links slot.
Profile
This information will be displayed publicly.
<template>
<UDashboardSection
icon="i-heroicons-user"
title="Profile"
description="This information will be displayed publicly."
:links="[{ label: 'Save changes', color: 'black' }]"
/>
</template>
The DashboardSection is generally placed inside a DashboardPanelContent.
pages/settings/index.vue
<template>
<UDashboardPanelContent>
<UDashboardSection title="Theme">
<template #links>
<UColorModeSelect />
</template>
</UDashboardSection>
<UDivider class="mb-4" />
<UDashboardSection title="Profile">
<template #links>
<UButton type="submit" label="Save changes" color="black" />
</template>
<UFormGroup>
<UInput />
</UFormGroup>
</UDashboardSection>
</UDashboardPanelContent>
</template>
Slots
icon
{}
title
{}
description
{}
links
{}
default
{}
Props
icon
string
undefinedtitle
string
undefineddescription
string
undefinedui
any
{}orientation
"vertical" | "horizontal"
"vertical"links
(Button & { click?: (...args: any[]) => void; })[]
[]Config
{
wrapper: 'divide-y divide-gray-200 dark:divide-gray-800 space-y-6 *:pt-6 first:*:pt-2 first:*:pt-0 mb-6',
container: 'flex flex-wrap items-center justify-between gap-4',
inner: 'flex items-start gap-4',
title: 'text-gray-900 dark:text-white font-semibold',
description: 'mt-1 text-sm text-gray-500 dark:text-gray-400',
links: 'flex flex-wrap items-center gap-1.5',
icon: {
wrapper: 'inline-flex',
base: 'w-12 h-12 flex-shrink-0 text-gray-900 dark:text-white'
}
}