Tabler admin template for Laravel 5
Run composer for installing package:
composer require "pingecom/l5-tabler":"~1.0.0"Or add package name to require section:
...
require: {
...
"pingecom/l5-tabler":"~1.0.0"
...
}
...If Laravel < 5.5, Add a provider to the list of providers in config/app.php
...
"providers" => [
...
'\Pingecom\Tabler\Providers\TablerServiceProvider',
...
]
...Setup the middleware for menu by create a new middleware named: DefineMenu
You can read more at: 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);
}
}Add a middleware to the middleware list
protected $middlewareGroups = [
'web' => [
...,
\App\Http\Middleware\DefineMenus::class,
],
...
]Publish all assets, views and others to continue.
php artisan vendor:publish --provider="Pingecom\Tabler\Providers\TablerServiceProvider" Create authentication pages
php artisan make:tabler In your view, you can extends from layout
@extends('tabler::layouts.main')
@push('scripts')
@endpush
@push('styles')
@endpush
@section('content')
@stopTo use tabler plugins, such as: charts, maps. You can inject javascript and stylesheet to two 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 Open tabler.php in config/tabler.php, you can customize some URL, logo, suffix
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,
]
];Customize views, open resources/views/vendor/tabler to customize
Customize assets, open public/admin/assets
For full documentation, visit tabler.github.io/tabler/docs.
This project is licensed under the MIT License.
If you have any issue, please create new issue
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent