sudippalash / blade-components
Laravel package for provides a set of blade components
Installs: 324
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 1
Open Issues: 0
Language:Blade
Requires
- php: ^7.3|^8.3
- laravel/framework: ^8.0|^9.0|^10.0|^11.0
README
This package provides a set of blade components
Install
Via Composer
composer require sudippalash/blade-components
You can publish the config file with:
php artisan vendor:publish --provider="Sudip\BladeComponents\Providers\AppServiceProvider" --tag=config
You can publish the lang file with (optional):
php artisan vendor:publish --provider="Sudip\BladeComponents\Providers\AppServiceProvider" --tag=lang
You can publish blade files with (optional):
php artisan vendor:publish --provider="Sudip\BladeComponents\Providers\AppServiceProvider" --tag=views
In config/blade-components.php
config file you should set your data.
return [ /* |-------------------------------------------------------------------------- | Platform |-------------------------------------------------------------------------- | | Which platform you use in your application. Example: bootstrap3 or bootstrap4 or bootstrap5 | Note: you should add platform CSS and JS library | */ 'platform' => 'bootstrap4', /* |-------------------------------------------------------------------------- | Pagination |-------------------------------------------------------------------------- | | Pagination dropdown use in your application. Example: ['15', '25', '50', '100'] | */ 'pagination_options' => ['15', '25', '50', '100'], /* |-------------------------------------------------------------------------- | Paginate Default Limit |-------------------------------------------------------------------------- | | Per page pagination limit default selected item dropdown use in your application. Example: 15 / 25 / 50 / 100 | */ 'paginate_default_limit' => 25, /* |-------------------------------------------------------------------------- | Action Group button CSS class |-------------------------------------------------------------------------- | | You can add additional class name as per your project requirement | */ 'action_group_btn_class' => null, /* |-------------------------------------------------------------------------- | Import modal button CSS class |-------------------------------------------------------------------------- | | You can add additional class name as per your project requirement | */ 'import_modal_btn_class' => null, /* |-------------------------------------------------------------------------- | Styles Default Stack |-------------------------------------------------------------------------- | | Styles to push in appropriate stack | */ 'styles_stack' => 'styles', /* |-------------------------------------------------------------------------- | Scripts Default Stack |-------------------------------------------------------------------------- | | Scripts to push in appropriate stack | */ 'scripts_stack' => 'scripts', /* |-------------------------------------------------------------------------- | Seo Meta Form |-------------------------------------------------------------------------- | | SEO Tag input append your form. This is for <x-sp-components::seo-meta-input /> component. | background_color : null or any css color. Example: null, rgba(0,0,0,.02), #F0F0F0 | background_padding : null or any css support padding. Example: null, 15px, 1rem | title_show : true or false. If you want to hide or show title. | label_col : bootstrap col- class name. If you want to show horizontal label otherwise leave it to null. Example: null, col-md-* | input_col : bootstrap col- class name. If you want to show horizontal input otherwise leave it to null. Example: null, col-md-* | */ 'seo_form' => [ 'background_color' => null, 'background_padding' => null, 'title_show' => true, 'label_col' => null, 'input_col' => null, ], /* |-------------------------------------------------------------------------- | Seo Meta Default Section |-------------------------------------------------------------------------- | | SEO Tag section push in appropriate yield. This is for <x-sp-components::seo-meta-push /> component. | If you leave it null then you should pass your own section name to sectionName parameter. | */ 'seo_section' => 'seo', ];
Usage
1 .Pagination row:
<x-sp-components::pagination-row :records="$users" />
2. Action group:
<x-sp-components::action-group>
<li><a class="dropdown-item" href="#">Dropdown list here</a></li>
</x-sp-components::action-group>
3. File Input Field:
<x-sp-components::file-input id="uniqueId" name="field_name" required="required" path="https://exapmle.com/file.pdf" />
4. Image Input Field:
<x-sp-components::image-input id="uniqueId" name="field_name" required="required" path="https://exapmle.com/image.png" />
5. Import Modal:
<a href="javascript:void(0);" data-toggle="modal" data-target="#userImportModal">Import Users</a> <x-sp-components::import-modal id="userImportModal" postUrl="{{ 'your route name' }}" label="Import Users" fileType=".xlsx,.csv" exampleFilePath="{{ 'your example asset file path' }}" />
6. SEO Input Fields:
<x-sp-components::seo-meta-input title_field="meta_title" keywords_field="meta_keywords" description_field="meta_description" :data="$data ?? null" />
7. SEO data push to main blade File:
<x-sp-components::seo-meta-push :pageTitle="<title> tag value pass here" :title="meta title pass here" :keywords="meta keywords pass here" :description="meta description pass here" :image="meta property image pass here" :is_og=true :sectionName=null />