README

Material Blade是一个简单的包，它将Google Material Design组件的美丽性作为Laravel Blade组件提供。Material Blade旨在使您的Laravel应用程序的UI/UX开发更快，灵感来源于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" />

使用此包需要具备Laravel和Blade组件的常识。然而，完全理解这些功能对于优化此包的使用是有帮助的。如果您从未听说过Blade Components，那么了解它并与Material Blade包一起玩耍是一个好的开始。

包使用示例可以在这个仓库中看到。

状态

此包仍在开发中，请贡献力量使其更快发布。以下列出在此包中实现的状态为Material Design Web组件的状态。

组件

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

不支持组件

以下组件的实现默认不支持Material Design Web。

App bar: bottom
Backdrop
Bottom navigation
Date picker
Divider
Navigation rail
Sheet: bottom
Sheet: side
Time picker

安装

Material Blade可在packagist.org找到，您可以使用以下命令行通过Composer将包导入到您的Laravel项目中：

composer require sensasi-delight/material-blade

Material Blade安装到您的Laravel项目后，您必须注册到app providers中的MaterialBlade\ComponentProvider::class。

// config/app.php

'providers' => [
    // Other Service Providers

    MaterialBlade\ComponentProvider::class,
];

下一步，您必须在<head>中包含一次<x-MaterialBlade::_assets />。就是这样‼，现在您可以在view中使用Material Blade组件了🎉。您的view应如下所示。

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

贡献力量

贡献使开源社区成为一个学习、灵感和创造的地方。您所做的任何贡献都将受到高度赞赏。

如果您有改进此项目的建议，请fork仓库并创建一个pull request。您也可以简单地创建一个带有“enhancement”标签的问题。别忘了为项目加星！再次感谢！

fork项目。
创建您的功能分支（git checkout -b feature/AmazingFeature）。
提交您的更改（git commit -m 'Add some AmazingFeature'）。
将更改推送到分支（git push origin feature/AmazingFeature）。
打开pull request。

许可证

代码发布在MIT许可下。

联系方式

邮箱 - zainadam.id@gmail.com

Twitter - @sensasi_DELIGHT

sensasi-delight / material-blade

维护者

详情

README

状态

组件

不支持组件

安装

贡献力量

许可证

联系方式