Material Blade is a simple package that provides the beautifulness of Google Material Design components as Laravel Blade components. Material Blade aims to make UI/UX development of your Laravel app faster, inspired by Material UI.
<!-- from this -->
<button class="mdc-button">
<span class="mdc-button__ripple"></span>
<span class="mdc-button__label">This is a Button</span>
</button>
<!-- to this -->
<x-MaterialBlade::button label="This is a Button" />
<!-- or this for more shorter -->
<x-mbc::button label="This is a Button" />General knowledge of Laravel and Blade components i'ts required for using this package. However, the fully understand about this feature is helpful for optimizing the usages of this package. If you never heard about Blade Components, it is a good start to understand it and plays with Material Blade package.
The examples of package usages can be seen on this repository.
This package is still under development, please contribute to make it release faster. The status of Material Design Web components that implemented on this package are shown on the list below.
- App bar: Top
- Banner
- Button
- Basic Button
- Floating Action Button
- Icon Button
- Card
- Checkbox
- Chip
- Data table
- Dialog
- Icon
- Image list
- List
- Menu
- Navigation drawer
- Progress indicator
- Linear Progress
- Circular Progress
- Radio button
- Slider
- Snackbar
- Switch
- Tab Bar
- Text field
- Tooltip
- Typography
The implementation of these components below are not supported by default for Material Design Web.
- App bar: bottom
- Backdrop
- Bottom navigation
- Date picker
- Divider
- Navigation rail
- Sheet: bottom
- Sheet: side
- Time picker
Material Blade is available on packagist.org, You can import the package to your Laravel project using Composer by command-line below:
composer require sensasi-delight/material-bladeAfter Material Blade has installed on your Laravel project, you have to registering the MaterialBlade\ComponentProvider::class to the app providers.
// config/app.php
'providers' => [
// Other Service Providers
MaterialBlade\ComponentProvider::class,
];Next step, you must includes once the <x-MaterialBlade::_assets /> inside <head> on your view. That's it‼, now you can use the Material Blade components on your view🎉. Your view should look like code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Material Blade Example</title>
<!-- Material Blade required assets -->
<x-MaterialBlade::_assets />
</head>
<body>
<!-- this is Material Blade component -->
<x-MaterialBlade::button label="This is a Button" />
</body>
</html>Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project.
- Create your Feature Branch (
git checkout -b feature/AmazingFeature). - Commit your Changes (
git commit -m 'Add some AmazingFeature'). - Push to the Branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
The code is released under the MIT license.
Email - zainadam.id@gmail.com
Twitter - @sensasi_DELIGHT