laravolt/semantic-form

语义UI表单助手

v4.0.2 2020-02-17 01:18 UTC

README

SensioLabsInsight Travis Coverage Status

为Laravel提供的Semantic UI表单构建器。

安装

$ composer require laravolt/semantic-form

API

注意:您可以使用外观 Form::method() 或助手 form()->method()

打开表单

Form::open('search'); // action="search"
Form::open()->get();
Form::open()->post();
Form::open()->put();
Form::open()->patch();
Form::open()->delete();
Form::open(); // default to method="GET"
Form::open()->action('search');
Form::open()->url('search'); // alias for action()
Form::open()->route('route.name');
Form::open()->post()->action(route('comment.store'));

打开表单(简短语法,自1.10起)

Form::open('search'); // action="search" method=POST
Form::get('search'); // action="search" method=GET
Form::post('search'); // action="search" method=POST
Form::put('search'); // action="search" method=POST _method=PUT
Form::patch('search'); // action="search" method=POST _method=PATCH
Form::delete('search'); // action="search" method=POST _method=DELETE

CSRF令牌

如果当前表单方法为 POST,CSRF令牌将自动生成。为了防止生成令牌,您可以在打开表单时调用 withoutToken()

Form::post('search')->withoutToken();

文本

Form::text($name, $value)->label('Username');

数字

Form::number($name, $integerValue)->label('Total');

货币

Form::rupiah($name, $defaultValue = null)->label('Price');

日期

Form::date($name, $value)->label('Birthday');

时间

Form::time($name, $value)->label('Start Time');

密码

Form::password($name)->label('Password');

电子邮件

Form::email($name, $value)->label('Email Address');

文本区域

Form::textarea($name, $value)->label('Note');

下拉框

Form::select($name, $options)->label('Choose Country');
Form::select($name, $options, $selected)->label('Choose Country');
Form::select($name, $options)->placeholder('--Select--');
Form::select($name, $options)->appendOption($key, $label);
Form::select($name, $options)->prependOption($key, $label);

选择日期 & 选择日期时间

Form::selectDate('myDate', $startYear, $endYear)->label('Birth Date');
Form::selectDateTime('myDate', $startYear, $endYear, $intervalInMinute)->label('Schedule');

默认情况下,selectDate和selectDateTime将请求以 _myDate 的格式发送,例如 ['date'=>4, 'month'=>5, 'year'=>2016]。要获取 2016-5-4 格式,您需要注册中间件并在路由中使用它。

protected $routeMiddleware = [
    'selectdate' => \Laravolt\SemanticForm\Middleware\SelectDateMiddleware::class,
    'selectdatetime' => \Laravolt\SemanticForm\Middleware\SelectDateTimeMiddleware::class
];
Route::post('myForm', ['middleware' => ['web', 'selectdate:myDate'], function (\Illuminate\Http\Request $request) {
	dd($request->input('myDate')); // Will output 2016-5-4
}]);

选择范围

Form::selectRange($name, $begin, $end)->label('Number of child');

选择月份

Form::selectMonth($name, $format = '%B')->label('Month');

单选按钮

$checked = true;
Form::radio($name, $value, $checked)->label('Item Label');

单选按钮组

$values = ['apple' => 'Apple', 'banana' => 'Banana'];
$checkedValue = 'banana';
Form::radioGroup($name, $values, $checkedValue)->label('Select Fruit');

复选框

Form::checkbox($name, $value, $checked)->label('Remember Me');

复选框组

$values = ['apple' => 'Apple', 'banana' => 'Banana'];
$checkedValue = 'banana';
Form::checkboxGroup($name, $values, $checkedValue)->label('Select Fruit');

文件

Form::file($name);

输入包装器

Form::input($name, $defaultvalue);
Form::input($name, $defaultvalue)->appendIcon('search');
Form::input($name, $defaultvalue)->prependIcon('users');
Form::input($name, $defaultvalue)->appendLabel($label);
Form::input($name, $defaultvalue)->prependLabel($label);
Form::input($name, $defaultvalue)->type("password");

参考: https://semantic-ui.com.cn/elements/input.html

日期选择器

Form::datepicker($name, $value, $format);

// Valid $format are:
// DD -> two digit date
// MM -> two digit month number
// MMMM -> month name (localized)
// YY -> two digit year
// YYYY -> full year

// To convert localized format to standard (SQL) datetime format, you can use Jenssegers\Date\Date library (already included):
// Jenssegers\Date\Date::createFromFormat('d F Y', '12 februari 2000')->startOfDay()->toDateTimeString();
// Jenssegers\Date\Date::createFromFormat('d F Y', '12 februari 2000')->startOfDay()->toDateString();

时间选择器

Form::timepicker($name, $value);

隐藏

Form::hidden($name, $value);

按钮

Form::button($value);

提交

Form::submit($value);

模型绑定

版本 1

{!! Form::bind($model) !!}

版本 2

// as parameter for method open()
{!! Form::open($route, $model) !!}

// or chaining it
{!! Form::bind($model)->get($route) !!}

警告

// This is OK in version 1, but will produce error in version 2
{!! Form::bind($model) !!}

宏定义,可以在应用程序的任何位置放置它,例如AppServiceProvider

Form::macro('trix', function ($id, $name, $value = null) {
    return sprintf(
        "%s %s", 
        Form::hidden($name, $defaultValue)->id($id), 
        "<trix-editor input='{$id}'></trix-editor>"
    );
});

然后像调用任何其他方法一样调用它

Form::trix('contentId', 'content', '<b>some content</b>');

操作

// Method 1

Form::action(Form::submit('Save'), Form::button('cancel'));

// Method 2

// Assumed you already define some macros:
Form::macro('submit', function(){
    return form()->submit('Submit');
});

Form::macro('cancel', function(){
    return form()->button('Cancel');
});

// Then you can just call macro name as string
Form::action('submit', 'cancel');

// Method 3

// Even further, you can define macro thats just wrap several buttons:
SemanticForm::macro('default', function(){
    return new \Laravolt\SemanticForm\Elements\Wrapper(form()->submit('Submit'), form()->submit('Submit'));
});

// And then make the call simplier:
Form::action('default');

通用函数

对于每个表单元素,您都可以调用以下方法并链式调用

  • id($string)
  • addClass($string)
  • removeClass($string)
  • attribute($name, $value)
  • data($name, $value)
  • hint($text)(自1.10.0起)
  • hint($text, $class = "hint")(自1.10.2起)

全局覆盖提示类(自1.10.2起)

// Put this on every request, e.g. in AppServiceProvider
Laravolt\SemanticForm\Elements\Hint::$defaultClass = 'custom-class';

示例

Form::text($name, $value)->label('Username')->id('username')->addClass('foo');
Form::text($name, $value)->label('Username')->data('url', 'http://id-laravel.com');
Form::password($name, $value)->label('Password')->hint('Minimum 6 characters');
Form::password($name, $value)->label('Password')->hint('Minimum 6 characters', 'my-custom-css-class');

中间件

  • \Laravolt\SemanticForm\Middleware\SelectDateMiddleware
  • \Laravolt\SemanticForm\Middleware\SelectDateTimeMiddleware

鸣谢

SemanticForm受AdamWathan\Form的启发。