The Laravel Tablar Admin Dashboard Package is a beautiful, feature-rich admin dashboard Template using Laravel, Tabler.io, and Vite. Using Tabler, you can access a free and open-source web application UI kit based on Bootstrap 5, with hundreds of responsive components and multiple layouts
Inspired By Laravel Adminlte jeroennoten/Laravel-AdminLTE
tablar@ebuz.xyz
12345678
Laravel Tablar Admin Dashboard Package. It allows you to make beautiful feature rich admin dashboard Template using Larave, Tabler HTML Template & Super Fast https://vitejs.dev.
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running, follow these simple example steps.
composer require takielias/tablar
First Install the preset
php artisan tablar:install
Now
npm install
Finally, export the config, assets & auth scaffolding.
php artisan tablar:export-all
N.B: You may export individual component. For assets.
php artisan tablar:export-assets
For config.
php artisan tablar:export-config
For Js.
php artisan tablar:export-js
For auth scaffolding.
php artisan tablar:export-auth
For auth views.
php artisan tablar:export-views
Before staring the server don't forget to run migrate
php artisan migrate
Now run
npm run dev
Now visit your login route
N.B : If you use virtual host for your laravel application, don't forget to change the APP_URL
APP_URL=http://your virtual host
To use the blade template provided by this package, just create a new blade file and extend the layout with @extends(' tablar::page'). You may use the following code snippet:
@extends('tablar::page')
@section('content')
<!-- Page header -->
<div class="page-header d-print-none">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<h2 class="page-title">
Empty page
</h2>
</div>
</div>
</div>
</div>
<!-- Page body -->
<div class="page-body">
<div class="container-xl">
@if(config('tablar','display_alert'))
@include('tablar::common.alert')
@endif
<!-- Page Content goes here -->
</div>
</div>
@endsection
If you need to use custom script in different pages, please follow the instruction below to achieve it.
@section('css')
<style>
......
</style>
@stop
If you need to use custom script in different pages, please follow the instruction below to achieve it.
@section('js')
<script type="module">
$(".btn-test").click(function () {
alert("The Button was clicked.");
});
</script>
@stop
Enable Display Alert
Make display_alert
to true
from tablar.php config file
Use Tabler Pagination
{!! $modelName->links('tablar::pagination') !!}
Use the below artisan command to export the views
php artisan tablar:export-views
All view files would be exported to resources/views/vendor/tablar directory. You can customize as your requirements.
Use the below artisan command to export the config file.
For config.
php artisan tablar:export-config
You can specify the set of menu items to display in the top navbar. A menu item representing a link should have a text attribute and an url (or route) attribute. Also, and optionally, you can use the icon attribute to specify an icon from Tablar Icon for every menu item. There is a can attribute that can be used as a filter with the Laravel's built-in Gate functionality. Even more, you can create a nested menu using the submenu attribute.
Here is a basic example that will give you a quick overview of the menu configuration:
'menu' => [
// Navbar items:
[
'text' => 'Home',
'icon' => 'ti ti-home',
'label' => 4,
'label_color' => 'success',
],
[
'text' => 'Support',
'url' => '#',
'icon' => 'ti ti-help',
'submenu' => [
[
'text' => 'Ticket',
'url' => '#',
'icon' => 'ti ti-article'
]
],
],
],
We are going to give a summary of the available attributes for the menu items. Take in consideration that most of these attributes are optional and will be explained in future with more details.
Attribute | Description |
---|---|
active | To define when the item should have the active style. |
can | Permissions of the item for use with Laravel's Gate. |
classes | To add custom classes to a menu item. |
icon | A font awesome icon for the item. |
id | To define an id for the menu item. |
label | Text for a badge associated with the item. |
route | A route name, usually used on link items. |
submenu | Array with child items that enables nested menus definition. |
target | The underlying target attribute for link items. |
text | Text representing the name of the item. |
url | An URL path, normally used on link items. |
Now, we are going to review all of these attributes with more detail:
active
Attribute:By default, a menu item is considered active if any of the following conditions holds:
url
attribute.url
attribute.[
'text' => 'Pages',
'url' => 'pages',
'active' => ['pages', 'content', 'content*', 'regex:@^content/[0-9]+$@']
]
In the previous case, the menu item will be considered active for all the next URLs:
http://my.domain.com/pages
http://my.domain.com/content
http://my.domain.com/content-user
(because content*
)http://my.domain.com/content/1234
(because regex:@^content/[0-9]+$@
)can
Attribute:You may use the can
attribute if you want to conditionally show a menu item. This integrates with the Laravel's Gate functionality. If you need to conditionally show a header item, you need to wrap it in an array using the header
attribute. You can also use multiple conditions entries with an array, check the next example for details:
[
[
'header' => 'Posts',
'can' => 'read-post',
],
[
'text' => 'Add new post',
'url' => 'admin/blog/new',
'can' => ['add-post', 'other-right'],
],
]
So, for the previous example the header will show only if the user has the read-post
permission, and the link will show if the user has the add-post
or other-right
permissions.
classes
Attribute:This attribute provides a way to add custom classes to a particular menu item. The value should be a string with one or multiple class names, similar to the HTML class
attribute. For example, you can make a colorful HEADER
item centered on the left sidebar with the next definition:
[
'header' => 'account_settings',
'classes' => 'text-yellow text-bold text-center',
]
Or you can highlight an important link item with something like this:
[
'text' => 'Important Link',
'url' => 'important/link',
'icon' => 'ti ti-alert-triangle',
'classes' => 'text-danger text-uppercase',
]
icon
Attributes:This attribute is optional, and you will get an open circle if you leave it out. The available icons that you can use are those from Tabler Icons. Just specify the name of the icon, and it will appear in front of your menu item. Example:
[
'text' => 'profile',
'url' => 'user/profile',
'icon' => 'ti ti-user',
]
id
Attribute:This attribute is optional and just provide a way to add an id
to the element that wraps the menu item, generally a <li>
tag. This can be useful when you need to target the menu item from Javascript
or jQuery
in order to perform updates on it.
[
'text' => 'profile',
'url' => 'user/profile',
'id' => 'profile-id',
]
route
Attribute:You can use this attribute to assign a Laravel route name to a link item, if you choose to use this attribute, then don't combine it with the url
attribute, for example:
[
'text' => 'Profile',
'route' => 'admin.profile',
'icon' => 'ti ti-user',
]
Even more, you can define a route with parameters using an array where the first value is the route name and the second value an array with the parameters, as shown next:
[
'text' => 'Profile',
'route' => ['admin.profile', ['userID' => '673']],
'icon' => 'ti ti-user',
]
submenu
Attribute:This attribute provides a way to create a menu item containing child items. With this feature you can create nested menus. You can create a menu with items in the sidebar and/or the top navbar. Example:
[
'text' => 'menu',
'icon' => 'ti ti-share',
'submenu' => [
[
'text' => 'child 1',
'url' => 'menu/child1',
],
[
'text' => 'child 2',
'url' => 'menu/child2',
],
],
]
target
Attribute:This attribute is optional and intended to be used only with link items. It represents the underlying HTML
target attribute for a link item. As an example, you can setup this attribute to the '_blank'
value in order to open the link in a new tab.
text
Attribute:The value of this attribute is just the descriptive text for a menu item (except for headers).
url
Attribute:The value of this attribute should be the URL for a link item. You can use a full URL with the domain part or without it. Don't combine this attribute with the route
attribute. Examples:
[
'text' => 'profile',
'url' => 'http://my.domain.com/user/profile',
'icon' => 'ti ti-user',
],
[
'text' => 'change_password',
'url' => 'admin/settings',
'icon' => 'ti ti-settings-automation',
],
You can set the filters you want to include for rendering the menu using the filters
configuration of the config file. You can add your own filters to this array after you've created them. You can comment out the GateFilter
if you don't want to use Laravel's built in Gate functionality. The current default set of menu filters is:
'filters' => [
TakiElias\Tablar\Menu\Filters\GateFilter::class,
TakiElias\Tablar\Menu\Filters\HrefFilter::class,
TakiElias\Tablar\Menu\Filters\SearchFilter::class,
TakiElias\Tablar\Menu\Filters\ActiveFilter::class,
TakiElias\Tablar\Menu\Filters\ClassesFilter::class,
TakiElias\Tablar\Menu\Filters\LangFilter::class,
TakiElias\Tablar\Menu\Filters\DataFilter::class,
],
If you need to use a custom menu filter, you can add your own menu filters to the previous array. This can be useful, for example, when you are using a third-party package for authorization (instead of the Laravel's Gate functionality).
In order to provide more details, we are going to show an example of how you can configure the Laratrust Package. Start by creating your custom filter implementation in App\Filter
:
<?php
namespace App\Filter;
use TakiElias\Tablar\Menu\Filters\FilterInterface;
use Laratrust\Laratrust;
class RolePermissionMenuFilter implements FilterInterface
{
public function transform($item)
{
if (isset($item['permission']) && ! Laratrust::isAbleTo($item['permission'])) {
$item['restricted'] = true;
}
return $item;
}
}
In order to use Laravel Permission, we are going to show an example of how you can configure. Start by creating your custom filter implementation:
<?php
namespace App\Filter;
use Illuminate\Support\Facades\Auth;
use TakiElias\Tablar\Menu\Builder;
use TakiElias\Tablar\Menu\Filters\FilterInterface;
class RolePermissionMenuFilter implements FilterInterface
{
public function transform($item, Builder $builder)
{
if (!$this->isVisible($item)) {
return false;
}
return $item['header'] ?? $item;
}
protected function isVisible($item)
{
$user = Auth::user();
// Check for roles
$hasAnyRole = $item['hasAnyRole'] ?? null;
$hasRole = $item['hasRole'] ?? null;
if (($hasAnyRole && $user->hasAnyRole($hasAnyRole)) || ($hasRole && $user->hasRole($hasRole))) {
return true;
}
return $this->checkPermissions($item, $user) ?? true;
}
protected function checkPermissions($item, $user)
{
$hasAnyPermission = $item['hasAnyPermission'] ?? null;
return $hasAnyPermission ? $user->hasAnyPermission($hasAnyPermission) : null;
}
}
And then add the following configuration to the config/tablar.php
file:
'filters' => [
...
//TakiElias\Tablar\Menu\Filters\GateFilter::class,
TakiElias\Tablar\Menu\Filters\HrefFilter::class,
TakiElias\Tablar\Menu\Filters\SearchFilter::class,
TakiElias\Tablar\Menu\Filters\ActiveFilter::class,
TakiElias\Tablar\Menu\Filters\ClassesFilter::class,
TakiElias\Tablar\Menu\Filters\LangFilter::class,
TakiElias\Tablar\Menu\Filters\DataFilter::class,
MyApp\RolePermissionMenuFilter::class,
]
A tablar.php file would be available into your config folder.
That's It.
Contributions are what makes the open source community such an amazing place to learn, inspire and create. Any contributions you make are greatly appreciated.
git checkout -b feature/AmazingFeature
)git commit -m 'Add some AmazingFeature'
)git push origin feature/AmazingFeature
)Distributed under the MIT License. See LICENSE
for more information.
Source: https://github.com
#laravel #php #vite