README

安装

composer require sintex/sintex-layout

发布布局

php artisan vendor:publish --provider="SintexLayout\SintexLayoutProdvider"

组件

• 顶部导航布局
• 侧边栏布局

x- 标签 是 Laravel 7x 的实现

顶部导航布局

x-sintex-layout-top-nav

使用方法

<x-sintex-layout-top-nav  
    
    title="Page Title" 
    header-text="Dashboard" 
    header-text-sm="This is the dashboard" 
    nav-bar-color="navbar-dark navbar-success"  
    brand-name="My Company"
    text-sizing="text-md"
    >
    
</x-sintex-layout-top-nav>

参数

• title - 页面标题 [必需]
• header-text - 内容标题文本[必需]
• header-text-sm - 内容标题小文本 [必需]
• nav-bar-color - 导航栏颜色 [可选]
• brand-name - 品牌名称 [必需]
• text-sizing - 正文文本大小 [可选]

只需在组件标签内添加参数。

命名插槽

• navbar - 导航菜单栏插槽
• breadcrumbItems - 面包屑项插槽 <li>
• content - 插入内容的插槽
• footer - 插入页脚或公司详情或信息的插槽
• headerImports - 页眉中的自定义 CSS 或 JS 文件插槽
• footerImports - 页脚中的自定义 JS 文件插槽

按照以下示例用法在组件中插入插槽。

<x-sintex-layout-top-nav  
    
    title="Page Title" 
    header-text="Dashboard" 
    header-text-sm="This is the dashboard" 
    nav-bar-color="navbar-dark navbar-success"  
    brand-name="My Company">

    <x-slot name="breadcrumbItems">

        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active">Dashboard v1</li>

    </x-slot>
    
</x-sintex-layout-top-nav>

要查看组件的完整实现示例，发布后在 /views/vendor/sintex-layouts/top-nav 可以找到视图。

侧边栏布局

x-sintex-layout-sidebar

使用方法

<x-sintex-layout-sidebar 

	title="Server Error!" 
	header-text="test" 
	nav-bar-color="navbar-dark navbar-success"
	sidebar-color="sidebar-light-warning" 
	brand-color="navbar-primary" 
    brand-name="Helpdesk 4"
    text-sizing="text-md"
    >

</x-sintex-layout-sidebar>

参数

• title - 页面标题 [必需]
• header-text - 内容标题文本[必需]
• nav-bar-color - 导航栏颜色 [可选]
• sidebar-color - 侧边栏面板颜色 [可选]
• brand-color - 侧边栏品牌颜色 [可选]
• brand-name - 品牌名称 [必需]
• text-sizing - 正文文本大小 [可选]

命名插槽

• navbar - 导航菜单栏插槽
• sidebarMenu - 侧边栏菜单项插槽 <li>
• breadcrumbItems - 面包屑项插槽 <li>
• sidebarUserPanel - 侧边栏用户面板插槽
• content - 插入内容的插槽
• footer - 插入页脚或公司详情或信息的插槽
• headerImports - 页眉中的自定义 CSS 或 JS 文件插槽
• footerImports - 页脚中的自定义 JS 文件插槽

<x-sintex-layout-sidebar 

	title="Server Error!" 
	header-text="test" 
	nav-bar-color="navbar-dark navbar-success"
	sidebar-color="sidebar-light-warning" 
	brand-color="navbar-primary" 
	brand-name="Helpdesk 4">

    <x-slot name="breadcrumbItems">

        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active">Dashboard v1</li>

    </x-slot>
    
</x-sintex-layout-sidebar>

要查看组件的完整实现示例，发布后在 /views/vendor/sintex-layouts/sidebar 可以找到视图。

致谢

Laravel 框架 Admin LTE 3