pingecom/l5-tabler

Laravel 5.* 的 Tabler 模板

安装次数: 2,537

依赖: 0

建议者: 0

安全性: 0

星标: 26

关注者: 3

分支: 4

公开问题: 1

语言:HTML

v1.0.4 2019-03-03 03:11 UTC

This package is auto-updated.

Last update: 2024-09-16 00:16:25 UTC


README

Tabler preview

Laravel 5 的 Tabler 管理模板

安装

运行 composer 安装包

composer require "pingecom/l5-tabler":"~1.0.0"

或将包名添加到 require 部分

...
require: {
    ...
    "pingecom/l5-tabler":"~1.0.0"
    ...
}
...

如果 Laravel < 5.5,将提供者添加到 config/app.php 中的提供者列表

...
"providers" => [
    ...
    '\Pingecom\Tabler\Providers\TablerServiceProvider',
    ...
]
...

通过创建名为 DefineMenu 的新中间件来设置菜单中间件

更多信息请参阅:https://github.com/lavary/laravel-menu

<?php

namespace App\Http\Middleware;

use Closure;
use Lavary\Menu\Facade as Menu;

class DefineMenus
{
    public function handle($request, Closure $next)
    {
        Menu::make('primary', function ($menu) {
            $menu->add('Home');
            $menu->add('About', 'about');
            $menu->add('Services', 'services');
            $menu->add('Contact', 'contact');
        });

        return $next($request);
    }
}

将中间件添加到中间件列表

protected $middlewareGroups = [
    'web' => [
        ...,
        \App\Http\Middleware\DefineMenus::class,
    ],
    ...
]

发布所有资产、视图等以继续。

php artisan vendor:publish --provider="Pingecom\Tabler\Providers\TablerServiceProvider" 

使用方法

创建认证页面

php artisan make:tabler 

在你的视图中,你可以扩展布局

@extends('tabler::layouts.main')
@push('scripts')
@endpush
@push('styles')
@endpush
@section('content')
@stop

要使用 tabler 插件,例如:图表地图。你可以将 JavaScript 和样式表注入到两个 stacks

@extends('tabler::layouts.main')
@push('scripts')
    <script src="{{ asset('admin/assets/plugins/charts-c3/plugin.js') }}"></script>
    <script type="text/javascript">
        require(['c3', 'jquery'], function (c3, $) {
            $(document).ready(function () {
    	        var chart = c3.generate({
    	            bindto: '#chart-employment',
    	            data: {
    		            ...
    		        }
    		    });
    	    });
        });
    </script>
@endpush
@push('styles')
    <link href="{{ asset('admin/assets/plugins/charts-c3/plugin.css') }}" rel="stylesheet"/>
@endpush

@section('content')
    <div class="my-3 my-md-5">
        <div class="container">
            <div class="page-header">
                <h1 class="page-title">
                    Charts
                </h1>
            </div>
            <div class="row row-cards">
                <div class="col-lg-6 col-xl-4">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Employment Growth</h3>
                        </div>
                        <div class="card-body">
                            <div id="chart-employment" style="height: 16rem"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop	

自定义

config/tabler.php 中打开 tabler.php,你可以自定义一些 URL、logo、后缀

return [
    'suffix' => 'Tabler',
    'logo' => 'https://tabler.github.io/tabler/demo/brand/tabler.svg',
    'urls' => [
        'logout' => 'logout',
        'profile' => 'profile',
        'settings' => 'settings',
        'search' => 'search',
        'homepage' => '/',
        'login' => 'login',
        'post-login' => 'login',
        'forgot' => 'password/reset',
        'register' => 'register',
        'post-register' => 'register',
        'post-email' => 'password/email',
        'post-reset' => 'password/reset'
    ],
    'footer' => 'Copyright © 2018 Tabler. Theme by codecalm.net All rights reserved.',
    'support' => [
        'search' => false,
        'footer-menu' => false,
    ]
];

自定义视图,打开 resources/views/vendor/tabler 以自定义。自定义资产,打开 public/admin/assets

文档

有关完整文档,请访问 tabler.github.io/tabler/docs

许可协议

本项目受 MIT 许可协议 许可。

问题

如果您有任何问题,请 创建新问题

贡献者

待办事项