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.
![WARNING] This package is still under development, please contribute to make it release faster.
<!-- from this -->
<button class="mdc-button">
<span class="mdc-button__ripple"></span>
<span class="mdc-button__label">This is a Button</span>
</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.
The status of Material Design Web components (v2) that implemented on this package are shown on the list below:
- Alert
- 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
To contribute to this project, you can clone this repository and install the dependencies by running the command below:
git clone https://github.com/sensasi-delight/material-blade
cd material-blade
composer install
npm install
npm run devMaterial Blade is available on packagist.org, You can install the Material Blade to your Laravel project using Composer by command-line below:
composer require sensasi-delight/material-bladeNext step, you must includes once the <x-mbc::_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-mbc::_assets />
</head>
<body>
<!-- this is Material Blade component -->
<x-mbc::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 - [email protected]
Twitter - @sensasi_DELIGHT