Components
Blade components
Path: resources/view/components
We have currenctly 4 components
- Alert
- Card
- Info Box
- 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 |