Download the PHP package contextmapp/laravel-material-components without Composer
On this page you can find all versions of the php package contextmapp/laravel-material-components. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package laravel-material-components
Material Components for Laravel
This package provides Blade components to use Material Components with Laravel.
Installation
Add the package with Composer:
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
:
Components
The components are available under the mdc
namespace.
Include the MDC stylesheet and script bundles.
To make use of the Material Icons, include the icon font:
All components have the data-mdc-auto-init
attribute set, so they will be
initialized automatically when mdc.autoInit()
is called.
Buttons
Component: mdc::button
Example:
Slots:
- Default: the button label
Parameters:
type
: The type of button (values:button
,submit
,link
, default:button
)url
: The URL to link the button to (required when type islink
)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)
Floating Action Button
Component: mdc::fab
Example:
Slots:
- Default: the button label
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
)
Cards
Component: TODO
Chips
Component: TODO
Dialogs
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:
Slots:
- Default: the dialog body
title
: The dialog title componentfooter
: The dialog footer, containing the action buttons
Parameters:
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
)
Dialog actions
Component: mdc::dialog.action
Example:
Slots:
- Default: the button label
Parameters:
action
: required - The dialog action (allowed:accept
,cancel
)type
: The button type (allowed:button
,submit
, default:button
)
Drawers
Component: mdc::drawer
Example:
Slots:
- Default: the drawer contents
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 default
Image List
Component: TODO
Inputs and controls
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 input
Checkboxes
Component: mdc::checkbox
Example:
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 thevalue
field)
Form 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:
Slots:
- Default: the input control
label
: the input label
Parameters:
id
: required - The ID of the input controlalign_end
: Flag to move the input control to the end of the form field
Radios
Component: mdc::radio
Example:
Parameters:
value
: required - The value to set when selectedchecked
: Mark the option as selected
Select
Component: mdc::select
Example:
Slots:
options
: The slot containing the selectable options
Parameters:
This component has no additional parameters
Sliders
Component: TODO
Switches
Component: mdc::switch
Example:
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 thevalue
field)
Text Field
Component: mdc::text-field
Example:
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 field
Text Field Helper Text
Component: 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:
Slots:
- Default: the help text to display
Parameters:
id
: required - The ID to use foraria-describedby
andaria-controls
on the text fieldpersistent
: Flag to make help text permanently visiblevalidation
: Flag to indicate help text is validation message
Lists
Components: mdc::list
Example:
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 variant
List items
Components: mdc::list.item
Example of a regular list item with icon:
Example of a two line list item with avatar:
Slots:
- Default: The text contents of the item (when
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 throughicon
oravatar
properties)meta
: The last tile for the list item
Parameters:
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 activated
Menus
Components: mdc::menu
Example:
Parameters:
id
: required - The menu ID to refer to when interacting with the menu
Snackbars
Component: mdc::snackbar
Example:
Parameters:
This component has no parameters
Tabs
Component: TODO
Toolbars
Component: mdc::toolbar
Example:
Slots:
- Default: The toolbar title
up
: The slot for the upward navigation action on the toolbar, used for themdc::toolbar.menu-action
component in most casesactions
: The contents of the end-aligned toolbar section, used withmdc::toolbar.action
components in most cases
Parameters:
This component has no parameters
Toolbar menu action
Component: mdc::toolbar.menu-action
Example:
Slots:
- Default: the label for the toolbar action
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 action
Toolbar action
Component: mdc::toolbar.action
Example:
Slots:
- Default: the label for the toolbar action
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 action
Top App Bar
Component: mdc::top-app-bar
This component mimics the toolbar component in most aspects, refer to the toolbar section for more information
Example:
Slots:
- Default: The contents of the start-aligned app bar section
actions
: The contents of the end-aligned app bar section
Parameters:
This component has no parameters