Download the PHP package seblhaire/menuandtabutils without Composer
On this page you can find all versions of the php package seblhaire/menuandtabutils. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download seblhaire/menuandtabutils
More information about seblhaire/menuandtabutils
Files in seblhaire/menuandtabutils
Package menuandtabutils
Short Description A Laravel library to to build menus and tabs navigation utilities, based on Boostrap 5 CSS Framework.
License MIT
Informations about the package menuandtabutils
Menu and Tab Utils
A Laravel library to to build menus and tabs navigation utilities, based on Boostrap 5 CSS Framework. Package demo available here.
Installation
- install package
composer require seblhaire/menuandtabutils
- Composer will automatically link the package with Laravel. But you still can explicitly add provider and facade to your
config/app.php
:
Javascript and stylesheets
On a webpage, every JS library and CSS stylesheets can be linked separately. If you choose this classical way, first download and install Bootstrap. Then publish package files as explained above and put following tags in your template:
Websites often use many libraries and stylesheets, and browsers must download many files before the site can be rendered properly. Modern websites come with a single compressed JavaScript file which concatenates necessary scripts; same principle for stylesheets. With Laravel you can use Laravel Mix to compile files.
Use NPM package manager :
npm install bootstrap
Then your js source file should be something like this:
For your stylesheet:
Config files
Accessible through
These default values are used by tools in next sections. In case you need to change default values, use command php artisan vendor:publish
and chose the appropriate package in the list. Then config files will be available in file config/vendor/seblhaire/
.
MenuUtils
This simple helper assigns a <ul class="nav">
menu to a variable.
Parameters:
id
: id of main navdata
: array parameter. Content:menu
: mandatory array of value to build menu items. Cf below.current
: id of menu element that is active, i.e. highlighted. Should not be an dropdown menu item.ulclass
: class of nav main<ul>
element. For a vertical menu:nav flex-column
. Default:nav
.ulattr
: array of attributes that must be added to nav main<ul>
. Default: empty array.liclass
: class of menu elements<li>
. Default:nav-item
,liattr
: array of attributes that must be added to menu<li>
elements. Default: empty array.aclass
: class of menu element link<a>
: Default:nav-link
.lidropdwn
: class of menu element<li>
that contains dropdown menu. Default:nav-item dropdown
.adroptoggle
: class of menu element link<a>
that opens a dropdown menu, Default:nav-link dropdown-toggle
.dropdwnmenuclass
: class of<ul>
that contains dropdown menu items. Default:dropdown-menu
.dropitem
: class of dropdown menu's elements<li>
. Default:dropdown-item
.dropdivider
: class of dropdown menu divider (<hr>
element). Default:dropdown-divider
.active
: class of current item. Default:"active"
Define menu elements
Here are the details to build your navigation menu in menu
parameter.
Array keys are used for menu element id. Values are in a sub-array.
icon
: image or icon to be displayed in menu item. Html code. Default: unset or empty.title
: mandatory element text. If icon is set, title is displayed on mouse hover.target
: link target, eg. route. Not used ifdropdown
is set. Default empty.attributes
: array of key-value pairs for additional parameters for<a>
.liattr
: array of key-value pairs for additional parameters for<li>
.dropdown
: array of values. In this array, if the value for a key is null, a menu divider is drawn. Parameters are the same as the top level menu items, exceptdropdown
.
Usage
In your controller, pass the result to a variable:
$menu = MenuUtils::init('myid', [...]);
If current
parameter is not defined in parameters, you can use this method:
$menu->setCurrent('myid')
Note that item should not be a dropdown menu element. Then pass this variable to a view:
And in your Blade template, insert your variable at the appropriate line:
{!! $menu !!}
A page can have several menus. In this case, assign each menu to a different variable.
BreadcrumbUtils
This simple helper assigns a <nav aria-label="breadcrumb">
menu to a variable.
Parameters:
id
: id of main navdata
: array parameter. Content:menu
: mandatory array of value to build menu items. Cf below.navclass
: class of nav element<nav>
. Default: ''.navattr
: array of key-attributes values for<nav>
. Default:['aria-label' => "breadcrumb"]
.olclass
: class of list<ol>
. Default:breadcrumb
.olattr
: array of key-value pairs for element<ol>
. Default: empty array.liclass
: class of list element<li>
. Default:breadcrumb-item
.liattr
: array of key-value pairs for element<li>
. Default: empty array.active
: class of current item. Default:"active"
.
Define menu elements
Here are the details to build your navigation menu in menu
parameter.
Array keys are used for menu element id. Values are in a sub-array.
icon
: image or icon to be displayed in menu item. Html code. Default: unset or empty.title
: mandatory element text. If icon is set, title is displayed on mouse hover.target
: link target, eg. route. Not used ifdropdown
is set. Default empty.attributes
: array of key-value pairs for additional parameters for<a>
.
Usage
In your controller, pass the result to a variable:
$breadcrumb = BreadcrumbUtils::init('myid', [...]);
Current element is always the last one. <Then pass this variable to a view:
And in your Blade template, insert your variable at the appropriate line:
{!! $breadcrumb !!}
A page can have several breadcrumbs. In this case, assign each menu to a different variable.
TabUtils
This helper builds the code for tabs and tab contents.
Parameters:
id
: id of tab navdata
: array parameter. Content:tabs
: mandatory array of value to build tab items. Cf below.current
: id of menu element that is active, i.e. highlighted and open.ulclass
: class of nav tabs. Default:nav nav-tabs
.ulattr
: array of attributes that must be added to nav main<ul>
. Default: empty array.liclass
: class of nav element<li>
. Default:nav-item
.liattr
: array of attributes that must be added to nav main<li>
. Default: empty array.btnclass
: class of element<button>
. Default:nav-link
.tabcontentclass
: class of tab content main<div>
. Default:tab-content
.maindivattr
: array of attributes that must be added to tab content main<div>
. Default: empty array.tabdivclass
: class of tab element content<div>
. Default:tab-pane fade
.tabcontentattr
: array of attributes that must be added to ab element content<div>
. Default: empty array.activetab
: class of current tab element content. Default:show active
.active
: class of current item. Default:"active"
Define tab elements
Here are the details to build your tabs in tabs
parameter.
Array keys are used for menu element id. Values are in a sub-array.
icon
: image or icon to be displayed in menu item. Html code. Default: unset or empty.title
: mandatory element text. If icon is set, title is displayed on mouse hover.content
: tab content in HTML.view
: if content is not set, path of blade template that must be displayed in tab, e.g.tabs.editors
.viewparams
: array of key-values to be passed to blade template set inview
parameter.
Usage
In your controller, pass result to a variable:
$tabs = TabUtils::init('myid', [...]);
If current
parameter is not defined in parameters, you can use this method:
$tabs->setCurrent('myid')
Then pass this variable to a view:
And in your Blade template, insert your variable at the appropriate line:
{!! $tabs !!}
A page can have several tabs sets. In this case, assign each tab set to a different variable.