Widget Components

These components are classified under the Widget category and represents some AdminLTE widgets. At next you can see the list of available components:

Components
Alert, Callout, Card, Info Box, ProfileColItem, ProfileRowItem, ProfileWidget, Progress, Small Box

Alert

Represents an AdminLTE styled alert notification. The following attributes are available:

Attribute	Description	Type	Default	Required
icon	A fontawesome icon for the alert	string	null	no
dismissable	Setup the alert as dismissable (can be closed)	any	null	no
theme	An AdminLTE theme: dark, light, primary, secondary, info, success, warning or danger	string	'info'	no
title	The title for the alert	string	null	no

Any other attribute you define will be directly inserted into the underlying div.alert element. You can, for example, define a class, onclick, id or any other attribute you may need. Some examples:

{{-- Minimal --}}
<x-adminlte-alert>Minimal example</x-adminlte-alert>

{{-- Themes --}}
<x-adminlte-alert theme="light" title="Tip">
    Light theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="dark" title="Important">
    Dark theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="primary" title="Primary Notification">
    Primary theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="secondary" title="Secondary Notification">
    Secondary theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="success" title="Success">
    Success theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="warning" title="Warning">
    Warning theme alert!
</x-adminlte-alert>
<x-adminlte-alert theme="danger" title="Danger">
    Danger theme alert!
</x-adminlte-alert>

{{-- Custom --}}
<x-adminlte-alert class="bg-teal text-uppercase" icon="fa fa-lg fa-thumbs-up" title="Done" dismissable>
    Your payment was complete!
</x-adminlte-alert>

Callout

Represents an AdminLTE styled callout notification. The following attributes are available:

Attribute	Description	Type	Default	Required
icon	A fontawesome icon for the callout	string	null	no
theme	An AdminLTE theme: info, success, warning or danger	string	null	no
title	The title for the callout	string	null	no
title-class	Classes for the title container (to customize the title)	string	null	no

Any other attribute you define will be directly inserted into the underlying div.callout element. You can, for example, define a class, onclick, id or any other attribute you may need. Some examples:

{{-- Minimal --}}
<x-adminlte-callout>Minimal example</x-adminlte-callout>

{{-- themes --}}
<x-adminlte-callout theme="info" title="Information">
    Info theme callout!
</x-adminlte-callout>
<x-adminlte-callout theme="success" title="Success">
    Success theme callout!
</x-adminlte-callout>
<x-adminlte-callout theme="warning" title="Warning">
    Warning theme callout!
</x-adminlte-callout>
<x-adminlte-callout theme="danger" title="Danger">
    Danger theme callout!
</x-adminlte-callout>

{{-- Custom --}}
<x-adminlte-callout theme="success" class="bg-teal" icon="fas fa-lg fa-thumbs-up" title="Done">
    <i class="text-dark">Your payment was complete!</i>
</x-adminlte-callout>
<x-adminlte-callout theme="danger" title-class="text-danger text-uppercase"
    icon="fas fa-lg fa-exclamation-circle" title="Payment Error">
    <i>There was an error on the payment procedure!</i>
</x-adminlte-callout>
<x-adminlte-callout theme="info" class="bg-gradient-info" title-class="text-bold text-dark"
    icon="fas fa-lg fa-bell text-dark" title="Notification">
    This is a notification.
</x-adminlte-callout>
<x-adminlte-callout theme="danger" class="bg-gradient-pink" title-class="text-uppercase"
    icon="fas fa-lg fa-leaf text-purple" title="observation">
    <i>A styled observation for the user.</i>
</x-adminlte-callout>

Card

Represents an AdminLTE card box. The following attributes are available:

Attribute	Description	Type	Default	Required
collapsible	Enables a collapsible card with a button to collapse/expand it. Use the 'collapsed' string value to initiate the card on collapsed mode	any	null	no
disabled	Disables the card (an overay will show over the card)	any	null	no
icon	A fontawesome icon for the card header	string	null	no
maximizable	Enables a maximizable card with a button to maximize it	any	null	no
removable	Enables a removable card with a button to remove it	any	null	no
theme	The card theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lighblue or teal	string	null	no
theme-mode	The theme mode (full or outline)	string	null	no
title	The title for the card header	string	null	no

Any other attribute you define will be directly inserted into the underlying div.card element. You can, for example, define extra classes using class, or use onclick, id or any other attribute you may need. Some examples:

{{-- Minimal with a title --}}
<x-adminlte-card title="Card"/>

{{-- Disabled --}}
<x-adminlte-card title="Disabled Card" theme="teal" disabled>
    A disabled card with teal theme...
</x-adminlte-card>

{{-- Themes --}}
<x-adminlte-card title="Dark Card" theme="dark" icon="fas fa-lg fa-moon">
    A dark theme card...
</x-adminlte-card>
<x-adminlte-card title="Lightblue Card" theme="lightblue" theme-mode="outline"
    icon="fas fa-lg fa-envelope" removable>
    A removable card with outline lightblue theme...
</x-adminlte-card>
<x-adminlte-card title="Purple Card" theme="purple" icon="fas fa-lg fa-fan" removable collapsible>
    A removable and collapsible card with purple theme...
</x-adminlte-card>
<x-adminlte-card title="Success Card" theme="success" theme-mode="full" icon="fas fa-lg fa-thumbs-up"
    collapsible="collapsed">
    A collapsible card with full success theme and collapsed...
</x-adminlte-card>
<x-adminlte-card title="Info Card" theme="info" icon="fas fa-lg fa-bell" collapsible removable maximizable>
    An info theme card with all the tool buttons...
</x-adminlte-card>
<x-adminlte-card title="Info Card" theme="maroon" theme-mode="full" icon="fas fa-lg fa-bell"
    collapsible removable maximizable>
    <x-adminlte-input name="User" placeholder="Username"/>
    <x-adminlte-input name="Pass" type="password" placeholder="Password"/>
    <x-adminlte-button class="d-flex ml-auto" theme="light" label="submit" icon="fas fa-sign-in"/>
</x-adminlte-card>

NOTE: On the examples all the cards where wrapped inside a <div class="col-md-3"></div> element.

Info Box

Represents an AdminLTE info box widget. The following attributes are available:

Attribute	Description	Type	Default	Required
icon	A Font Awesome icon for the info box	string	null	no
icon-theme	The icon wrapper theme (same values as theme property)	string	null	no
description	A long text/description for the info box	string	null	no
progress	Enables a progress bar for the box. The value should be an integer with the percentage of the progress bar	int	null	no
progress-theme	The progress bar theme (same values as theme property)	string	null	no
text	A short text/description for the info box	string	null	no
theme	The small box theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lighblue or teal	string	null	no
title	A title/header for the info box	string	null	no

Any other attribute you define will be directly inserted into the underlying div.info-box element. So, for example, you can define extra classes using the class attribute, use the onclick, the id or any other attribute you may need.

This component also provides the next Javascript utility method:

• _adminlte_ibUtils.update(target, data): To update the data of the target info box element. The target should be an id attribute of a div.info-box element. The data should be an object with the new attributes, the supported object keys are: title, text, description, icon and progress (see examples for more details).

Some examples:

{{-- Minimal with title, text and icon --}}
<x-adminlte-info-box title="Title" text="some text" icon="far fa-lg fa-star"/>

{{-- Themes --}}
<x-adminlte-info-box title="Views" text="424" icon="fas fa-lg fa-eye text-dark" theme="gradient-teal"/>

<x-adminlte-info-box title="Downloads" text="1205" icon="fas fa-lg fa-download" icon-theme="purple"/>

<x-adminlte-info-box title="528" text="User Registrations" icon="fas fa-lg fa-user-plus text-primary"
    theme="gradient-primary" icon-theme="white"/>

<x-adminlte-info-box title="Tasks" text="75/100" icon="fas fa-lg fa-tasks text-orange" theme="warning"
    icon-theme="dark" progress=75 progress-theme="dark"
    description="75% of the tasks have been completed"/>

{{-- Updatable --}}
<x-adminlte-info-box title="Reputation" text="0/1000" icon="fas fa-lg fa-medal text-dark"
    theme="danger" id="ibUpdatable" progress=0 progress-theme="teal"
    description="0% reputation completed to reach next level"/>

@push('js')
<script>

    $(document).ready(function() {

        let updateIBox = () =>
        {
            // Update data.
            let rep = Math.floor(1000 * Math.random());
            let idx = rep < 100 ? 0 : (rep > 500 ? 2 : 1);
            let progress = Math.round(rep * 100 / 1000);
            let text = rep + '/1000';
            let icon = 'fas fa-lg fa-medal ' + ['text-primary', 'text-light', 'text-warning'][idx];
            let description = progress + '% reputation completed to reach next level';

            let data = {text, icon, description, progress};
            _adminlte_ibUtils.update('ibUpdatable', data);
        };

        setInterval(updateIBox, 5000);
    })

</script>
@endpush

NOTE: On the examples all the widgets where wrapped inside a <div class="col-md-4"></div> element.

Profile col Item, Profile Row Item

Both components represents an item for the AdminLTE profile widget. The difference is that on the profile-col-item the elements are stacked vertically, while on the profile-row-item the element are stacked horizontally. The following attributes are available:

Attribute	Description	Type	Default	Required
badge	A badge theme for the text attribute. When used, the text attribute will be wrapped inside a badge of the configured theme.	string	null	no
icon	A fontawesome icon for the item	string	null	no
text	The text/description for the item	string	null	no
title	The title/header for the item	string	null	no
size	The item size. Used to wrap the item inside a col-size div	integer	null	no
url	An url for the item. When enabled the title attribute will be wrapped inside a link pointing to that url	string	null	no

The available themes for the badge are: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lighblue or teal. Any other attribute you define will be directly inserted into the underlying div.col-<size> element. So, for example, you can define class, onclick, id or any other attribute you may need. For examples, check the Profile Widget Component.

Profile Widget

Represents an AdminLTE profile widget. The following attributes are available:

Attribute	Description	Type	Default	Required
cover	A cover image url for the profile header section (overlays the theme)	string	null	no
desc	A description for the user profile	string	null	no
footer-class	Extra classes for the profile footer (to customize the footer section)	string	null	no
img	An image url for the user profile	string	null	no
header-class	Extra classes for the profile header (to customize the header section)	string	null	no
layout-type	The profile header layout type (modern or classic).	string	'modern'	no
name	The user name of the profile	string	null	no
theme	The profile header theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lighblue or teal	string	null	no

Any other attribute you define will be directly inserted into the underlying div.card.card-widget element. So, for example, you can define class, onclick, id or any other attribute you may need. There is a main slot available to provide content into the footer section, usually adding Profile Col Item or Profile Row Item elements, but you can try with custom content also.

Some examples with modern (default) layout:

{{-- Minimal with a name --}}
<x-adminlte-profile-widget name="User Name"/>

{{-- Themes --}}
<x-adminlte-profile-widget name="John Doe" desc="Administrator" theme="teal"
    img="https://picsum.photos/id/1/100">
    <x-adminlte-profile-col-item title="Followers" text="125" url="#"/>
    <x-adminlte-profile-col-item title="Following" text="243" url="#"/>
    <x-adminlte-profile-col-item title="Posts" text="37" url="#"/>
</x-adminlte-profile-widget>

<x-adminlte-profile-widget name="Sarah O'Donell" desc="Commercial Manager" theme="primary"
    img="https://picsum.photos/id/1011/100">
    <x-adminlte-profile-col-item class="text-primary border-right" icon="fas fa-lg fa-gift"
        title="Sales" text="25" size=6 badge="primary"/>
    <x-adminlte-profile-col-item class="text-danger" icon="fas fa-lg fa-users" title="Dependents"
        text="10" size=6 badge="danger"/>
</x-adminlte-profile-widget>

<x-adminlte-profile-widget name="Robert Gleeis" desc="Sound Manager" theme="warning"
    img="https://picsum.photos/id/304/100" header-class="text-left" footer-class="bg-gradient-dark">
    <x-adminlte-profile-col-item title="I'm also" text="Artist" size=3
        class="text-orange border-right border-warning"/>
    <x-adminlte-profile-col-item title="Loves" text="Music" size=6
        class="text-orange border-right border-warning"/>
    <x-adminlte-profile-col-item title="Like to" text="Travel" size=3
        class="text-orange"/>
</x-adminlte-profile-widget>

<x-adminlte-profile-widget name="Alice Viorich" desc="Community Manager" theme="purple"
    img="https://picsum.photos/id/454/100" footer-class="bg-gradient-pink">
    <x-adminlte-profile-col-item icon="fab fa-2x fa-instagram" text="Instagram" badge="purple" size=4/>
    <x-adminlte-profile-col-item icon="fab fa-2x fa-facebook" text="Facebook" badge="purple" size=4/>
    <x-adminlte-profile-col-item icon="fab fa-2x fa-twitter" text="Twitter" badge="purple" size=4/>
</x-adminlte-profile-widget>

{{-- Custom --}}
<x-adminlte-profile-widget class="elevation-4" name="Willian Dubling" desc="Web Developer"
    img="https://picsum.photos/id/177/100" cover="https://picsum.photos/id/541/550/200"
    header-class="text-white text-right" footer-class='bg-gradient-dark'>
    <x-adminlte-profile-row-item title="4+ years of experience with"
        class="text-center border-bottom border-secondary"/>
    <x-adminlte-profile-col-item title="Javascript" icon="fab fa-2x fa-js text-orange" size=3/>
    <x-adminlte-profile-col-item title="PHP" icon="fab fa-2x fa-php text-orange" size=3/>
    <x-adminlte-profile-col-item title="HTML5" icon="fab fa-2x fa-html5 text-orange" size=3/>
    <x-adminlte-profile-col-item title="CSS3" icon="fab fa-2x fa-css3 text-orange" size=3/>
    <x-adminlte-profile-col-item title="Angular" icon="fab fa-2x fa-angular text-orange" size=4/>
    <x-adminlte-profile-col-item title="Bootstrap" icon="fab fa-2x fa-bootstrap text-orange" size=4/>
    <x-adminlte-profile-col-item title="Laravel" icon="fab fa-2x fa-laravel text-orange" size=4/>
</x-adminlte-profile-widget>

NOTE: On the examples all the profile widgets where wrapped inside a <div class="col-md-4"></div> element.

Some examples with classic layout:

{{-- Layout Classic / Minimal --}}
<x-adminlte-profile-widget name="User Name" layout-type="classic"/>

{{-- Layout Classic / Theme --}}
<x-adminlte-profile-widget name="John Doe" desc="Administrator" theme="lightblue"
    img="https://picsum.photos/id/1/100" layout-type="classic">
    <x-adminlte-profile-row-item icon="fas fa-fw fa-user-friends" title="Followers" text="125"
        url="#" badge="teal"/>
    <x-adminlte-profile-row-item icon="fas fa-fw fa-user-friends fa-flip-horizontal" title="Following"
        text="243" url="#" badge="lightblue"/>
    <x-adminlte-profile-row-item icon="fas fa-fw fa-sticky-note" title="Posts" text="37"
        url="#" badge="navy"/>
</x-adminlte-profile-widget>

{{-- Layout Classic / Custom --}}
<x-adminlte-profile-widget name="Roxana Saziadko" desc="Graphic Designer" class="elevation-4"
    img="https://picsum.photos/id/1027/100" cover="https://picsum.photos/id/130/550/200"
    layout-type="classic" header-class="text-right" footer-class="bg-gradient-teal">
    <x-adminlte-profile-col-item class="border-right text-dark" icon="fas fa-lg fa-tasks"
        title="Projects Done" text="25" size=6 badge="lime"/>
    <x-adminlte-profile-col-item class="text-dark" icon="fas fa-lg fa-tasks"
        title="Projects Pending" text="5" size=6 badge="danger"/>
    <x-adminlte-profile-row-item title="Contact me on:" class="text-center text-dark border-bottom"/>
    <x-adminlte-profile-row-item icon="fab fa-fw fa-2x fa-instagram text-dark" title="Instagram"
        url="#" size=4/>
    <x-adminlte-profile-row-item icon="fab fa-fw fa-2x fa-facebook text-dark" title="Facebook"
        url="#" size=4/>
    <x-adminlte-profile-row-item icon="fab fa-fw fa-2x fa-twitter text-dark" title="Twitter"
        url="#" size=4/>
</x-adminlte-profile-widget>

NOTE: On the examples all the profile widgets where wrapped inside a <div class="col-md-4"></div> element.

Progress

Represents an AdminLTE styled progress bar. The following attributes are available:

Attribute	Description	Type	Default	Required
animated	Enables animated mode on the progress	any	null	no
size	The progress bar size (sm, xs or xxs)	string	null	no
striped	Enables stripes on the progress bar	any	null	no
theme	The progress bar theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lighblue or teal	string	info	no
value	The progress bar percentage value (integer between 0 and 100)	int	0	no
vertical	Enables vertical mode on the progress bar	any	null	no
with-label	Enables a percentage label on the progress bar	any	null	no

Any other attribute you define will be directly inserted into the underlying div.progress element. You can, for example, define a class, onclick, id or any other attribute you may need.

This component also provides the next Javascript utility methods:

• _adminlte_pbUtils.getValue(target): To get the progress bar value of the target progress element. The target should be an id attribute of a div.progress element.

• _adminlte_pbUtils.setValue(target, value): To update the progress bar value of the target progress element. The target should be an id attribute of a div.progress element. The value should be an integer.

Some examples:

{{-- Minimal --}}
<x-adminlte-progress/>

{{-- themes --}}
<x-adminlte-progress theme="light" value=55/>
<x-adminlte-progress theme="dark" value=30/>
<x-adminlte-progress theme="primary" value=95/>
<x-adminlte-progress theme="secondary" value=40/>
<x-adminlte-progress theme="info" value=85/>
<x-adminlte-progress theme="warning" value=25/>
<x-adminlte-progress theme="danger" value=50/>
<x-adminlte-progress theme="success" value=75/>

{{-- Custom --}}
<x-adminlte-progress theme="teal" value=75 animated/>
<x-adminlte-progress size="sm" theme="indigo" value=85 animated/>
<x-adminlte-progress theme="pink" value=50 animated with-label/>

{{-- Vertical --}}
<x-adminlte-progress theme="purple" value=40 vertical/>
<x-adminlte-progress theme="orange" value=80 vertical animated/>
<x-adminlte-progress theme="navy" value=70 vertical striped with-label/>
<x-adminlte-progress theme="lime" size="xxs" value=90 vertical/>

{{-- Dinamic Change --}}
<x-adminlte-progress id="pbDinamic" value="5" theme="lighblue" animated with-label/>
{{-- Update the previous progress bar every 2 seconds, incrementing by 10% each step --}}
@push('js')
<script>
    $(document).ready(function() {
        let inc = (val) => {
            let v = _adminlte_pbUtils.getValue('pbDinamic') + val;
            return v > 100 ? 0 : v;
        };
        setInterval(
            () => _adminlte_pbUtils.setValue('pbDinamic', inc(10)),
            2000
        );
    })
</script>
@endpush

Small Box

Represents an AdminLTE small box widget. The following attributes are available:

Attribute	Description	Type	Default	Required
icon	A Font Awesome icon for the small box	string	null	no
loading	Enables a loading animation (an overlay with a loading icon will show over the box)	any	null	no
text	The text/description for the small box	string	null	no
theme	The small box theme: light, dark, primary, secondary, info, success, warning, danger or any other AdminLTE color like lighblue or teal	string	null	no
title	The title/header for the small box	string	null	no
url	An url for the small box. When enabled, a link-styled footer section will be visible pointing to that url	string	null	no
url-text	A text/label associated with the footer url	string	null	no

Any other attribute you define will be directly inserted into the underlying div.small-box element. So, for example, you can define extra classes using the class attribute, use the onclick, the id or any other attribute you may need.

This component also provides the next Javascript utility methods:

• _adminlte_sbUtils.toggleLoading(target): To toggle the loading animation of the target small box. The target should be an id attribute of a div.small-box element.

• _adminlte_sbUtils.update(target, data): To update the data of the target small box element. The target should be an id attribute of a div.small-box element. The data should be an object with the new attributes, the supported object keys are: title, text, icon and url (see examples for more details).

Some examples:

{{-- Minimal with title, text and icon --}}
<x-adminlte-small-box title="Title" text="some text" icon="fas fa-star"/>

{{-- Loading --}}
<x-adminlte-small-box title="Loading" text="Loading data..." icon="fas fa-chart-bar"
    theme="info" url="#" url-text="More info" loading/>

{{-- Themes --}}
<x-adminlte-small-box title="424" text="Views" icon="fas fa-eye text-dark"
    theme="teal" url="#" url-text="View details"/>

<x-adminlte-small-box title="Downloads" text="1205" icon="fas fa-download text-white"
    theme="purple"/>

<x-adminlte-small-box title="528" text="User Registrations" icon="fas fa-user-plus text-teal"
    theme="primary" url="#" url-text="View all users"/>

{{-- Updatable --}}
<x-adminlte-small-box title="0" text="Reputation" icon="fas fa-medal text-dark"
    theme="danger" url="#" url-text="Reputation history" id="sbUpdatable"/>

@push('js')
<script>

    $(document).ready(function() {

        let updateBox = () =>
        {
            // Stop loading animation.
            _adminlte_sbUtils.toggleLoading('sbUpdatable');

            // Update all the data.
            let rep = Math.floor(1000 * Math.random());
            let idx = rep < 100 ? 0 : (rep > 500 ? 2 : 1);
            let text = 'Reputation - ' + ['Basic', 'Silver', 'Gold'][idx];
            let icon = 'fas fa-medal ' + ['text-primary', 'text-light', 'text-warning'][idx];
            let url = ['url1', 'url2', 'url3'][idx];

            let data = {text, title: rep, icon, url};
            _adminlte_sbUtils.update('sbUpdatable', data);
        };

        let startUpdateProcedure = () =>
        {
            // Simulate loading procedure.
            _adminlte_sbUtils.toggleLoading('sbUpdatable');

            // Wait and update the data.
            setTimeout(updateBox, 2000);
        };

        setInterval(startUpdateProcedure, 10000);
    })

</script>
@endpush

NOTE: On the examples all the widgets where wrapped inside a <div class="col-md-4"></div> element.