SuperAPI AI 工具集

moonshine-layout

通用与其它

查看项目

更新于 10-16 01:19

技能介绍

用途:帮助开发者创建 MoonShine 后台面板布局,并配置正确的导航结构。

主要能力:支持 Sidebar(侧边栏)、TopBar(顶部栏)、MobileBar(移动端栏)以及组合布局;可配置菜单、Logo、菜单动作、汉堡按钮等导航元素。相关资料提到 .guidelines/blade-components.md 文件,内含布局组件结构、Sidebar 配置所需包装器、TopBar 结构、MobileBar 响应式导航、包装器与内容组织等信息。

必要用法:布局根节点使用 x-moonshine::layout;HTML 包装器使用 <x-moonshine::layout.html :with-alpine-js="true" :with-themes="true">;头部使用 x-moonshine::layout.head,主体使用 x-moonshine::layout.body。Sidebar 需要 menu-header、menu-logo、menu-actions、menu-burger、menu menu--vertical;TopBar 需要 menu-logo、menu menu--horizontal、menu-actions、menu-burger;MobileBar 可选,结构同 TopBar,且须置于 Sidebar/TopBar 之上。Logo 属性必填,如 logo="/path/to/logo.svg";Burger 可设为 sidebar、topbar 或 mobile-bar;水平菜单使用 :top="true"。头部资源需包含 @vite(['resources/css/main.css', 'resources/js/app.js'], 'vendor/moonshine')。

适用场景:构建 MoonShine 管理后台页面布局、设置响应式导航、组织顶部或侧边导航结构。

限制:资料未提供更具体的菜单项写法、样式定制范围、版本兼容性及具体界面效果说明。