Components

Components and slots provide similar benefits to sections and layouts; however, some may find the mental model of components and slots easier to understand. Material Pro provides multiple components to allow you to reuse throughout your application. The code behind the componets is stored in views/component-library/ui-elements.

Button

Buttons

<!-- Stored in resources/views/demo-content/components.blade.php -->    
@component('component-library.ui-elements.button',
[
     'color' => 'btn-secondary',
     'text'  => 'Secondary'
])@endcomponent

<!-- Stored in resources/views/demo-content/components.blade.php -->  
@component('component-library.ui-elements.dropdown-button',
     [
         'text'   => 'Go somewhere',
         'class'   => 'btn-secondary',
         'sr_text'   => 'Go somewhere'
     ])
@endcomponent

Tab

Tabs

<!-- Stored in resources/views/demo-content/components.blade.php -->    
@component('component-library.ui-elements.tab',
[
    'tab' => $tabs['defaultTabs'],
    'tabContentBorder' => true
])@endcomponent

Ui Card

UiCards

<!-- Stored in resources/views/demo-content/components.blade.php -->    
@component('component-library.ui-elements.ui-card',
[
    'url'           => '/images/vendor/wrappixel/material-pro/4.1.0/assets/images/big/img1.jpg',
    'alt'           => 'Card image cap',
    'title'         => 'Card title',
    'action'        => '#',
    'text'          => "Some quick example text to build on the card title and make up the bulk of the card's content.",
    'button_text'   => 'Go somewhere'
])
@endcomponent

Ui User Card

UiUserCards

<!-- Stored in resources/views/demo-content/components.blade.php -->    
@component('component-library.ui-elements.ui-user-card',
[
        'url'       => '/images/vendor/wrappixel/material-pro/4.1.0/assets/images/users/1.jpg',
        'alt'       => 'user',
        'action'    => '#',
        'title'     => 'Genelia Deshmukh',
        'subtitle'  => 'Managing Director'
])
@endcomponent