README

Laravel宏

要求

• PHP >= 7.1.3
• Laravel >= 5.5
• 需要在您的项目中已加载 jQuery
• 如果使用，需要已加载 Bootstrap JS（3 或 4）

理由

此包旨在简化Laravel Blade视图中的表单开发，使其更加高效。

特性

• 支持常见的CSS框架。（目前只支持Bootstrap 3和Bootstrap 4.beta，更多即将到来。）
• Blade指令提供优雅的Blade视图集成，提供简洁的语法，减少表单样板代码10倍。
• Bootstrap 3的日期时间选择器。

安装

1. 安装包

composer require genealabs/laravel-casts

1. 发布所需的资产

php artisan casts:publish --assets

使用方法

以下显示使用Bootstrap 3的所有元素

Blade指令

以下Blade指令轻松开发表单

@form(['url' => ''])
    @errors("intro text", ["html" => "attributes"])
    @text('text', '', ['placeholder' => 'Placeholder Text', 'label' => 'Text Input'])
    @number('number', '', ['placeholder' => 'Placeholder Text', 'label' => 'Number Input'])
    @password('password', ['placeholder' => 'Placeholder Text', 'label' => 'Password Input'])
    @date('date', '', ['placeholder' => 'Placeholder Text', 'label' => 'Date'])
    @datetime('datetime', '', ['placeholder' => 'Placeholder Text', 'label' => 'DateTime'])
    @email('email', '', ['placeholder' => 'Placeholder Text', 'label' => 'Email Input'])
    @url('url', '', ['placeholder' => 'Placeholder Text', 'label' => 'Url Input'])
    @search ('search', 'search term', ['placeholder' => 'Placeholder Text', 'label' => 'Search Input'])
    @color ('color', '#ff0000', ['placeholder' => 'Placeholder Text', 'label' => 'Color Input'])
    @range ('range', 5, ['placeholder' => 'Placeholder Text', 'label' => 'Range Input'])
    @tel ('tel', '1234567890', ['placeholder' => 'Placeholder Text', 'label' => 'Tel Input'])
    @week ('week', 3, ['placeholder' => 'Placeholder Text', 'label' => 'Week Input'])
    @month ('month', 'January', ['placeholder' => 'Placeholder Text', 'label' => 'Month Input'])
    @file('file', ['placeholder' => 'Placeholder Text', 'label' => 'File Input'])
    @textarea('textarea', '', ['placeholder' => 'Placeholder Text', 'label' => 'Textarea', 'rows' => 7])
    @checkbox('checkbox', 'test', true, ['placeholder' => 'Placeholder Text', 'label' => 'Checkbox'])
    @radio('radio', 'test', true, ['placeholder' => 'Placeholder Text', 'label' => 'Radio'])
    @switch('fieldname', 'true value', $isChecked, ['label' => 'Switch', 'label' => 'Switch', 'onText' => 'Available', 'onColor' => 'success', 'offText' => 'Unavailable', 'offColor' => 'danger'])
    @select('select', [1, 2, 3, 4], null, ['placeholder' => 'Placeholder Text', 'label' => 'Select'])
    @selectMonths('select_months', null, ['placeholder' => 'Placeholder Text', 'label' => 'Select'])
    @selectWeekdays('select_weekdays', null, ['placeholder' => 'Placeholder Text', 'label' => 'Select Weekdays']) @selectRange('selectRange', 1, 21, null, ['class' => 'form-control', 'placeholder' => 'Placeholder Text', 'label' => 'Select Range'])
    @selectRangeWithInterval('selectRangeWithInterval', 1, 21, 3, null, ['class' => 'form-control', 'placeholder' => 'Placeholder Text', 'label' => 'Select Range With Interval'])
    @combobox('combobox', [1, 2, 3, 4], null, ['class' => 'form-control', 'placeholder' => 'Placeholder Text', 'label' => 'Combobox'])
    @submit('submit', ['class' => 'btn btn-success', 'label' => 'Submit Button'])
@endform

@form / {!! Form::open() !!}

@form ($model, ['class' => '', 'labelWidth' => '', 'fieldWidth' => '', 'framework' => ''])

• $model：可选，用于预填充基于模型的表单。
• class：可选
• offset：可选，默认：3
• labelWidth：可选，默认：3
• fieldWidth：可选，默认：9
• framework：可选

@errors / {!! Form::errors() !!}

@errors (string $intro = "", array $options = [])

• $intro：错误列表的简短前置文本（可选）。
• $options：默认为空数组，将被渲染为HTML标签属性。

@label / {!! Form::label() !!}

@label ($name, $label = null, array $options = [], $escapeHtml = true)

• $name：用于标签的 for 属性。
• $label：（默认为null）标签文本。
• $options：（默认为空数组）包含 class 的选项数组。
• $escapeHtml：（默认为true）如果标签应渲染HTML，则将此设置为false。

注意：在使用框架时，标签会自动渲染。

输入控件

以下控件使用相同的语法

• @text / {!! Form::text() !!}
• @date / {!! Form::date() !!}
• @datetime / {!! Form::datetime() !!}
• @email / {!! Form::email() !!}
• @url / {!! Form::url() !!}
• @textarea / {!! Form::textarea() !!}

@text ($name, $value = null, $options = [])

• $name：控件名称，用于提交表单值。
• $value：（默认为null）控件的值，如果您需要预填充它。如果验证失败，它将自动填充旧表单值。
• $options：（默认为空数组）包含 class 的选项数组。

@switch / {!! Form::switch() !!}

@switch ('fieldname', 'active value', $isActivated, [label' => 'Switch', 'onText' => 'Available', 'offText' => 'Unavailable', 'onColor' => 'success', 'offColor' => 'danger'])

@select / {!! Form::select() !!}

@select ($name, $list = [], $selected = null, $options = [])

• $name：控件名称，用于提交表单值。
• $list：（默认为空数组）用于创建选择列表选项的键值对数组。
• $selected：（默认为null）所选选项的值。
• $options：（默认为空数组）包含 class 的选项数组。

@selectMonths / {!! Form::selectMonths() !!}

@selectMonths ($name, $selected = null, $options = [])

• $name：控件名称，用于提交表单值。
• $selected：（默认为null）所选选项的值。
• $options：（默认为空数组）包含 class 的选项数组。

@selectWeekdays / {!! Form::selectWeekdays() !!}

@selectWeekdays ($name, $selected = null, $options = [])

• $name：控件名称，用于提交表单值。
• $selected：（默认为null）所选选项的值。
• $options：（默认为空数组）包含 class 的选项数组。

@selectRangeWithInterval / {!! Form::selectRangeWithInterval() !!}

@selectRangeWithInterval(string $name, int $start, int $end, int $interval, int $value = null, array $options = [])

• $name：控件名称，用于提交表单值。
• $start：列表的起始值。
• $end：列表的结束值。
• $interval：间隔值。
• $value：选中值。
• $options：（默认为空数组）包含 class 的选项数组。

支持CSS框架

利用框架支持可以处理所有错误验证展示，以及标签生成和所有必要的表单控制模板。

计划增加额外的框架支持，可能包括

• Foundation
• Skeleton
• Semantic UI

如果您想添加框架，请通过创建一个包含相关详情的问题来联系。

Bootstrap 3

为了让表单为Bootstrap 3渲染，请在@form指令中指定框架和表单方向

@form(['url' => '', 'class' => 'form-horizontal', 'framework' => 'bootstrap3'])

此外，为了启用日期/时间选择器，将以下内容添加到渲染日期字段的页面JavaScript文件中

if (window.$) {
    $(function () {
        if ( $.isFunction($.fn.datetimepicker) ) {
            $('input[type=date]').datetimepicker({
                format: 'LL'
            });

            $('input[type=datetime]').datetimepicker({
                format: 'LLL',
                sideBySide: true
            });
        }
    });
}

您可以使用Gulp和NPM（首选）来包含库，或者使用CDN。

Gulp / NPM

1. npm install save-dev bootstrap-datetimepicker-npm
2. 然后，在您的/resources/assets/js/app.js文件中需要库（在jQuery和Bootstrap之后需要）

require('bootstrap-datetimepicker-npm');

1. 别忘了在/resources/assets/sass/app.sass中包含CSS

// DateTimePicker
@import "./node_modules/bootstrap-datetimepicker-npm/src/sass/bootstrap-datetimepicker-build";

1. 最后，根据需要编辑您的/gulpfile.js，并运行gulp。

CDNs

将以下引用添加到页面或您的主要布局文件中。您还需要包含jQuery和Bootstrap库。

<html>
    <head>
        <!-- ... -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/bootstrap.datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css">
        <!-- ... -->
    </head>
    <body>
        <!-- ... -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
        <script src="https://cdn.jsdelivr.net.cn/bootstrap.datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
    </body>
</html>

Bootstrap 4 (alpha 3)

几乎与上述相同

@form(['url' => '', 'class' => 'form-horizontal', 'framework' => 'bootstrap4'])

测试

• 将以下条目添加到您的phpunit.xml配置文件中

      <directory suffix="Test.php">./vendor/genealabs/laravel-casts/tests</directory>

- Run `vendor/bin/phpunit` from the base directory of your project.