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_methodfield 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 inputautofocusFlag 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 thevaluefield)
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 thevaluefield)
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-describedbyandaria-controlson 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
primaryslot 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 throughiconoravatarproperties)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-actioncomponent in most casesactions: The contents of the end-aligned toolbar section, used withmdc::toolbar.actioncomponents 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