- Notifications
You must be signed in to change notification settings - Fork6
Easy Bootstrap-Italia integration with Laravel 5
License
italia/design-laravel-theme
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This package provides an easy way to quickly set upBootstrap Italia withLaravel. It has no requirements and dependencies besides Laravel, so you can start building your website immediately.The package just provides a Blade template that you can extend and advanced menu configuration possibilities.
- Installation
- Updating
- Usage
- The
make:bootstrapitaliaartisan command - Configuration
- Translations
- Customize views
- Issues, Questions and Pull Requests
Require the package using composer:
composer require italia/design-laravel-themeAdd the service provider to the
providersinconfig/app.php:Laravel 5.5 uses Package Auto-Discovery, so doesn't require you to manually add the ServiceProvider
italia\DesignLaravelTheme\ServiceProvider::class,
Publish the public assets:
php artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=assets
To update this package, first update the composer package:
composer update italia/design-laravel-themeThen, publish the public assets with the
--forceflag to overwrite existing filesphp artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=assets --force
To use the template, create a blade file and extend the layout with@extends('bootstrap-italia::page').This template yields the following sections:
title: for in the<title>tagcontent: all of the page's contentcss: extra stylesheets (located in<head>)js: extra javascript (just before</body>)
All sections are in fact optional. Your blade template could look like the following.
{{-- resources/views/test.blade.php --}}@extends('bootstrap-italia::page')@section('title', 'Bootstrap Italia')@section('content')<p>Test page.</p>@stop@section('css')<linkrel="stylesheet"href="/css/custom.css">@stop@section('js')<script>console.log('Hi!');</script>@stopNote that in Laravel 5.2 or higher you can also use@stack directive forcss andjavascript:
{{-- resources/views/test.blade.php --}}@push('css')@push('js')You now just return this view from your controller, as usual. Check outBootstrap Italia to find out how to build content for your pages.
Note: only for Laravel 5.2 and higher
This package ships with amake:bootstrapitalia command that behaves exactly likemake:auth (introduced in Laravel 5.2). In the near future it will publish auth views with bootstrap-italia styles.
It will also create custom pagination links views undervendor/pagination folder
php artisan make:bootstrapitaliaThis command should be used on fresh applications, just like themake:auth command
First, publish the configuration file:
php artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=configNow, editconfig/bootstrap-italia.php to configure the title, theme, menu, URLs etc. All configuration options are explained in the comments. However, I want to shed some light on themenu configuration.
You can configure your menu as follows.
Basically, you have three keys:slim_header,header andfooter, which defines how the three sections areconfigured:
'menu' => ['slim-header' => [],'header' => [],'footer' => [],'footer-bar' => [],],
slim_header andfooter_bar are configured as
'menu' => ['slim-header' => [ ['url' =>'#','text' =>'Pagina iniziale', ], ['url' =>'#','text' =>'Contatti','target' =>'_blank', ], ], ...]
'menu' => ['footer-bar' => [ ['url' =>'#','text' =>'Privacy policy', ], ['url' =>'#','text' =>'Contatti','target' =>'_blank', ], ], ...]
footer is configured as
'menu' => [ ...'footer' => [ [ ['text' =>'Amministrazione','url' =>'#','target' =>'_blank', ], ['text' =>'Giunta e consiglio','url' =>'#', ], ], [ ['text' =>'Amministrazione','url' =>'#', ], ['text' =>'Giunta e consiglio','url' =>'#', ], ], ],]
whileheader is more complex, since each element could be anstring, asimple item, adropdown or amegamenu:
stringis just a string without links- a
simple itemis an associative array with the form:
['url' =>'/home','text' =>'Home','target' =>'_blank',],
- a
dropdownis an item with thedropdownkey set to an array ofsimple items,headers, orseparators(string '-'):
['url' =>'/home','text' =>'Dropdown item','dropdown' => ['Intestazione', ['url' =>'/home','text' =>'Home','target' =>'_blank', ],'-', ['url' =>'/about','text' =>'About', ],],
- a
megamenuis an item with themegamenukey set to bi-dimensional array ofsimple items,headers, orseparators(string '-'):
['text' =>'Megamenu item','megamenu' => [ ['Heading 1', ['url' =>'/home','text' =>'Home','target' =>'_blank', ],'-', ['url' =>'/about','text' =>'About', ], ], ['Heading 2', ['url' =>'/a','text' =>'Link a', ],'-', ['url' =>'/b','text' =>'Link b', ], ], ]],
For each of the previous, with a single string, you specify a menu header item to separate the items.With an array, you specify a menu item.text andurl orroute are required attributes.
Use thecan option if you want conditionally show the menu item. This integrates with Laravel'sGate functionality.
[ ['text' =>'Create request','url' =>'request/new','can' =>'create-request' ],]
If you need custom filters, you can easily add your own menu filters to this package. This can be useful when you areusing a third-party package for authorization (instead of Laravel'sGate functionality).
For example with Laratrust:
<?phpnamespaceMyApp;useitalia\DesignLaravelTheme\Menu\Builder;useitalia\DesignLaravelTheme\Menu\Filters\FilterInterface;useLaratrust;class MyMenuFilterimplements FilterInterface{publicfunctiontransform($item,Builder$builder) {if (isset($item['permission']) && ! Laratrust::can($item['permission'])) {returnfalse; }return$item; }}
And then add toconfig/bootstrap-italia.php:
'filters' => [italia\DesignLaravelTheme\Menu\Filters\HrefFilter::class,italia\DesignLaravelTheme\Menu\Filters\ActiveFilter::class,//italia\DesignLaravelTheme\Menu\Filters\GateFilter::class, Comment this line outMyApp\MyMenuFilter::class,]
It is also possible to configure the menu at runtime, e.g. in the boot of any service provider.Use this if your menu is not static, for example when it depends on your database or the locale.It is also possible to combine both approaches. The menus will simply be concatenated and the order of service providersdetermines the order in the menu.
To configure the menu at runtime, register a handler or callback for theMenuBuilding event, for example in theboot() method of a service provider:
useIlluminate\Contracts\Events\Dispatcher;useitalia\DesignLaravelTheme\Events\BuildingMenu;class AppServiceProviderextends ServiceProvider{publicfunctionboot(Dispatcher$events) {$events->listen(BuildingMenu::class,function (BuildingMenu$event) {$event->menu->add_slim_header(['text' =>'Blog','url' =>'admin/blog' ]);$event->menu->add_header(['text' =>'Blog','url' =>'admin/blog', ]); }); }}
The configuration options are the same as in the static configuration files.
A more practical example that actually uses the database:
publicfunctionboot(Dispatcher$events) {$events->listen(BuildingMenu::class,function (BuildingMenu$event) {$items = Page::all()->map(function (Page$page) {return ['text' =>$page['title'],'url' =>route('admin.pages.edit',$page) ]; });$event->menu->add_slim_header(...$items); }); }
This event-based approach is used to make sure that your code that builds the menu runs only when the page isactually displayed and not on every request.
By default, a menu item is considered active if any of the following holds:
- The current path matches the
urlparameter - The current path is a sub-path of the
urlparameter - If it has a submenu containing an active menu item
To override this behavior, you can specify anactive parameter with an array of active URLs, asterisks and regularexpressions are supported. Example:
['text' =>'Pages' 'url' => 'pages','active' => ['pages','content','content/*']]
At the moment, Italian and English translations are available out of the box.Just specifiy the language inconfig/app.php.If you need to modify the texts or add other languages, you can publish the language files:
php artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=translationsNow, you can edit translations or add languages inresources/lang/vendor/bootstrap-italia.
If you need full control over the provided views, you can publish them:
php artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=viewsNow, you can edit the views inresources/views/vendor/bootstrap-italia.
You can report issues and ask questions in theissues section. Please start your issue withISSUE: and your question withQUESTION:
If you have a question, check the closed issues first. Over time, I've been able to answer quite a few.
To submit a Pull Request, please fork this repository, create a new branch and commit your new/updated code in there. Then open a Pull Request from your new branch. Refer tothis guide for more info.
About
Easy Bootstrap-Italia integration with Laravel 5
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors6
Uh oh!
There was an error while loading.Please reload this page.