Skip to content

Components

Blade components

Path: resources/view/components

We have currenctly 4 components

  1. Alert
  2. Card
  3. Info Box
  4. Table

N.B.: All types of slot is optional. When it needed place it anywhere indide the component.

Alert

To use alert components in blade

    @component('components.alert',['type' => 'primary', 'class' => 'mb-4 rounded-0'])
        <h3 class="card-title">Title goes here....</h3>
    @endcomponent
Attributes
Name Value Description
type primary,info,success,danger,warning,secondary,light,dark Alert type
class any class name without alert To provide additional class
id unique id name To provide id into alert
closeButton true,false To hide and show close button
Card

To use card components in blade

@component('components.card',['type' => 'primary'])
    @slot('header')
        <h3>Header goes here........</h3>
    @endslot

    <p>Body goes here............</p>

    @slot('footer')
        <p>Footer goes here........</p>
    @endslot
@endcomponent
Attributes
Name Value Description
type primary,info,success,danger,warning,secondary,light,dark Card type
class any class name without card To provide additional class
id unique id name To provide id into card
headerClass any valid class name To provide any class into card header div
bodyClass any valid class name To provide any class into card body div
bodyClass any valid class name To provide any class into card body div
footerClass any valid class name To provide any class into card footer div
Info Box

To use info box components in blade

    @component('components.info_box',['type' => 'primary'])
        <p>Content goes here...........</p>
    @endcomponent
Attributes
Name Value Description
type primary,info,success,danger,warning,secondary,light,dark Info box type
class any class name without info-box To provide additional class
id unique id name To provide id into info box
icon any icon element To change icon into info box
Table

To use info box components in blade

    @component('components.table',['class' => 'lf-data-table'])
        @slot('thead')
            <tr>
                <th>Table header goes here...........</th>
            </tr>
        @endslot

        <tr>
            <td>Table body goes here...........</td>
        </tr>

        @slot('tfoot')
            <p>Table footer goes here...........</p>
        @endslot
    @endcomponent
Attributes
Name Value Description
type primary,info,success,danger,warning,secondary,light,dark Table type
class any class name without table To provide additional class
id unique id name To provide id into table