Dashboard Layout
Introduction
The DashboardLayout component is designed for admin dashboards, featuring sidebar navigation and top navbar. It provides a complete management interface framework with responsive design and dark theme support.
The current version is Beta, which may be unstable. Please use with caution.
Basic Usage
The simplest dashboard layout usage, with multiple main content padding (mainPadding) size demos:
主内容区默认 padding (cosy:p-4)
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';
const menuItems: NavItem[] = [
{ text: '仪表盘', href: '/dashboard', icon: 'dashboard' },
{ text: '用户管理', href: '/dashboard/users', icon: 'users' },
{ text: '设置', href: '/dashboard/settings', icon: 'settings' },
];
---
<DashboardLayout
title="mainPadding=md (默认)"
navItems={menuItems}
mainPadding="md">
<div class="cosy:p-2 cosy:bg-base-200 cosy:rounded">
mainPadding = md (cosy:p-4)
</div>
<!-- 演示按钮 -->
<div class="cosy:card cosy:bg-base-300 cosy:mt-4">
<div class="cosy:card-body">
<h2 class="cosy:card-title">Toast 演示</h2>
<p class="cosy:text-sm cosy:text-base-content/70">
点击下面的按钮来触发不同类型的 Toast 通知
</p>
<div class="cosy:flex cosy:gap-2 cosy:mt-4">
<button
class="cosy:btn cosy:btn-info"
onclick="window.showToast?.({ message: '这是一条信息通知', type: 'info' })">
显示信息
</button>
<button
class="cosy:btn cosy:btn-success"
onclick="window.showToast?.({ message: '操作成功完成！', type: 'success' })">
显示成功
</button>
<button
class="cosy:btn cosy:btn-warning"
onclick="window.showToast?.({ message: '请注意这个警告信息', type: 'warning' })">
显示警告
</button>
<button
class="cosy:btn cosy:btn-error"
onclick="window.showToast?.({ message: '出现了一个错误', type: 'error' })">
显示错误
</button>
</div>
</div>
</div>
</DashboardLayout>
主内容区小号 padding (cosy:p-2)
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';
const menuItems: NavItem[] = [
{ text: '仪表盘', href: '/dashboard', icon: 'dashboard' },
{ text: '用户管理', href: '/dashboard/users', icon: 'users' },
{ text: '设置', href: '/dashboard/settings', icon: 'settings' },
];
---
<DashboardLayout title="mainPadding=sm" navItems={menuItems} mainPadding="sm">
<div class="cosy:p-2 cosy:bg-base-200 cosy:rounded">
mainPadding = sm (cosy:p-2)
</div>
<!-- 演示按钮 -->
<div class="cosy:card cosy:bg-base-300 cosy:mt-4">
<div class="cosy:card-body">
<h2 class="cosy:card-title">Toast 演示</h2>
<p class="cosy:text-sm cosy:text-base-content/70">
点击下面的按钮来触发不同类型的 Toast 通知
</p>
<div class="cosy:flex cosy:gap-2 cosy:mt-4">
<button
class="cosy:btn cosy:btn-info"
onclick="window.showToast?.({ message: '这是一条信息通知', type: 'info' })">
显示信息
</button>
<button
class="cosy:btn cosy:btn-success"
onclick="window.showToast?.({ message: '操作成功完成！', type: 'success' })">
显示成功
</button>
<button
class="cosy:btn cosy:btn-warning"
onclick="window.showToast?.({ message: '请注意这个警告信息', type: 'warning' })">
显示警告
</button>
<button
class="cosy:btn cosy:btn-error"
onclick="window.showToast?.({ message: '出现了一个错误', type: 'error' })">
显示错误
</button>
</div>
</div>
</div>
</DashboardLayout>
主内容区大号 padding (cosy:p-8)
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';
const menuItems: NavItem[] = [
{ text: '仪表盘', href: '/dashboard', icon: 'dashboard' },
{ text: '用户管理', href: '/dashboard/users', icon: 'users' },
{ text: '设置', href: '/dashboard/settings', icon: 'settings' },
];
---
<DashboardLayout title="mainPadding=lg" navItems={menuItems} mainPadding="lg">
<div class="cosy:p-2 cosy:bg-base-200 cosy:rounded">
mainPadding = lg (cosy:p-8)
</div>
<!-- 演示按钮 -->
<div class="cosy:card cosy:bg-base-300 cosy:mt-4">
<div class="cosy:card-body">
<h2 class="cosy:card-title">Toast 演示</h2>
<p class="cosy:text-sm cosy:text-base-content/70">
点击下面的按钮来触发不同类型的 Toast 通知
</p>
<div class="cosy:flex cosy:gap-2 cosy:mt-4">
<button
class="cosy:btn cosy:btn-info"
onclick="window.showToast?.({ message: '这是一条信息通知', type: 'info' })">
显示信息
</button>
<button
class="cosy:btn cosy:btn-success"
onclick="window.showToast?.({ message: '操作成功完成！', type: 'success' })">
显示成功
</button>
<button
class="cosy:btn cosy:btn-warning"
onclick="window.showToast?.({ message: '请注意这个警告信息', type: 'warning' })">
显示警告
</button>
<button
class="cosy:btn cosy:btn-error"
onclick="window.showToast?.({ message: '出现了一个错误', type: 'error' })">
显示错误
</button>
</div>
</div>
</div>
</DashboardLayout>
主内容区超大 padding (cosy:p-12)
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';
const menuItems: NavItem[] = [
{ text: '仪表盘', href: '/dashboard', icon: 'dashboard' },
{ text: '用户管理', href: '/dashboard/users', icon: 'users' },
{ text: '设置', href: '/dashboard/settings', icon: 'settings' },
];
---
<DashboardLayout title="mainPadding=xl" navItems={menuItems} mainPadding="xl">
<div class="cosy:p-2 cosy:bg-base-200 cosy:rounded">
mainPadding = xl (cosy:p-12)
</div>
<!-- 演示按钮 -->
<div class="cosy:card cosy:bg-base-300 cosy:mt-4">
<div class="cosy:card-body">
<h2 class="cosy:card-title">Toast 演示</h2>
<p class="cosy:text-sm cosy:text-base-content/70">
点击下面的按钮来触发不同类型的 Toast 通知
</p>
<div class="cosy:flex cosy:gap-2 cosy:mt-4">
<button
class="cosy:btn cosy:btn-info"
onclick="window.showToast?.({ message: '这是一条信息通知', type: 'info' })">
显示信息
</button>
<button
class="cosy:btn cosy:btn-success"
onclick="window.showToast?.({ message: '操作成功完成！', type: 'success' })">
显示成功
</button>
<button
class="cosy:btn cosy:btn-warning"
onclick="window.showToast?.({ message: '请注意这个警告信息', type: 'warning' })">
显示警告
</button>
<button
class="cosy:btn cosy:btn-error"
onclick="window.showToast?.({ message: '出现了一个错误', type: 'error' })">
显示错误
</button>
</div>
</div>
</div>
</DashboardLayout>
主内容区无 padding
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';
const menuItems: NavItem[] = [
{ text: '仪表盘', href: '/dashboard', icon: 'dashboard' },
{ text: '用户管理', href: '/dashboard/users', icon: 'users' },
{ text: '设置', href: '/dashboard/settings', icon: 'settings' },
];
---
<DashboardLayout
title="mainPadding=none"
navItems={menuItems}
mainPadding="none">
<div class="cosy:p-2 cosy:bg-base-200 cosy:rounded">
mainPadding = none (无 padding)
</div>
<!-- 演示按钮 -->
<div class="cosy:card cosy:bg-base-300 cosy:mt-4">
<div class="cosy:card-body">
<h2 class="cosy:card-title">Toast 演示</h2>
<p class="cosy:text-sm cosy:text-base-content/70">
点击下面的按钮来触发不同类型的 Toast 通知
</p>
<div class="cosy:flex cosy:gap-2 cosy:mt-4">
<button
class="cosy:btn cosy:btn-info"
onclick="window.showToast?.({ message: '这是一条信息通知', type: 'info' })">
显示信息
</button>
<button
class="cosy:btn cosy:btn-success"
onclick="window.showToast?.({ message: '操作成功完成！', type: 'success' })">
显示成功
</button>
<button
class="cosy:btn cosy:btn-warning"
onclick="window.showToast?.({ message: '请注意这个警告信息', type: 'warning' })">
显示警告
</button>
<button
class="cosy:btn cosy:btn-error"
onclick="window.showToast?.({ message: '出现了一个错误', type: 'error' })">
显示错误
</button>
</div>
</div>
</div>
</DashboardLayout>
Sidebar Sizes
DashboardLayout supports four different sidebar sizes to accommodate various design needs:
12rem (192px) - 紧凑布局，移动端友好
主内容区
这是侧边栏尺寸为 sm (12rem) 的示例。
主内容区
这是侧边栏尺寸为 md (16rem) 的示例。
主内容区
这是侧边栏尺寸为 lg (18rem) 的示例。
主内容区
这是侧边栏尺寸为 xl (20rem) 的示例。
---
import { DashboardLayout } from '@coffic/cosy-ui';
import { navItems, userMenuItems } from './data';
---
<DashboardLayout
title="管理后台 (SM)"
navItems={navItems}
sidebarSize="sm"
userName="演示用户"
userMenuItems={userMenuItems}>
<div class="cosy-prose">
<h1>主内容区</h1>
<p>这是侧边栏尺寸为 sm (12rem) 的示例。</p>
</div>
</DashboardLayout>
16rem (256px) - 默认尺寸，平衡的选择
主内容区
这是侧边栏尺寸为 sm (12rem) 的示例。
主内容区
这是侧边栏尺寸为 md (16rem) 的示例。
主内容区
这是侧边栏尺寸为 lg (18rem) 的示例。
主内容区
这是侧边栏尺寸为 xl (20rem) 的示例。
---
import { DashboardLayout } from '@coffic/cosy-ui';
import { navItems, userMenuItems } from './data';
---
<DashboardLayout
title="管理后台 (MD)"
navItems={navItems}
sidebarSize="md"
userName="演示用户"
userMenuItems={userMenuItems}>
<div class="cosy-prose">
<h1>主内容区</h1>
<p>这是侧边栏尺寸为 md (16rem) 的示例。</p>
</div>
</DashboardLayout>
18rem (288px) - 宽松布局，适合更多内容
主内容区
这是侧边栏尺寸为 sm (12rem) 的示例。
主内容区
这是侧边栏尺寸为 md (16rem) 的示例。
主内容区
这是侧边栏尺寸为 lg (18rem) 的示例。
主内容区
这是侧边栏尺寸为 xl (20rem) 的示例。
---
import { DashboardLayout } from '@coffic/cosy-ui';
import { navItems, userMenuItems } from './data';
---
<DashboardLayout
title="管理后台 (LG)"
navItems={navItems}
sidebarSize="lg"
userName="演示用户"
userMenuItems={userMenuItems}>
<div class="cosy-prose">
<h1>主内容区</h1>
<p>这是侧边栏尺寸为 lg (18rem) 的示例。</p>
</div>
</DashboardLayout>
20rem (320px) - 最宽布局，适合复杂导航
主内容区
这是侧边栏尺寸为 sm (12rem) 的示例。
主内容区
这是侧边栏尺寸为 md (16rem) 的示例。
主内容区
这是侧边栏尺寸为 lg (18rem) 的示例。
主内容区
这是侧边栏尺寸为 xl (20rem) 的示例。
---
import { DashboardLayout } from '@coffic/cosy-ui';
import { navItems, userMenuItems } from './data';
---
<DashboardLayout
title="管理后台 (XL)"
navItems={navItems}
sidebarSize="xl"
userName="演示用户"
userMenuItems={userMenuItems}>
<div class="cosy-prose">
<h1>主内容区</h1>
<p>这是侧边栏尺寸为 xl (20rem) 的示例。</p>
</div>
</DashboardLayout>
Sidebar Footer Custom Content
DashboardLayout supports adding custom content to the sidebar footer, which can be used to display user information, copyright information, or other important details:
展示如何在侧边栏底部显示用户信息，包括头像、姓名和职位
---
/**
* @component EDashboardLayoutSidebarFooterUserInfo
* @description 展示侧边栏底部用户信息的示例
*/
import { DashboardLayout } from '@coffic/cosy-ui';
const navItems = [
{ href: '/dashboard', icon: 'home', text: '仪表盘' },
{ href: '/dashboard/users', icon: 'users', text: '用户管理', badge: '5' },
{ href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---
<DashboardLayout
title="个人中心"
navItems={navItems}
userName="管理员"
sidebarSize="sm"
class="cosy:h-full">
<div class="cosy:p-4">
<div class="cosy:alert cosy:alert-info">
<span>👤</span>
<div>这里展示了如何在侧边栏底部显示用户信息</div>
</div>
</div>
<!-- 侧边栏底部用户信息 -->
<div slot="sidebar-footer" class="cosy:p-4">
<div class="cosy:flex cosy:items-center cosy:gap-3">
<div class="cosy:avatar">
<div
class="cosy:w-10 cosy:rounded-full cosy:bg-primary cosy:text-primary-content cosy:flex cosy:items-center cosy:justify-center">
<span class="cosy:text-sm cosy:font-bold">张</span>
</div>
</div>
<div>
<div class="cosy:font-semibold cosy:text-sm">张三</div>
<div class="cosy:text-xs cosy:opacity-70">产品经理</div>
</div>
</div>
</div>
</DashboardLayout>
展示如何显示版权信息、版本号和系统状态标识
---
/**
* @component EDashboardLayoutSidebarFooterCopyright
* @description 展示侧边栏底部版权信息的示例
*/
import { DashboardLayout } from '@coffic/cosy-ui';
const navItems = [
{ href: '/dashboard', icon: 'home', text: '仪表盘' },
{ href: '/dashboard/users', icon: 'users', text: '用户管理', badge: '5' },
{ href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---
<DashboardLayout
title="管理系统"
navItems={navItems}
sidebarSize="sm"
class="cosy:h-full">
<div class="cosy:p-4">
<div class="cosy:alert cosy:alert-success">
<span>📄</span>
<div>这里展示了如何显示版权和版本信息</div>
</div>
</div>
<!-- 侧边栏底部版权信息 -->
<div slot="sidebar-footer" class="cosy:p-4 cosy:text-center">
<div class="cosy:text-xs cosy:opacity-60 cosy:space-y-1">
<div>© 2024 您的公司</div>
<div>版本 v1.0.0</div>
<div class="cosy:badge cosy:badge-success cosy:badge-xs">稳定版</div>
</div>
</div>
</DashboardLayout>
展示如何显示实时系统状态信息，如在线用户数、CPU使用率等
---
/**
* @component EDashboardLayoutSidebarFooterStatus
* @description 展示侧边栏底部系统状态的示例
*/
import { DashboardLayout } from '@coffic/cosy-ui';
const navItems = [
{ href: '/dashboard', icon: 'home', text: '仪表盘' },
{ href: '/dashboard/users', icon: 'users', text: '用户管理', badge: '5' },
{ href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---
<DashboardLayout
title="监控面板"
navItems={navItems}
sidebarSize="sm"
class="cosy:h-full">
<div class="cosy:p-4">
<div class="cosy:alert cosy:alert-warning">
<span>📊</span>
<div>这里展示了如何显示系统状态信息</div>
</div>
</div>
<!-- 侧边栏底部系统状态 -->
<div slot="sidebar-footer" class="cosy:p-3">
<div class="cosy:space-y-2">
<div class="cosy:flex cosy:justify-between cosy:items-center">
<span class="cosy:text-xs cosy:opacity-70">系统状态</span>
<span class="cosy:badge cosy:badge-success cosy:badge-xs">正常</span>
</div>
<div class="cosy:flex cosy:justify-between cosy:items-center">
<span class="cosy:text-xs cosy:opacity-70">在线用户</span>
<span class="cosy:text-xs cosy:font-mono">1,234</span>
</div>
<div class="cosy:flex cosy:justify-between cosy:items-center">
<span class="cosy:text-xs cosy:opacity-70">CPU使用率</span>
<span class="cosy:text-xs cosy:font-mono">23%</span>
</div>
</div>
</div>
</DashboardLayout>
Handling Long Content
When the content in the main area exceeds the viewport height, DashboardLayout will automatically display a vertical scrollbar to ensure all content is accessible. The example below uses a container with a fixed height to demonstrate this behavior.
这是一段很长的内容
当主区域的内容超过视口高度时，`DashboardLayout` 会自动显示一个垂直滚动条，以确保所有内容都可访问。下面的示例文本是为了撑开高度，演示这个效果。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam.
Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget suscipit nibh est vel metus. Aliquam erat volutpat. Integer a sem. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
更多内容
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
---
import { DashboardLayout } from '@coffic/cosy-ui';
import { navItems } from './data';
---
<DashboardLayout title="内容超长" navItems={navItems}>
<div class="prose cosy:max-w-none">
<h2>这是一段很长的内容</h2>
<p>
当主区域的内容超过视口高度时，`DashboardLayout`
会自动显示一个垂直滚动条，以确保所有内容都可访问。下面的示例文本是为了撑开高度，演示这个效果。
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a,
semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a,
enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.
Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque
fermentum. Maecenas adipiscing ante non diam.
</p>
<p>
Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget
suscipit nibh est vel metus. Aliquam erat volutpat. Integer a sem. Nam
libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
debitis aut rerum necessitatibus saepe eveniet ut et voluptates
repudiandae sint et molestiae non recusandae. Itaque earum rerum hic
tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias
consequatur aut perferendis doloribus asperiores repellat.
</p>
<h3>更多内容</h3>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga.
</p>
<p>
Et harum quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus.
</p>
</div>
</DashboardLayout>
Toast Notification System
DashboardLayout has a built-in complete Toast notification system that can use global notification functionality without additional configuration:
// Simple usage
showToast('Operation successful!');
// Usage with type
showToast({
message: 'Data saved successfully',
type: 'success',
duration: 3000
});
// Four message types
showToast({ message: 'Operation successful', type: 'success' });
showToast({ message: 'Network error', type: 'error' });
showToast({ message: 'Please note', type: 'warning' });
showToast({ message: 'System message', type: 'info' });
// Manual control
const toastId = showToast('Processing...');
setTimeout(() => closeToast(toastId), 2000);
// Clear all notifications
clearAllToasts();Confirm Dialog
DashboardLayout has a built-in confirm dialog functionality for important action confirmation:
// Trigger confirm dialog
document.getElementById('dashboard-confirm').showModal();
// Handle confirmation event
document.addEventListener('confirm-dialog-confirm', (e) => {
const { dialogId } = e.detail;
if (dialogId === 'dashboard-confirm') {
// Handle confirmation action
console.log('User confirmed the action');
}
});Usage Methods:
- Trigger via button:
<button data-confirm-dialog-target="dashboard-confirm">
Delete
</button>- Trigger via navigation item:
const navItems = [
{
text: 'Logout',
href: '#',
icon: 'logout',
onClick: "document.getElementById('dashboard-confirm').showModal()"
}
];