laravel-adminlte
An easy way to integrate AdminLTE into your laravel applications., (*1)
- Introduction
- Installation
- Overriding Laravel Authentication Views
- Configuration
-
Blade Templates (Layout, Component and Partial Views)
- Main Layout
- Page Component
- Box Component
- Table Box Component
- Info Box Component
- [Optional] Overrriding the default views
, (*2)
1. Introduction
This package depend on other packages under the hood, these packages are:
* Laravel Breadcrumbs
* Laracasts Flash, (*3)
, (*4)
2. Installation
You can install laravel-adminlte using composer cli by running:, (*5)
composer require elnooronline/laravel-adminlte
Then run the following command to publish the required assets and files:, (*6)
php artisan vendor:publish --tag=adminlte-assets --tag=adminlte-breadcrumbs --tag=adminlte-config
, (*7)
3. Overriding Laravel Authentication Views
After following the steps in Authentication Quick Start
you can replace the created authentication views by the adminlte views by running the following command:, (*8)
php artisan vendor:publish --tag=adminlte-auth --force
, (*9)
4. Configuration
After publish the configuration files in step 1 a two configuration files will be published config/adminlte.php and config/breadcrumbs.php., (*10)
<?php
// config/adminlte.php
return [
/*
* The logo of the dashboard.
*/
'logo' => '<b>Laravel</b> AdminLTE',
/*
* The small logo of the dashboard.
*/
'small_logo' => '<b>Lara</b> LTE',
/*
* The name of the dashboard.
*/
'name' => 'Web App Name',
'appearence' => [
/*
* Supported values are black, black-light, blue, blue-light,
* green, green-light, purple, purple-light,
* red, red-light, yellow and yello-light.
*/
'skin' => 'red',
/*
* The direction of the dashboard.
*/
'dir' => 'ltr',
/*
* The header items that will be rendered.
*/
'header' => [
'items' => [
'adminlte::layout.header.messages',
'adminlte::layout.header.notifications',
'adminlte::layout.header.tasks',
'adminlte::layout.header.user',
'adminlte::layout.header.logout',
],
],
/*
* The sidebar items that will be rendered.
*/
'sidebar' => [
'items' => [
'adminlte::layout.sidebar.user-panel',
'adminlte::layout.sidebar.search-form',
'adminlte::layout.sidebar.items',
],
],
],
'urls' => [
/*
|--------------------------------------------------------------------------
| URLs
|--------------------------------------------------------------------------
|
| Register here your dashboard main urls, base, logout, login, etc...
| The options that can be nullable is register and password_request meaning that it can be disabled.
|
*/
'base' => '/',
'logout' => 'logout',
'login' => 'login',
'register' => 'register',
'password_request' => 'password/reset',
'password_email' => 'password/email',
'password_reset' => 'password/reset',
],
];
You can take a look at Laravel Breadcrumbs Documentation for the configuration details about config/breadscrumbs.php file., (*11)
, (*12)
5. Blade Templates (Layout, Component and Partial Views)
This package include a layout and components that wraps the most of adminlte elements. It is recommended to read more about layouts in AdminLTE documentation.
, (*13)
1. Main Layout
This is the main Think of the main layout as a container for including your content within adminlte header and sidebar. The following is an example of using the adminlte::layout.main:, (*14)
@extends('adminlte::layout.main')
@section('content')
{-- Content--}
@endsection
Note: the content will be wrapped automatically within <div class="content-wrapper"></div>., (*15)
, (*16)
2. Page Component
The page component is a container for your content that contain <section class="content-header"></section> for holding title and breadcrumbs and <section class="content"></section> for holding the page content.
Example:, (*17)
@component('adminlte::page', ['title' => 'Home', 'sub_title' => 'Main page...', 'breadcrumb' => 'BREADCRUMB_NAME'])
The page content...
@endcomponent
Notes:, (*18)
The options sub_title and breadcrumb are optional., (*19)
The page component is responsible for displaying the flash messages., (*20)
The BREADCRMB_NAME is the name of your defined breadcrumb in routes/breadcrumbs.php file., (*21)
Example with sending data to breadcrmbs:, (*22)
@component('adminlte::page', ['title' => 'Home', 'breadcrumb' => ['home', $user]])
The page content...
@endcomponent
, (*23)
3. Box Component
The box component is a wrapper for AdminLTE box.
Example code:, (*24)
@component('adminlte::box')
You're logged in!
@endcomponent
A more advanced example:, (*25)
@component('adminlte::box', ['title' => 'Box component (solid)', 'solid' => true, 'style' => 'info'])
@slot('tools')
<button class="btn btn-warning">Button</button>
@endslot
<p>
Box component contents...
</p>
@slot('footer')
<p>Box footer</p>
@endslot
@endcomponent
Note: the supported styles are default, primary, info, warning, success and danger., (*26)
, (*27)
4. Table Box Component
The table box component can be used to put a table directly within an adminlte box component.
Example usage:, (*28)
@component('adminlte::table-box', ['collection' => $users])
<tr>
<th>Name</th>
<th>Email</th>
</tr>
@foreach ($users as $user)
<tr>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
</tr>
@endforeach
@endcomponent
Note:, (*29)
The component will automatically render the pagination links., (*30)
You don't need to handle empty collection by yourself, the view will display a helpful message if the collection is empty., (*31)
, (*32)
5. Info Box
The info box component is a wrapper for AdminLTE Info Box.
Example usage:, (*33)
@include('adminlte::info-box', [
'icon_color' => 'blue',
'icon' => 'thumbs-up',
'text' => 'likes',
'number' => '2000',
])
Or:, (*34)
@include('adminlte::info-box', [
'style' => 'red',
'icon' => 'heart',
'text' => 'loves',
'number' => '500000',
'progress' => 70,
'progress_description' => '70% of the people loved your project!',
])
, (*35)
6. [Optional] Overrriding the default views
You are free to modify the package views, If you wish you can run the following command:, (*36)
php artisan vendor:publish --tag=adminlte-views
Now, you can edit the views in resources/views/vendor/adminlte., (*37)
Note: It is NOT RECOMMENDED to publish the package views because it will mute any future updates and bugfixes. So do not publish the views unless you know what you are doing., (*38)
Wallogit.com
