This package provide commons view components you usually use in your laravel project.
You can install the package via composer:
composer require mawuekom/laravel-custom-view-componentsOnce install, go to config/app.php to add CustomponentsServiceProvider in providers array
Laravel 5.5 and up Uses package auto discovery feature, no need to edit the config/app.php file.
'providers' => [
...
Mawuekom\Customponents\CustomponentsServiceProvider::class,
],php artisan vendor:publish --provider="Mawuekom\Customponents\CustomponentsServiceProvider"Or you can publish config
php artisan vendor:publish --provider="Mawuekom\Customponents\CustomponentsServiceProvider" --tag="config"- There are many configurable options which have been extended to be able to configured via
.envfile variables. - See config file: customponents.php.
<?php
return [
/**
* App Name should be set here
*/
'app_name' => env('APP_NAME', 'My Laravel Project'),
/*
|--------------------------------------------------------------------------
| Bunch of features to enable or disable.
|--------------------------------------------------------------------------
*/
'enable' => [
'app_style_sheet' => true,
'app_script' => true,
],
];Once all this is done, you can go in your welcome.blade.php and add the code below...
<x-customponents::partials.headers title="Page Title" description="Page Description" section="" />
<div>
<h1>My Laravel Website</h1>
<hr>
<p>
Some content here
</p>
</div>
<x-customponents::partials.footers />- The
sectionparameter is here to help you when you want to define different views or section for a guest or logged user.
If you want you add some assets like style sheets and scripts links in your webpage, don't be worry.
It's very simple.
This package is provided with a view component helper called Section which can help you include section of your project in another section.
Take a look at headers.blade.php component source code.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<x-customponents::partials.seo-tags title="{{ $title }}" description="{{ $description }}" section="{{ $section }}" />
@yield('styles')
</head>
<body @yield('body_attributes')>You will see a classic blade directive : @yield('styles')
You can then use this like that...
<x-customponents-section name="styles">
your content goes here
</x-customponents-section>So to include assets links in your webpage, just do it like that
<x-customponents::partials.headers title="Page Title" description="Page Description" section="" />
<x-customponents-section name="styles">
<link rel="stylesheet" href="css/app.css">
</x-customponents-section>
</x-customponents::partials.headers>
<div>
<h1>My Laravel Website</h1>
<hr>
<p> Some content here </p>
</div>
<x-customponents::partials.footers>
<x-customponents-section name="scripts">
<script src="js/app.js"></script>
</x-customponents-section>
</x-customponents::partials.footers>It is nice, isn't it !!! 🙂😉
- On top of that, you also a components assets.blade.php which you can use to add assets links in your page just like that :
<x-customponents::resources.assets type="css" path="css/app.css" />Then, your page could look like that...
<x-customponents::partials.headers title="Page Title" description="Page Description" section="" />
<x-customponents-section name="styles">
<x-customponents::resources.assets type="css" path="css/app.css" />
</x-customponents-section>
</x-customponents::partials.headers>
<div>
<h1>My Laravel Website</h1>
<hr>
<p> Some content here </p>
</div>
<x-customponents::partials.footers>
<x-customponents-section name="scripts">
<x-customponents::resources.assets type="js" path="js/app.js" />
</x-customponents-section>
</x-customponents::partials.footers>There is a master.blade.php layout that can simplify your welcome.blade.php :
<x-customponents::layouts.master title="Page Title" description="Page Description" section="">
<x-customponents-section name="lyt_master_styles">
// Your style sheet goes here.
</x-customponents-section>
<div>
<h1>My Laravel Website</h1>
<hr>
<p> Some content here </p>
</div>
<x-customponents-section name="lyt_master_scripts">
// Your script files goes here.
</x-customponents-section>
</x-customponents::layouts.master>composer testPlease see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
The MIT License (MIT). Please see License File for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent