mediactive-digital / laravel-bootstrap-4-forms
Laravel 5 的 Bootstrap 4 表单构建器
2.1.1
2019-01-31 11:20 UTC
README
这是一个用于在 Laravel 5 中创建 Bootstrap 4 样式的表单元素的包。
功能
- 标签
- 错误信息
- Bootstrap 4 标记和类(包括状态、颜色和大小)
- 错误验证信息
- 表单填充(使用模型实例、数组或在提交表单后发生验证错误时)
- 国际化
- 使用 PHP 链式方法添加参数
- 无依赖(无 Laravel Collective 依赖)
简介
之前
<div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control @if($errors->has('username')) is-invalid @endif " id="username" value="{{old('username', $username)}}"> @if($errors->has('username')) <div class="invalid-feedback"> {{$errors->first('username')}} </div> @endif </div>
之后
Form::text('username', 'Username')
安装
使用 Composer 需求此包。
composer require mediactive-digital/laravel-bootstrap-4-forms
Laravel 5.5 或更高版本
如果您正在使用 Laravel 5.5,自动发现功能将为您完成一切,您的工作就完成了,现在就可以开始使用了。否则,请按照以下步骤进行安装。
Laravel 5.4
将服务提供者添加到您的 config/app.php 文件中
'providers' => [ //... NetoJose\Bootstrap4Forms\Bootstrap4FormsServiceProvider::class, ],
将 BootForm 门面添加到 config/app.php 中的 aliases 数组中
'aliases' => [ //... 'Form' => NetoJose\Bootstrap4Forms\Bootstrap4FormsFacade::class, ],
用法
基本表单控件
打开和关闭表单
// Opening a form using POST method {!!Form::open()!!} // Opening a form using POST method with specific errors message bag {!!Form::open('messageBag')!!} // ... Form components here // Closing a form {!!Form::close()!!}
打开表单将自动为您添加 _token 字段
内联表单
// Making all inputs inline {!!Form::inlineForm()!!}
字段集
// Examples // Open fieldset {!!Form::fieldsetOpen()!!} // Open fieldset with legend {!!Form::fieldsetOpen('Legend title')!!} // Open fieldset with error display by field name {!!Form::fieldsetOpen('Legend title', 'field_name')!!} // Open fieldset as wrapper (checkbox/radio) {!!Form::fieldsetOpen('Legend title', 'field_name', true)!!} // Open fieldset with help text {!!Form::fieldsetOpen('Legend title')->help('Help')!!} // Open fieldset with error display by field name and help text {!!Form::fieldsetOpen('Legend title', 'field_name')->help('Help')!!} // ... Fieldset content // Close fieldset {!!Form::fieldsetClose()!!} // Close fieldset with error display by field name {!!Form::fieldsetClose('field_name')!!} // Close fieldset with help text {!!Form::fieldsetClose()->help('Help')!!} // Close fieldset with error display by field name and help text {!!Form::fieldsetClose('field_name')->help('Help')!!}
基本输入
文本输入
// 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::file('name', 'File name')!!}
纯文本输入
// Example {!!Form::plainText('name', 'User name')!!}
范围输入
// Example {!!Form::range('name', 'Range')!!}
密码输入
// Example {!!Form::password('name', 'Password')!!}
电子邮件输入
// Example {!!Form::email('name', 'Email')!!}
数字输入
// Example {!!Form::email('name', 'Number')!!}
电话输入
// Example {!!Form::email('name', 'Tel')!!}
隐藏
// Example {!!Form::hidden('user_id')!!}
锚点
// Example {!!Form::anchor("Link via parameter", 'foo/bar')!!}
按钮
提交
// Example {!!Form::submit("Send form")!!}
按钮
// Example {!!Form::button("Do something", "warning", "lg")!!}
重置
// 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 // Make checkbox checked {!!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')!!}
自动完成
// Examples // Set autocomplete on input {!!Form::text('name', 'Name')->autocomplete()!!} // You can use FALSE to turn off autocomplete status {!!Form::text('name', 'Name')->autocomplete(false)!!}
srOnly
设置标签 sr-only 状态
// Examples // Set sr-only style on label {!!Form::text('name', 'Name')->srOnly()!!} // You can use FALSE to turn off sr-only status {!!Form::text('name', 'Name')->srOnly(false)!!}
前缀
将内容添加到输入前缀
// Example {!!Form::text('name', 'Name')->prepend('Input prepend')!!}
选择多个
// 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')!!}
帮助文本
// Example {!!Form::text('name', 'Name')->help('Help text here')!!}
自定义属性
// 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()!!} // Disabling a fieldset {!!Form::fieldsetOpen('User data')->disabled()!!} // You can use FALSE to turn off disabled status {!!Form::text('name', 'Name')->disabled(false)!!}
必需
// Examples // Make a field required {!!Form::text('name', 'Name')->required()!!} // Make a fieldset required {!!Form::fieldsetOpen('User data')->required()!!} // You can use FALSE to turn off required status {!!Form::text('name', 'Name')->required(false)!!}
块
// Examples // Set block style on a field {!!Form::text('name', 'Name')->block()!!} // You can use FALSE to turn off block status {!!Form::text('name', 'Name')->block(false)!!}
简单
// Examples // Set simple status for a button {!!Form::button('Button')->simple()!!} // Set simple status for an anchor {!!Form::anchor('Anchor')->simple()!!} // You can use FALSE to turn off simple status {!!Form::button('Button')->simple(false)!!}
Id
// Example {!!Form::text('name', 'Name')->id('user-name')!!}
Class
// Example {!!Form::text('name', 'Name')->class('class')!!}
包装类
// Example {!!Form::text('name', 'Name')->wrapperClass('class')!!}
标签类
// Example {!!Form::text('name', 'Name')->labelClass('class')!!}
Id 前缀
// Example {!!Form::open()->idPrefix('register')!!}
通用类
// Example {!!Form::open()->generalClass('class')!!}
多部分
// 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')!!}
显式 HTTP 动词
// Examples {!!Form::open()->get()!!} {!!Form::open()->post()!!} {!!Form::open()->put()!!} {!!Form::open()->patch()!!} {!!Form::open()->delete()!!}
颜色
// Examples {!!Form::button("Do something")->color("warning")!!} {!!Form::button("Do something")->color("primary")!!}
显式颜色
// Examples {!!Form::button("Button label")->warning()!!} {!!Form::button("Button label")->outline()!!} {!!Form::button("Button label")->success()!! {!!Form::button("Button label")->danger()!!} {!!Form::button("Button label")->secondary()!!} {!!Form::button("Button label")->info()!!} {!!Form::button("Button label")->light()!!} {!!Form::button("Button label")->dark()!!} {!!Form::button("Button label")->link()!!}
大小
// Examples {!!Form::button("Do something")->size("sm")!!} {!!Form::button("Do something")->size("lg")!!}
显式大小
// Examples {!!Form::button("Button label")->sm()!!} {!!Form::button("Button label")->lg()!!}
类型
// 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')!!}
Name
// 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')!!}
链式属性
您可以使用链式功能为每个组件使用许多设置
// Examples {!!Form::open()->locale('forms.user')->put()->multipart()->route('user.add')->data($user)!!} {!!Form::text('name', 'Name')->placeholder('Type your name')->lg()!!} {!!Form::anchor("Link as a button")->sm()->info()->outline()!!} {!!Form::submit('Awesome button')->id('my-btn')->disabled()->danger()->lg()!!} {!!Form::close()!!}