eduardosaveiga/laravel-uikit-3-forms

Laravel 5 的 UIKit 3 表单构建器

dev-master 2018-09-20 18:14 UTC

This package is auto-updated.

Last update: 2024-09-21 20:23:10 UTC


README

这是一个用于在 Laravel 5 中创建 UIKit 3 风格表单元素的包。

特性

  • 标签
  • 错误信息
  • UIKit 3 标记和类(包括状态、颜色和大小)
  • 错误验证消息
  • 表单填写(使用模型实例、数组或在表单提交后发生验证错误时)
  • 国际化
  • 使用 PHP 连接方法添加参数
  • 无依赖(无 Laravel Collective 依赖)

介绍

之前

<div class="uk-margin">
    <label class="uk-form-label" for="username">Username</label>
    <input type="text" class="uk-input @if ($errors->has('username')) uk-form-danger @endif " id="username" value="{{ old('username', $username) }}">
    @if ($errors->has('username'))
		<span class="uk-label uk-label-danger">
			<small>{{ $errors->first('username') }}
		</div>
    @endif
</div>

之后

Form::text('username', 'Username')

安装

使用 Composer 安装包。

composer require eduardosaveiga/laravel-uikit-3-forms

Laravel 5.5 或更高版本

如果您正在使用 Laravel 5.5,自动发现功能将为您完成所有工作,您的工作就完成了,您现在就可以开始使用了。否则,请按照以下步骤进行安装。

Laravel 5.4

将服务提供者添加到您的 config/app.php 文件中

'providers' => [
    //...
	EduardoVeiga\Uikit3Forms\Uikit3FormsServiceProvider::class,
],

将 BootForm 门面添加到 config/app.php 中的 aliases 数组

'aliases' => [
    //...
    'Form' => EduardoVeiga\Uikit3Forms\Uikit3FormsFacade::class,
],

用法

基本表单控件

打开和关闭表单

// Opening a form using POST method

{!! Form::open() !!}
// ... Form components here
{!! Form::close() !!}

打开表单将自动为您添加 _token 字段

基本输入

文本输入

// Example
{!! Form::text('name', 'User name') !!}
文本域
// Example
{!! Form::textarea('description', 'Description') !!}
选择框
// Example
{!! Form::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield']) !!}
复选框
// Example
{!! Form::checkbox('orange', 'Orange') !!}
单选按钮
// Example
{!! Form::radio('orange', 'Orange') !!}
范围
// Example
{!! Form::range('like', 'Like', '2', '0', '20', '1') !!}
隐藏
// Example
{!! Form::hidden('user_id') !!}
锚点
// Example
{!! Form::anchor("Link via parameter", 'foo/bar') !!}
按钮
提交
// Example
{!! Form::submit("Send form") !!}
按钮
// Example
{!! Form::button("Do something") !!}
重置
// Example
{!! Form::reset("Clear form") !!}

链式方法

本包使用 链式调用 功能,允许轻松传递更多参数。

填写表单

// Examples

// With initial data using a Model instance
$user = User::find(1);
{!! Form::open()->fill($user) !!}

// With initial array data
$user = ['name' => 'Jesus', 'age' => 33];
{!! Form::open()->fill($user) !!}

URL

在锚点和表单打开中使用

// Example
{!! Form::anchor("Link via url")->url('foo/bar') !!}

路由

在锚点和表单打开中使用

// Example
{!! Form::anchor("Link via route")->route('home') !!}

选中

设置复选框/单选按钮的选中状态

// Examples

// Using readonly field
{!! Form::checkbox('agree', 'I agree')->checked() !!}

// You can use FALSE to turn off checked status
{!! Form::checkbox('agree', 'I agree')->checked(false) !!}

内联

设置复选框/单选按钮的选中状态

// Examples
{!! Form::radio('orange', 'Orange')->inline() !!}

{!! Form::checkbox('orange', 'Orange')->inline() !!}

占位符

// Example
{!! Form::text('name', 'Name')->placeholder('Input placeholder') !!}

多选

// Example
{!! Form::select('city', 'Choose your city', [1 => 'Gotham City', 2 => 'Springfield'])->multiple() !!}

区域设置

使用区域设置,该包将查找 resources/lang/{CURRENT_LANG}/forms/user.php 语言文件,并使用标签和帮助文本作为替换文本的键

// Example
{!! Form::open()->locale('forms.user') !!}

{!! Form::text('name', 'labels.name') !!}

帮助文本

// Examples

// Conventional way
{!! Form::text('name', 'Name')->help('Help text here') !!}

// Using locale
{!! Form::text('name', 'Name')->help('help.text') !!}

自定义属性

// Example
{!! Form::text('name', 'Name')->attrs(['data-foo' => 'bar', 'rel'=> 'baz']) !!}

只读

// Examples

// Using readonly field
{!! Form::text('name', 'Name')->readonly() !!}

// You can use FALSE to turn off readonly status
{!! Form::text('name', 'Name')->readonly(false) !!}

禁用

// Examples

// Disabling a field
{!! Form::text('name', 'Name')->disabled() !!}

// You can use FALSE to turn off disabled status
{!! Form::text('name', 'Name')->disabled(false) !!}

完整

// Examples

// Field and button at full size
{!! Form::text('name', 'Name')->full() !!}

{!! Form::button('name')->full() !!}

// You can use FALSE to turn off block status
{!! Form::text('name', 'Name')->full(false) !!}

图标

// Examples

{!! Form::text('email', 'Email')->icon('mail') !!}

{!! Form::button('send')->icon('check', true) !!}

标识符

// Example
{!! Form::text('name', 'Name')->id('user-name') !!}

标识符前缀

所有标识符都将使用此前缀开头,例如:prefix-myid

// Example
{!!Form::open()->prefix('register')!!}

多部分

// Examples
{!! Form::open()->multipart() !!}

// You can use FALSE to turn off multipart
{!! Form::open()->multipart(false) !!}

方法

// Examples
{!! Form::open()->method('get') !!}
{!! Form::open()->method('post') !!}
{!! Form::open()->method('put') !!}
{!! Form::open()->method('patch') !!}
{!! Form::open()->method('delete') !!}

颜色

// Examples
{!! Form::button("Do something")->color('primary') !!}

{!! Form::button("Do something")->color('secondary') !!}

大小

// Examples
{!! Form::button("Do something")->size('small') !!}

{!! Form::button("Do something")->size('large') !!}

类型

// Examples

// Password field
{!! Form::text('password', 'Your password')->type('password') !!}

// Number field
{!! Form::text('age', 'Your age')->type('number') !!}

// Email field
{!! Form::text('email', 'Your email')->type('email') !!}

名称

// Examples
{!! Form::text('text')->name('name') !!}

标签

// Examples
{!! Form::text('age')->label('Your age') !!}

默认值

// Example
{!! Form::text('name', 'Your name')->value('Maria') !!}

渲染

// Examples

// Number field
{!! Form::render('text')->name('age')->label('Your age') !!}