包简介

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.

README 文档

README

Beautiful Google Material Design components for Laravel Blade ✨

Transform your Laravel applications with elegant, ready-to-use Material Design components. Build stunning UIs faster than ever, inspired by Material UI 🚀

⚡ Why Material Blade?

Before 😓

<button class="mdc-button mdc-button--raised">
    <span class="mdc-button__ripple"></span>
    <span class="mdc-button__label">Click Me</span>
</button>

After 😎

<x-mbc::button label="Click Me" variant="raised" />

Simple. Clean. Beautiful. That's Material Blade! 💫

🚀 Quick Start

📦 Installation

composer require sensasi-delight/material-blade

🎯 Setup

Add the assets component in your layout's <head>:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My App</title>

        <!-- 🎨 Material Blade Assets -->
        <x-mbc::_assets />
    </head>
    <body>
        <!-- ✨ Start using components! -->
        <x-mbc::button label="Hello World" color="primary" />
    </body>
</html>

💡 Usage Examples

{{-- 🎯 Alerts --}}
<x-mbc::alert severity="success">Profile updated successfully!</x-mbc::alert>

{{-- 🎨 Cards --}}
<x-mbc::card>
    <x-mbc::card-header title="Welcome" subtitle="Material Blade" />
    <x-mbc::card-content>
        Build beautiful interfaces with Material Design!
    </x-mbc::card-content>
</x-mbc::card>

{{-- 🔘 Buttons --}}
<x-mbc::button variant="raised" color="primary" icon="save">
    Save Changes
</x-mbc::button>

{{-- 📝 Text Fields --}}
<x-mbc::text-field label="Email" type="email" required />

📚 Components

30+ Material Design components ready to use:

✨ 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! 💪

# 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

🍴 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

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

🎓 Resources

📖 Documentation - Complete guide and API reference
🎨 Material Design - Design guidelines
💬 Discussions - Ask questions and share ideas

📄 License

Released under the MIT License. Free to use in personal and commercial projects! 🎉

🌟 Star us on GitHub!

If you find Material Blade useful, please give us a star ⭐

Made with ❤️ for the Laravel community

⬆ Back to top

sensasi-delight/material-blade 适用场景与选型建议

sensasi-delight/material-blade 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 151 次下载、GitHub Stars 达 14，最近一次更新时间为 2022 年 08 月 08 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「package」「components」「google」「laravel」「blade」「material design」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 sensasi-delight/material-blade 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 sensasi-delight/material-blade 我们能提供哪些服务？

定制开发 / 二次开发

基于 sensasi-delight/material-blade 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 sensasi-delight/material-blade 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

components/webfontloader 2

Web Font Loader gives you added control when using linked fonts via @font-face.

florianrambur/discord-webhook 10

e-conomix/mageplaza-magento-2-social-login 0

Magento 2 Social Login extension is designed for quick login to your Magento 2 store without procesing complex register steps

gurubob/ascii-table 2

Simple ASCII output of array data

arc/xml 27

Ariadne Component Library: xml writer and parser Component

arc/cache 1

Ariadne Component Library: Cache Component

sensasi-delight/material-blade

包简介

关键字：

README 文档

README

⚡ Why Material Blade?

🚀 Quick Start

📦 Installation

🎯 Setup

💡 Usage Examples

📚 Components

🎯 Feedback & Alerts

🧭 Navigation

🎛️ Input & Forms

📊 Data Display

⏳ Progress Indicators