README

Laravel ignite是一个包，为开发者提供了丰富的Web UI组件，这些组件与浏览器无关，并且可以完全定制，以帮助开发者交付具有一致视觉设计的时尚应用程序。

再次从头开始构建HTML表单吧，因为ignite会为你处理这件事。

特性

完全CSS样式的可定制组件。
内置CSRF字段。
内置对PUT、PATCH或DELETE请求的欺骗处理。
开箱即用的Laravel验证支持。
自定义选择字段。
自定义单选/复选框字段。
自定义字段，如日期选择和可搜索的下拉菜单（独立包）

在底层，Laravel ignite使用Alpinejs和Tailwind CSS。

安装

您可以通过Composer安装此包。

composer require pnx/laravel-ignite

该包应该由Laravel自动发现。

如果情况不是这样，您需要在config/app.php中的providers数组中手动添加ServiceProvider。

'providers' => [

    ...

    /*
     * Package Service Providers...
     */
    Ignite\ServiceProvider::class,

    ...
],

配置

如果默认设置不够，Ignite可以按照您想要的方式进行配置。

要发布配置文件config/ignite.php，运行以下命令：

php artisan vendor:publish --tag=ignite-config

如果您想修改视图脚本，可以使用以下命令将它们发布到resources/views/vendor/ignite：

php artisan vendor:publish --tag=ignite-views

组件属性

所有标准输入属性当然都适用于Ignite组件。

然而，以下描述的一些属性的行为已经改变

name

此属性是必需的

id

如果缺少id属性，组件将使用name作为id

value

传递给组件的值通过Laravel的old() 视图助手函数传递。

因此，如果请求中存在旧值，组件将使用旧值；否则，将使用用户提供的默认值。

disabled

这是一个布尔变量，当为true时，将渲染带有disabled="disabled"的HTML输入字段。

组件

此包为开发者提供了大量预写的视图组件

表单

<x-ignite-form method="DELETE" action="/some/url">
    ...
</x-ignite-form>

属性

method - 提交表单时使用的HTTP方法，有效的值有GET、POST、HEAD、PUT、DELETE，默认为POST

输入

生成一个输入元素

<x-ignite-input name="username" class="px-4 py-2"/>

<x-ignite-input type="password" name="password" class="px-4 py-2"/>

属性

type：输入元素的类型，默认为text

密码输入

<x-ignite-input>的快捷方式，带有type="password"

<x-ignite-password name="password" placeholder="Password" class="px-4 py-2" />

电子邮件输入

<x-ignite-input>的快捷方式，带有type="email"

<x-ignite-email name="email" placeholder="Email address" class="px-4 py-2" />

选择

生成一个简单的选择下拉元素

<x-ignite-select name="fruit" :options="[ 'Apple', 'Pear', 'Lemon' ]" class="px-4 py-2" />

关联数组

<x-ignite-select name="role" :options="['admin' => 'Admin', 'writer' => 'Writer', 'guest' => 'Guest']" class="px-4 py-2" />

属性

options：要在选择下拉菜单中显示的选项数组。数组键用作提交时字段的value，数组值在下拉菜单中显示。

文本区域

<x-ignite-textarea name="message" class="px-4 py-2" />

复选框

生成一个复选框元素

<x-ignite-checkbox name="user_banned" class="px-4 py-2" />

注意：提交的值是 "true" 或 "false" 字符串。

单选按钮

生成一组一个或多个单选按钮。

<x-ignite-radio name="fruit" :options="[ 'Apple', 'Pear', 'Lemon' ]" class="px-4 py-2" />

属性

options：选项数组，每个选项将渲染一个单独的单选按钮。 数组键 用作提交字段时的值，数组值 将显示在单选按钮旁边。

开关

与复选框相同，但以开关形式呈现，而不是方框。

<x-ignite-toggle-switch name="user_banned" class="px-4 py-2" />

作者

Henrik Hautakoski - henrik.hautakoski@gmail.com

pnx / laravel-ignite

维护者

详情