inkvizytor/fluentform

Laravel 表单构建器

维护者

详情

github.com/inkvizytor/FluentForm

源代码

问题

安装量: 13,669

依赖项: 0

建议者: 0

安全: 0

星标: 33

关注者: 7

分支: 16

公开问题: 0

2.0.7 2022-03-14 10:00 UTC

Requires

Suggests

  • barryvdh/laravel-ide-helper: Required to provide autocompletion for FluentForm facade (~2.0).
  • dragonfly/nag: Required to enable validation rules converter to Parsley or formvalidation.io data attributes.

MIT 4c3491fefb54f03c4fc1e9b19e99289120ac0812

  • Jacek Tobiasz <j.t.tobiasz.woop@gmail.com>

formbootstrapbuilderlaravelform builder

This package is auto-updated.

Last update: 2024-09-14 15:46:57 UTC

README

Laravel 6 表单构建器

此包的主要目的是提供直观的表单创建，具有代码自动完成、验证和为 Bootstrap 3 CSS 框架提供的标记。我强烈推荐使用 Laravel IDE Helper Generator 进行自动完成。

安装

使用以下命令通过 composer 安装此包

composer require inkvizytor/fluentform

将服务提供者添加到 config/app.php 中的 providers 数组

    'providers' => [
        /*
         * Laravel Framework Service Providers...
         */
        Illuminate\Foundation\Providers\ArtisanServiceProvider::class,
        Illuminate\Auth\AuthServiceProvider::class,
        Illuminate\Broadcasting\BroadcastServiceProvider::class,
        ...
        inkvizytor\FluentForm\FluentServiceProvider::class,
    ],

接下来，在 config/app.php 的末尾添加 Fluent Form 门面到 aliases 数组

    'aliases' => [
        'App'       => Illuminate\Support\Facades\App::class,
        'Artisan'   => Illuminate\Support\Facades\Artisan::class,
        ...
        'Form'      => inkvizytor\FluentForm\Facades\FluentForm::class,
        'Fluent'    => inkvizytor\FluentForm\Facades\FluentHtml::class,
    ],

并发布 fluentform.php 配置文件

php artisan vendor:publish --provider="inkvizytor\FluentForm\FluentServiceProvider"

入门

示例

UserController.php

    public function edit(User $user)
    {
        return view('admin.users.edit')
            ->with('user', $user)
            ->with('rules', $this->rules())
            ->with('timezones', config('timezones'));
    }

    private function rules()
    {
        return [
            'username'  => 'required|alpha|min:3|max:50',
            'email'     => 'required|email|max:100',
            'password'  => 'confirmed'
        ];
    }

edit.blade.php

@section('content')
    <h5>Edit user</h5>
    <br>
    {!! Form::horizontal($user)->rules($rules)->errors($errors) !!}
    {!! Form::password('dummy')->css('hide') !!}
    <div class="row">
        <div class="col-lg-4 col-md-6">
            {!! Form::group()->text('username')->label('User name') !!}
            {!! Form::group()->text('email')->label('Email address')->prepend('@') !!}
            {!! Form::group()->content('<a href="#change-password" data-toggle="collapse">Change password</a>') !!}
            <div id="change-password" class="{!! $errors->getBag('default')->has('password') ? '' : 'collapse' !!}">
                {!! Form::group()->password('password')->label('Password') !!}
                {!! Form::group()->password('password_confirmation')->label('Password confirmation') !!}
            </div>
            {!! Form::group()->checkbox('is_active')->label('Account active')->disabled($user->is_owner) !!}
            {!! Form::group()->select('timezone', $timezones)->label('Timezone')->placeholder('Default timezone') !!}
            <br>
            {!! Form::group()
                ->add(Form::submit('save', 'Save changes')->icon(Fluent::FA_DOWNLOAD)->css('btn-primary'))
                ->add(Fluent::link(action('Admin\UsersController@index'), 'Back')->icon(Fluent::FA_ARROW_LEFT))
            !!}
        </div>
    </div>
    {!! Form::close() !!}
@endsection

扩展示例

您可以通过在控制器动作中执行 Form::preview() 来预览所有控件

    public function preview()
    {
        return Form::preview();
    }

表单布局

Form::standard($model = null, $formName = 'default');
Form::horizontal($model = null, $formName = 'default');
Form::inline($model = null, $formName = 'default');
Form::open($model = null, $formName = 'default', $layout = 'standard')

表单导航

Form::standard($model)->url('users/edit', ['id' => 1]);
Form::standard($model)->route('edit_user_route_name', ['id' => 1]);
Form::standard($model)->action('UsersController@edit', ['id' => 1]);

控件

Form:: or Form::group()->

Form::group()->input($type, $name, $value = null);
Form::group()->text($name, $value = null);
Form::group()->password($name);
Form::group()->file($name);
Form::group()->email($name, $value = null)
Form::group()->url($name, $value = null)
Form::group()->number($name, $value = null)->min(1)->max(10)
Form::group()->range($name, $value = null)->min(0)->max(100)->step(5)
Form::group()->color($name, $value = null)
Form::group()->textarea($name, $value = null);
Form::group()->select($name, array $items, $selected = null);
Form::group()->checkbox($name, $value = true, $checked = null);
Form::group()->checkboxes($name, array $items, array $checked = []);
Form::group()->radios($name, array $items, $checked = null);
Form::group()->content($html);

按钮

Form::button($name, $label, $value = null);
Form::submit($name, $label, $value = null);
Form::reset($name, $label, $value = null);
Fluent::link($url, $label);

/* Buttons group */
Fluent::buttons([
    Fluent::iconlink(Fluent::FA_PENCIL, action('Admin\UsersController@edit', $user->id), 'Edit')
        ->css('btn-sm btn-primary'),
    Fluent::iconlink(Fluent::FA_REMOVE, action('Admin\UsersController@delete', $user->id), 'Delete')
        ->css('btn-sm btn-danger')
        ->data('confirm', 'Are you sure?')
])

标签页

@section('content')
    {!! Fluent::tabs()
        ->add('details', 'User details')
        ->add('security', 'Account security')
        ->add('permissions', 'Roles and permissions')
        ->active('security')
        ->open()
    !!}
        {!! Fluent::tabs()->panel('details') !!}
            ...
        {!! Fluent::tabs()->end() !!}

        {!! Fluent::tabs()->panel('security') !!}
            ...
        {!! Fluent::tabs()->end() !!}

        {!! Fluent::tabs()->panel('permissions') !!}
            ...
        {!! Fluent::tabs()->end() !!}
    {!! Fluent::tabs()->close() !!}
@endsection

面板

@section('content')
    {!! Fluent::panel()->open('Panel title')->css(['panel-primary']) !!}
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Suspendisse cursus diam nec auctor lacinia. Nam hendrerit 
        risus at condimentum egestas. 
        
    {!! Fluent::panel()->close([
        Form::submit('change', 'Change'),
        Form::button('back', 'Back')->disabled(),
    ]) !!}
@endsection

图标

图标自动完成。支持的图标集：FontAwesome，GlyphIcons。

Fluent::FA_*
Fluent::GI_*

{!! Fluent::icon(Fluent::FA_SPINNER, Fluent::FA_SPIN, Fluent::FA_5X) !!}

其他

Form::hidden($name, $value = null)
Form::radio($name, $value = true, $checked = null)

/* Form control group */
Form::group();

/* Form footer */
Form::footer([
    Fluent::link(action('Admin\UsersController@create'), 'Add user')
        ->icon(Fluent::FA_PLUS)
        ->css('btn-success')
]);

更多内容

CDN 支持

在 fluentform.php 配置文件中，您可以选择启用或禁用 Bootstrap 和其他元素的 CDN 支持。

	'cdn' => [
        'enabled' => [
            'jquery' => true,
            'jquery-validate' => true,
            'jquery-validate-unobtrusive' => true,
            'moment' => true,
            'bootstrap' => true,
            'bootstrap-filestyle' => true,
            'bootstrap-datetimepicker' => true,
            'font-awesome' => true,
            'tinymce' => true,
        ],
        'styles' => [
            'bootstrap' => '//maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/css/bootstrap.min.css',
            'bootstrap-datetimepicker' => '//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css',
            'font-awesome' => '//maxcdn.bootstrap.ac.cn/font-awesome/4.4.0/css/font-awesome.min.css',
        ],
        'scripts' => [
            'jquery' => '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js',
            'jquery-validate' => '//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js',
            'jquery-validate-unobtrusive' => '//ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js',
            'moment' => '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js',
            'bootstrap' => '//maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js',
            'bootstrap-filestyle' => '//cdn.jsdelivr.net.cn/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js',
            'bootstrap-datetimepicker' => '//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js',
            'tinymce' => '//tinymce.cachefly.net/4.2/tinymce.min.js',
        ]
    ],

然后修改您的 layout.php 文件以包含所有所需的样式和脚本。

<!DOCTYPE html>
<html>
<head>
    <title>Fluent Form</title>
    {!! Fluent::styles() !!}
</head>
<body>
<div class="container">
    ...
</div>
{!! Fluent::scripts() !!}
</body>
</html>

如果您不喜欢 CDN 的想法，可以链接到您本地的样式/脚本文件。然后，您只需在 layout.php 文件的底部包含 Fluent::scripts(false)，以初始化 JavaScript 控件，如日期/时间选择器或 TinyMCE。

<!DOCTYPE html>
<html>
<head>
    <title>Fluent Form</title>
	...
</head>
<body>
<div class="container">
    ...
</div>
{!! Fluent::scripts(false) !!}
</body>
</html>

日期时间选择器

Bootstrap 3 日期/时间选择器

Form::group()->datetime($name, $value = null);

您也可以在 fluentform.php 配置文件中更改此控件的一些默认设置。

    // Bootstrap DateTimePicker configuration
    'datetimepicker' => [
        'showClear' => true,
        'showClose' => true,
    ]

日期范围选择器

Bootstrap 的日期范围选择器

Form::group()->datetimerange($name, $value = null);

以及在 fluentform.php 配置文件中的默认设置。

    // Bootstrap DateRangePicker configuration
    'datetimerange' => [
        'format' => [
            'date' => 'YYYY-MM-DD',
            'datetime' => 'YYYY-MM-DD HH:mm:ss'
        ],
        'separator' => ' | ',
        'firstDay' => 1,
        'timePicker24Hour' => true,
        'opens' => 'center',
    ]

编辑器

此方法使用 TinyMCE 替换 textarea。

Form::group()->editor($name, $value = null);

在 fluentform.php 配置文件中，您可以更改 TinyMCE 的一些默认设置。

    // TinyMCE configuration
    'tinymce' => [
        'plugins' => [
            'advlist autolink lists link image charmap hr anchor pagebreak autoresize',
            'searchreplace wordcount visualblocks visualchars code',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'emoticons template paste textcolor colorpicker textpattern autosave'
        ],
        'toolbar1' => 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        'relative_urls' => false,
        'paste_data_images' => false,
        'browser_spellcheck' => true,
        'entity_encoding' => "raw",
        'autoresize_bottom_margin' => 0,
        'nowrap' => false,
        'resize'=> false,
    ],

本地化

向控件添加文本的方法可以使用翻译。这些方法接受与 Laravel 的 trans() 助手相同的参数。

$label = 'fluentform::preview.timezones.label';

Form::group()->text(...)->label($label, array $parameters = [], $locale = null);
Form::group()->text(...)->placeholder($label, array $parameters = [], $locale = null);
Form::group()->textarea(...)->help($label, array $parameters = [], $locale = null);
Form::group()->icon(...)->title($label, array $parameters = [], $locale = null);

验证

默认情况下，FluentForm 使用 jQuery Validation Plugin 和 jQuery Unobtrusive Validation 进行客户端验证。如果您更喜欢 Parsley 或 formvalidation.io，可以在 fluentform.php 配置文件中启用 Nag 验证规则转换器。

    // Validation
    'validation' => 'nag',
    
    'validators' => [
        'jquery' => inkvizytor\FluentForm\Validation\JQuery::class,
        'nag' => inkvizytor\FluentForm\Validation\Nag::class
    ],

自定义控件

如果您想创建自己的自定义控件，可以。首先创建一个扩展抽象 Field 类的新类。例如，TimeZone 自定义类（它扩展了 Select，但 Select 扩展了 Field）

<?php namespace inkvizytor\FluentForm\Controls\Custom;

use inkvizytor\FluentForm\Base\Handler;
use inkvizytor\FluentForm\Controls\Select;

/**
 * Class TimeZones
 * 
 * Example of custom control. Control registered in config file in section 'controls'.
 *
 * @package inkvizytor\FluentForm
 */
class TimeZones extends Select
{
    protected $items = [
        ...
    ];

    /**
     * @param \inkvizytor\FluentForm\Base\Handler $handler
     * @param string $name
     * @param string $selected
     */
    public function __construct(Handler $handler, $name, $selected = null)
    {
        parent::__construct($handler);
        
        $this->name($name);
        $this->selected($selected);
    }
    
    /**
     * @param array $items
     * @return $this
     */
    public function items(array $items)
    {
        // Do nothing. Just override select behavior.

        return $this;
    }
}

接下来，您必须在 fluentform.php 配置文件中注册它，就像 TimeZone 类一样。

    // Custom controls registration
    'controls' => [
        'timezones' => inkvizytor\FluentForm\Controls\Custom\TimeZones::class
    ],

然后通过其别名调用它

{!! Form::group()->timezones('timezones')->placeholder('Choose your timezone') !!}
// or
{!! Form::timezones('timezones')->placeholder('Choose your timezone') !!}

此魔法方法的全部参数都传递给 $handler 之后的构造函数。遗憾的是，自定义控件没有自动完成。

许可证

Fluent Form 是开源软件，许可协议为 MIT 许可。