README

一组使用 Tailwind CSS 和 AlpineJS 构建、可主题化的组件，用于与 Laravel Blade 一起使用。

此项目仍处于测试阶段，一些 API 可能会更改。

安装

composer require moonbaselabs/blade-components

通过 Artisan 进行设置

此命令将覆盖资产文件。 建议在可选安装 Laravel Breeze 后，在新的 Laravel 项目中运行此命令。如果您在现有项目中安装此包，请使用下面的手动设置步骤。

php artisan blade-components:install

手动设置

发布组件配置文件

php artisan vendor:publish --tag=blade-components

将配置文件添加到 Tailwind 配置中的 purge 数组

// tailwind.config.js

purge: [
    './config/blade-components.php'
],

在加载 AlpineJS 之前包含 AlpineJS 组件

// resources/js/app.js

import './blade-components'
import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()

设置完成！您可以在 config/blade-components.php 中自定义组件主题。

徽章

渲染一个带颜色的徽章。使用 theme 属性来自定义外观和感觉

<x-badge theme="indigo">Badge</x-badge>

输出

<span class="...">Badge</span>

按钮

渲染一个表单按钮

<x-button>Button</x-button>

输出

<button class="...">Button</x-button>

当设置 href 属性时，此组件将渲染为链接

<x-button href="https://moonbaselabs.com">More Info</x-button>

输出

<a href="https://moonbaselabs.com" class="...">More Info</a>

复选框

渲染一个表单复选框

<x-checkbox name="remember_me" />

输出

<input type="checkbox" name="remember_me" id="remember_me" class="..." />

复选框将在验证错误后保持其 checked 值。如果此字段包含错误，其类属性将被设置为配置文件中指定给 invalid 键的 CSS 类。

描述

渲染用于与标签一起使用的表单字段描述文本

<x-description for="password">Must be at least 8 characters.</x-description>
<x-description for="password" value="Must be at least 8 characters." />

输出

<div id="password_description" class="...">Must be at least 8 characters.</div>
<div id="password_description" class="...">Must be at least 8 characters.</div>

为了使表单字段可访问，您应向相应的表单元素添加 aria-describedby="FIELD_NAME_description"，例如：<input type="password" aria-describedby="password_description">

错误

当字段在服务器端验证失败时渲染错误消息

<x-error for="password" />

输出

<!-- When password is invalid -->
<div id="password_error" class="...">The password field is required.</div>

您可以使用 value 属性或设置文本内容来覆盖服务器端验证消息

<x-error for="password" value="That's a bad password" />
<x-error for="password">That's a bad password</x-error>

使用 bag 属性从特定的错误包中提取错误

<x-error for="password" bag="login" />

字段

渲染一个用于分组表单元素的简单容器

<x-field>
    <x-label ...>
    <x-description ...>
    <x-error ...>
    <x-input ...>
</x-field>

输出

<div class="...">
    <label ...>
    <div ...>
    <div ...>
    <input ...>
</div>

表单

渲染一个具有适当方法和 CSRF 指令的表单元素

<x-form action="https://moonbaselabs.com">
    ...
</x-form>

输出

<form method="post" action="https://moonbaselabs.com">
    <input type="hidden" name="_token" value="...">
    <input type="hidden" name="_method" value="post">
    ...
</form>

添加 has-files 属性以支持文件上传

<x-form has-files method="put" action="https://moonbaselabs.com">
    ...
</x-form>

输出

<x-form method="put" action="https://moonbaselabs.com" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="...">
    <input type="hidden" name="_method" value="put">
    ...
</x-form>

输入框

文档即将推出。

说明

文档即将推出。

菜单

文档即将推出。

菜单项

文档即将推出。

单选按钮

文档即将推出。

选择框

文档即将推出。

文本区域

文档即将推出。

moonbaselabs / blade-components

维护者

详细信息

README

安装

通过 Artisan 进行设置

手动设置

组件

徽章

按钮

复选框

描述

错误

字段

表单

输入框

标签

说明

菜单

菜单项

单选按钮

选择框

文本区域