From c24bcb78a9f1f9f4b357a641e11831a342a77ab7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zain=F0=9F=8D=95?= Date: Tue, 11 Nov 2025 12:49:57 +0800 Subject: [PATCH] docs(README): update content for clarity and enhance component descriptions --- README.md | 249 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 144 insertions(+), 105 deletions(-) diff --git a/README.md b/README.md index a81286a..476bc92 100644 --- a/README.md +++ b/README.md @@ -1,107 +1,45 @@ -# Material Blade +# 🎨 Material Blade -Material Blade is a simple package that provides the beautifulness of Google [Material Design](https://material.io/) components as Laravel Blade components. Material Blade aims to make UI/UX development of your Laravel app faster, inspired by [Material UI](https://mui.com/). +> **Beautiful Google Material Design components for Laravel Blade** ✨ -> ![WARNING] -> This package is still under development, please contribute to make it release faster. +Transform your Laravel applications with elegant, ready-to-use Material Design components. Build stunning UIs faster than ever, inspired by [Material UI](https://mui.com/) πŸš€ +[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) +[![Laravel](https://img.shields.io/badge/Laravel-9%20%7C%2010%20%7C%2011%20%7C%2012-red.svg)](https://laravel.com) +[![PHP](https://img.shields.io/badge/PHP-8.1%2B-purple.svg)](https://php.net) + +--- + +## ⚑ Why Material Blade? + +**Before** πŸ˜“ ```html - - +``` - - +**After** 😎 +```html + ``` -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](https://laravel.com/docs/8.x/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](https://github.com/sensasi-delight/material-blade-demo). - -## Components - -The status of [Material Design Web components (v2)](https://m2.material.io/components?platform=web) that implemented on this package are shown on the list below: - -- [x] Alert -- [x] App bar: Top -- [x] Banner -- [x] Button - - [x] Basic Button - - [x] Floating Action Button - - [x] Icon Button -- [x] Card -- [x] Checkbox -- [x] Chip -- [x] Data table -- [x] Dialog -- [x] Icon -- [x] Image list -- [x] List -- [x] Menu -- [x] Navigation drawer -- [x] Progress indicator - - [x] Linear Progress - - [x] Circular Progress -- [x] Radio button -- [x] Slider -- [x] Snackbar -- [x] Switch -- [x] Tab Bar -- [x] Text field -- [x] Tooltip -- [x] Typography - -### Unsupported Components - -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 - -## Development - -To contribute to this project, you can clone this repository and install the dependencies by running the command below: +Simple. Clean. Beautiful. That's Material Blade! πŸ’« -```bash -git clone https://github.com/sensasi-delight/material-blade -cd material-blade -composer install -npm install -npm run dev -``` +--- -## Installation +## πŸš€ Quick Start -Material Blade is available on [packagist.org](https://packagist.org/packages/sensasi-delight/material-blade), You can install the Material Blade to your Laravel project using Composer by command-line below: +### πŸ“¦ Installation ```bash composer require sensasi-delight/material-blade ``` - - - - -Next step, you must includes once the `` inside `` on your `view`. That's itβ€Ό, now you can use the Material Blade components on your `view`πŸŽ‰. Your `view` should look like code below. +Add the assets component in your layout's ``: ```html @@ -109,38 +47,139 @@ Next step, you must includes once the `` inside `` on yo - - Material Blade Example + My App - + - - - + + ``` -## Contributing +### πŸ’‘ Usage Examples + +```blade +{{-- 🎯 Alerts --}} +Profile updated successfully! + +{{-- 🎨 Cards --}} + + + + Build beautiful interfaces with Material Design! + + + +{{-- πŸ”˜ Buttons --}} + + Save Changes + + +{{-- πŸ“ Text Fields --}} + +``` + +--- + +## πŸ“š Components + +30+ [Material Design components](https://m2.material.io/components?platform=web) ready to use: + +### 🎯 **Feedback & Alerts** +- [πŸ”” Alert](https://material-blade-docs.vercel.app/components/alert) - [πŸŽͺ Banner](https://material-blade-docs.vercel.app/components/banner) - [πŸ’¬ Dialog](https://material-blade-docs.vercel.app/components/dialog) - [πŸ“’ Snackbar](https://material-blade-docs.vercel.app/components/snackbar) + +### 🧭 **Navigation** +- [πŸ“± App Bar](https://material-blade-docs.vercel.app/components/app-bar) - [πŸšͺ Drawer](https://material-blade-docs.vercel.app/components/drawer) - [πŸ“‹ Menu](https://material-blade-docs.vercel.app/components/menu) - [πŸ“‘ Tab Bar](https://material-blade-docs.vercel.app/components/tab-bar) + +### πŸŽ›οΈ **Input & Forms** +- [πŸ”˜ Button](https://material-blade-docs.vercel.app/components/button) - [β­• Checkbox](https://material-blade-docs.vercel.app/components/checkbox) - [πŸ”² Radio](https://material-blade-docs.vercel.app/components/radio) - [🎚️ Slider](https://material-blade-docs.vercel.app/components/slider) - [πŸ”„ Switch](https://material-blade-docs.vercel.app/components/switch) - [πŸ“ Text Field](https://material-blade-docs.vercel.app/components/text-field) +- [βž• FAB](https://material-blade-docs.vercel.app/components/fab) - [πŸ”Ή Icon Button](https://material-blade-docs.vercel.app/components/icon-button) + +### πŸ“Š **Data Display** +- [πŸƒ Card](https://material-blade-docs.vercel.app/components/card) - [🏷️ Chip](https://material-blade-docs.vercel.app/components/chip) - [πŸ“Š Data Table](https://material-blade-docs.vercel.app/components/data-table) - [🎨 Icon](https://material-blade-docs.vercel.app/components/icon) - [πŸ–ΌοΈ Image List](https://material-blade-docs.vercel.app/components/image-list) - [πŸ“ƒ List](https://material-blade-docs.vercel.app/components/list) - [πŸ’¬ Tooltip](https://material-blade-docs.vercel.app/components/tooltip) - [✍️ Typography](https://material-blade-docs.vercel.app/components/typography) + +### ⏳ **Progress Indicators** +- [πŸ“ˆ Linear Progress](https://material-blade-docs.vercel.app/components/linear-progress) - [β­• Circular Progress](https://material-blade-docs.vercel.app/components/circular-progress) + +[**πŸ“– View Full Documentation β†’**](https://material-blade-docs.vercel.app) + +--- + +## ✨ Features + +- βœ… **30+ Components** - Complete Material Design component library +- βœ… **Type-Safe** - PHP enums for variants and properties +- βœ… **Theme Support** - Built-in color system with CSS variables +- βœ… **Auto-Discovery** - No manual service provider registration (Laravel 8+) +- βœ… **Icon Variants** - Filled, Outlined, Round, Sharp, Two-Tone +- βœ… **Elevation Support** - Material Design elevation levels (0-24) +- βœ… **Slot-Based** - Flexible content structure with Blade slots +- βœ… **Well Documented** - Comprehensive docs and examples + +--- + +## πŸ› οΈ Development + +Want to contribute? We'd love your help! πŸ’ͺ + +```bash +# Clone the repository +git clone https://github.com/sensasi-delight/material-blade +cd material-blade + +# Install dependencies +composer install +npm install + +# Start development +npm run dev +``` + +### 🀝 Contributing + +1. 🍴 Fork the Project +2. 🌿 Create your Feature Branch (`git checkout -b feature/AmazingFeature`) +3. πŸ’Ύ Commit your Changes (`git commit -m 'Add some AmazingFeature'`) +4. πŸ“€ Push to the Branch (`git push origin feature/AmazingFeature`) +5. πŸŽ‰ Open a Pull Request + +All contributions are **greatly appreciated**! ❀️ + +--- + +## πŸ“‹ Requirements + +- 🐘 **PHP** 8.1 or higher +- 🎨 **Laravel** 9.x, 10.x, 11.x, or 12.x +- πŸ’‘ Basic knowledge of [Blade Components](https://laravel.com/docs/blade#components) + +--- + +## πŸŽ“ Resources + +- πŸ“– [**Documentation**](https://material-blade-docs.vercel.app) - Complete guide and API reference +- 🎨 [**Material Design**](https://material.io/) - Design guidelines +- πŸ’¬ [**Discussions**](https://github.com/sensasi-delight/material-blade/discussions) - Ask questions and share ideas + +--- + +## πŸ“„ License -Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. +Released under the [MIT License](LICENSE). Free to use in personal and commercial projects! πŸŽ‰ -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! +--- -1. Fork the Project. -2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`). -3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`). -4. Push to the Branch (`git push origin feature/AmazingFeature`). -5. Open a Pull Request. +
-## License +### 🌟 Star us on GitHub! -The code is released under the MIT license. +If you find Material Blade useful, please give us a star ⭐ -## Contact +**Made with ❀️ for the Laravel community** -Email - [zainadam.id@gmail.com](mailto:zainadam.id@gmail.com?subject=[GitHub]%20MaterialBlade) +[⬆ Back to top](#-material-blade) -Twitter - [@sensasi_DELIGHT](https://twitter.com/sensasi_DELIGHT) +