README

此包扩展了 Laravel Collective 并添加了一个新方法，以帮助构建 Bootstrap 4 输入。

Laravel 5+

{{ Form::bs('first_name') }}

Laravel 7

Laravel 的新 组件标记 得到支持。

<x-form-bs name="first_name"/>

生成的 DOM

<div class="form-group">
    <label for="first_name">First Name</label>
    <input type="text" class="form-control" id="first_name">
</div>

用法

属性和选项

可以使用属性或通过“选项”数组配置 HTML 输入。

属性

混合

以下属性可以是布尔值或字符串： label 和 placeholder

如果将 false 设置为值，则 label 或 placeholder 将被禁用/不显示。

<x-form-bs name="first_name" label="Your First Name"/>

<x-form-bs name="first_name" :label="false"/>

布尔值

以下属性可以是布尔值：checked、placeholder、selected 和 required

<x-form-bs name="terms_of_service" type="checkbox" checked label="I agree to the Terms of Service"/>

当 placeholder 选项用作布尔值时，将尝试智能地创建一个占位符。

选项

或者，如果您发现使用大量选项的大数组更容易，这也是可以的

<x-form-bs name="email" type="email" :options="['label' => 'Your Email', 'required']"/>

简写选项

一些选项可以作为值传递，以使其设置更加简单。这些包括：required、livewire、checked、wireLazy、wireDefer

以下生成相同的 DOM

<x-form-bs name="first_name" required/>

<x-form-bs name="first_name" :options="['required']"/>

<x-form-bs name="first_name" :options="['required' => true]"/>

{{ Form::bs('first_name', 'text', ['required']) }}

{{ Form::bs('first_name', 'text', ['required' => true]) }}

点语法

点语法将根据需要自动转换。

<x-form-bs name="user.first_name"/>

<x-form-bs name="user[first_name]"/>

这两个都将创建相同的 DOM。

<div class="form-group">
    <label for="user[first_name]">First Name</label>
    <input type="text" class="form-control" id="user-first_name" name="user[first_name]">
</div>

字段类型

支持所有字段类型，而不仅仅是以下列表。

文本

如果没有指定 type，则默认使用文本。

电子邮件

如果 name 属性是 email，则将自动使用电子邮件输入类型。

<x-form-bs name="email"/>

生成

<div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" name="email">
</div>

选择

注意以下示例中 type 没有设置。它将自动确定，因为已设置 select_options。

<x-form-bs name="timezone" :select_options="$timezones" required placeholder/>

所见即所得编辑器

如果将类型设置为 html，则输入将转换为 Summernote 编辑器。

<x-form-bs name="description" type="html"/>

需要将 height 选项输入为整数。

Markdown 编辑器

如果将类型设置为 markdown，则输入将转换为 SimpleMDE 编辑器。

<x-form-bs name="description" type="markdown"/>

文件

如果类型是 file，则输入将转换为 bs-custom-file-input。

生成的 DOM 将是 Bootstrap 的标记。

日期时间

日期时间选择器使用 tempusdominus/bootstrap-4，并假设您已加载 FontAwesome 5。

表单组

移除

可以移除包装 div。

<x-form-bs name="first_name" :form-group="false"/>

类

向包装 div 添加一个类。请确保包括 Bootstrap 的默认值。

<x-form-bs name="first_name" group-class="form-group custom-class"/>

标签

自动

<x-form-bs name="role_id"/>
...
<div class="form-group">
    <label for="role_id">Role</label>
    <input type="text" class="form-control" id="role_id" name="role_id">
</div>

或

<x-form-bs name="user[first_name]"/>
...
<div class="form-group">
    <label for="user-first_name">User First Name</label>
    <input type="text" class="form-control" id="user-first_name" name="user[first_name]">
</div>

如果您想指定标签，也可以。

<x-form-bs name="role_id" label="Pick a role"/>
...
<div class="form-group">
    <label for="role_id">Pick a role</label>
    <input type="text" class="form-control" id="role_id" name="role_id">
</div>

此包将自动生成一个可读的 <label> 或您可以设置自己的。

移除

可以移除标签。

<x-form-bs name="first_name" :label="false"/>

类

向标签添加一个类。

<x-form-bs name="first_name" label-class="custom-class"/>

辅助

使用 helper 属性在输入下方添加输入帮助块。

<x-form-bs name="first_name" helper="Please enter your first name.">

可选第二个参数

如果使用 Form 类，第二个参数是可选的。

{{ Form::bs('first_name', ['required']) }}

{{ Form::bs('first_name', 'text', ['required']) }}

黄昏

Dusk 选择器 默认在任何非 production 环境中启用。这可以在 config/form.php 中更改。

插槽

因为每个参数也可以是一个插槽，如果你需要将 DOM 传递给组件的某一部分，可以使用 Blade 插槽。

<x-form-bs name="tos" type="checkbox">
    <x-slot name="label">
        I agree to the <a href="#" x-on:click.prevent="openModal('cancellationTermsModal')">cancellation terms</a>
    </x-slot>
</x-form-bs>

此软件包提供两个 Blade 插槽，用于在输入前后注入 DOM。

之前

<x-form-bs name="first_name">
    <x-slot name="before">
        <p>Please enter your full first name.</p>
    </x-slot>
</x-form-bs>

将生成

<div class="form-group">
    <p>Please enter your full first name.</p>
    <label for="first_name">First Name</label>
    <input type="text" class="form-control" id="first_name" name="first_name">
</div>

之后

<x-form-bs name="last_name">
    <x-slot name="after">
        <p>Please enter your full last name.</p>
    </x-slot>
</x-form-bs>

将生成

<div class="form-group">
    <label for="last_name">Last Name</label>
    <input type="text" class="form-control" id="last_name" name="last_name">
    <p>Please enter your full last name.</p>
</div>

资产

如果你使用 markdown、html、file 或 datetime 类型，你需要在布局中包含以下堆栈。

    ...
    @stack('after-styles')
</head>
<body>
    ...
    @stack('after-scripts')
</body>

这些插槽的名称可以作为此软件包的一部分进行配置。由于 Laravel Blade/View 缓存的工作方式，如果你更改这些配置参数，你需要运行 php artisan view:clear。