Downloads
Stars
Version
This package provides Blade components to use Material Components with Laravel.
Add the package with Composer:
composer require contextmapp/laravel-material-components
If you use Laravel 5.4 or later, the package's service provider registers
itself with your application. Otherwise, you should add the provider to your
application config in config/app.php
:
<?php
return [
// ...
'providers' => [
// ...
Contextmapp\MaterialComponents\MaterialComponentsServiceProvider::class,
],
];
The components are available under the mdc
namespace.
Include the MDC stylesheet and script bundles.
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
To make use of the Material Icons, include the icon font:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
All components have the data-mdc-auto-init
attribute set, so they will be
initialized automatically when mdc.autoInit()
is called.
Component: mdc::button
Example:
@component('mdc::button', ['type' => 'submit', 'icon' => 'add'])
Button label
@endcomponent
Slots:
Parameters:
type
: The type of button (values: button
, submit
, link
, default: button
)url
: The URL to link the button to (required when type is link
)icon
: The name of the icon to add to the buttoniconClass
: The class to apply to button icon (default: material-icons
)method
: The _method
field value for when the button is activatedform
: The form ID you want to target with the button (if the button is outside the form)variant
: The Material Design spec button variant (allowed: unelevated
, raised
, outlined
, dense
, default: none)Component: mdc::fab
Example:
@component('mdc::fab', ['icon' => 'person_add'])
Add user
@endcomponent
Slots:
Parameters:
url
: The URL to link the FAB toicon
: required - The name of the icon for the FABiconClass
: The class to apply to the button icon (default: material-icons
)extended
: Toggle the extended FAB variant (default: false
)mini
: Toggle the mini FAB variant (default: false
)Component: TODO
Component: TODO
Component: mdc::dialog
The dialog component contains a form, so you can easily add form components to add interactivity to it. Add a submit button as one of the form actions and you're done. When included in a Laravel framework application, the CSRF-field is added automatically.
Example:
@component('mdc::dialog', ['id' => 'some-dialog'])
@slot('title', 'Do you want to continue?')
Caution: there might be dragons ahead. Or maybe a grue.
@slot('footer')
@component('mdc::dialog.action', ['action' => 'cancel'])
Cancel
@endcomponent
@component('mdc::dialog.action', ['action' => 'accept'])
Continue
@endcomponent
@endslot
@endcomponent
Slots:
title
: The dialog title componentfooter
: The dialog footer, containing the action buttonsParameters:
id
: required - The dialog ID to refer to when interacting with the dialogaction
: The endpoint for the form to submit tomethod
: The HTTP method to use when submitting the form (you can override this with a specific action button)scroll
: Flag to indicate the dialog body is scrollable (default: false
)Component: mdc::dialog.action
Example:
@component('mdc::dialog.action', ['action' => 'cancel'])
Cancel
@endcomponent
Slots:
Parameters:
action
: required - The dialog action (allowed: accept
, cancel
)type
: The button type (allowed: button
, submit
, default: button
)Component: mdc::drawer
Example:
@component('mdc::drawer', ['id' => 'main-nav', 'type' => 'persistent'])
@component('mdc::list.item', ['url' => url('/users'), 'activated' => true])
@slot('icon', 'person')
Users
@endcomponent
@component('mdc::list.item', ['url' => url('/settings')])
@slot('icon', 'settings')
Settings
@endcomponent
@endcomponent
Slots:
header
: the drawer header (if omitted, adds a toolbar spacer to the drawer)Parameters:
id
: required - The drawer ID to refer to when interacting with the drawertype
: required - The drawer variant (allowed: persistent
, temporary
)open
: Flag to render the drawer as opened by defaultComponent: TODO
For all inputs, the default slot functions as the label of the component.
Shared parameters:
field
: required - The name to give to the input. This will automatically determine the old value if the form was previously submittedvalue
: The value for the fieldrequired
: Flag to toggle required state of inputdisabled
: Flag to toggle disabled state of inputautofocus
Flag to toggle autofocus state of inputComponent: mdc::checkbox
Example:
@component('mdc::checkbox', ['field' => 'terms_of_service'])
I agree to the <a href="{{ url('/terms') }}">Terms of Service</a>;
@endcomponent
Parameters:
valueOn
: The value to submit when the checkbox is checked (default: 1
)valueOff
: The value to submit when the checkbox is unchecked (default: 0
)checked
: Set the checked state of the checkbox. (default: determined automatically from the value
field)Component: mdc::form-field
You'll mostly won't use this component directly, as it is included with the other input controls by default.
Example:
@component('mdc::form-field', ['id' => 'my-checkbox'])
{{-- Some control --}}
@slot('label')
A label for the control
@endslot
@endcomponent
Slots:
label
: the input labelParameters:
id
: required - The ID of the input controlalign_end
: Flag to move the input control to the end of the form fieldComponent: mdc::radio
Example:
@component('mdc::radio', ['field' => 'season', 'value' => 'winter', 'checked' => true])
Winter
@endcomponent
@component('mdc::radio', ['field' => 'season', 'value' => 'summer'])
Summer
@endcomponent
Parameters:
value
: required - The value to set when selectedchecked
: Mark the option as selectedComponent: mdc::select
Example:
@component('mdc::select', ['field' => 'pizza'])
Your favorite pizza
@slot('options')
<option value="hawaii">Hawaii</option>
<option value="pepperoni">Pepperoni</option>
<option value="margherita">Margherita</option
@endslot
@endcomponent
Slots:
options
: The slot containing the selectable optionsParameters:
This component has no additional parameters
Component: TODO
Component: mdc::switch
Example:
@component('mdc::switch', ['field' => 'auto_update'])
Update automatically
@endcomponent
Parameters:
valueOn
: The value to submit when the checkbox is checked (default: 1
)valueOff
: The value to submit when the checkbox is unchecked (default: 0
)checked
: Set the checked state of the checkbox. (default: determined automatically from the value
field)Component: mdc::text-field
Example:
@component('mdc::text-field', ['field' => 'email', 'type' => 'email'. 'required' => true])
@slot('value', $user->email)
E-mail Address
@endcomponent
Parameters:
type
: The type of input (default: text
)variant
: The text field variant (allowed: fullwidth
, textarea
, outlined
, default: none)icon
: The icon to add to the text fieldiconClass
: The icon class to apply to the icon (default: material-icons
)iconPlacement
: Where to place the icon (allowed: leading
, trailing
, default: leading
)help
: The help text for the text fieldComponent: mdc::text-field.helper-text
You'll mostly won't use this component directly, as it is included with the other input controls by default.
Example:
@component('mdc::text-field.helper-text', ['id' => 'file-picker-description'])
Choose a square image, at least 250px wide
@endcomponent
Slots:
Parameters:
id
: required - The ID to use for aria-describedby
and aria-controls
on the text fieldpersistent
: Flag to make help text permanently visiblevalidation
: Flag to indicate help text is validation messageComponents: mdc::list
Example:
@component('mdc::list', ['two_line' => true])
{{-- Insert some 'mdc::list.item' components here --}}
@endcomponent
Parameters:
non_interactive
: Flag to toggle non-interactive list variantdense
: Flag to toggle dense list variantavatars
: Flag to toggle avatar list varianttwo_line
: Flag to toggle two-line list variantComponents: mdc::list.item
Example of a regular list item with icon:
@component('mdc::list.item', ['icon' => 'group', 'url' => url('/groups')])
Groups
@endcomponent
Example of a two line list item with avatar:
@component('mdc::list.item', ['avatar' => url('/users/john-doe.png')])
@slot('primary', 'John Doe')
@slot('secondary', '[email protected]')
@endcomponent
Slots:
primary
slot is set, this will override default slot contents)primary
: The primary text content of the itemsecondary
: The secondary text content of the itemgraphic
: The first tile for the list item (can also be set through icon
or avatar
properties)meta
: The last tile for the list itemParameters:
url
: The URL to point the list item toavatar
: The URL to the avatar to use as the list item graphicicon
: The icon to use as the list item graphiciconClass
: The icon class for the list item graphic (default: material-icons
)selected
: Flag to toggle the list item as selectedactivated
: Flag to toggle the list item as activatedComponents: mdc::menu
Example:
@component('mdc::menu', ['id' => 'some-menu'])
{{-- Populate the menu with 'mdc::list.item' components --}}
@endcomponent
Parameters:
id
: required - The menu ID to refer to when interacting with the menuComponent: mdc::snackbar
Example:
@component('mdc::snackbar')
@endcomponent
Parameters:
This component has no parameters
Component: TODO
Component: mdc::toolbar
Example:
@component('mdc::toolbar')
Users
@slot('actions')
@component('mdc::toolbar.action', ['url' => url('/archive'), 'icon' => 'archive'])
Archived users
@endcomponent
@endslot
@endcomponent
Slots:
up
: The slot for the upward navigation action on the toolbar, used for the mdc::toolbar.menu-action
component in most casesactions
: The contents of the end-aligned toolbar section, used with mdc::toolbar.action
components in most casesParameters:
This component has no parameters
Component: mdc::toolbar.menu-action
Example:
@component('mdc::toolbar.menu-action', ['url' => url('/'), 'icon' => 'arrow_back'])
Return to index
@endcomponent
Slots:
Parameters:
icon
: required - The icon to use on the toolbar actioniconClass
: The icon class for the toolbar action (default: material-icons
)url
: The URL for the toolbar actionComponent: mdc::toolbar.action
Example:
@component('mdc::toolbar.action', ['url' => url('/search'), 'icon' => 'search'])
Search
@endcomponent
Slots:
Parameters:
icon
: required - The icon to use on the toolbar actioniconClass
: The icon class for the toolbar action (default: material-icons
)url
: The URL for the toolbar actionComponent: mdc::top-app-bar
This component mimics the toolbar component in most aspects, refer to the toolbar section for more information
Example:
@component('mdc::top-app-bar')
{{ config('app.name') }}
@slot('actions')
@component('mdc::top-app-bar.action', ['url' => url('/archive'), 'icon' => 'archive'])
Archived users
@endcomponent
@endslot
@endcomponent
Slots:
actions
: The contents of the end-aligned app bar sectionParameters:
This component has no parameters