README

blade-components 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
/>

sudippalash / blade-components

Maintainers

Details