mediactive-digital/laravel-bootstrap-4-forms

Laravel 5 的 Bootstrap 4 表单构建器

2.1.1 2019-01-31 11:20 UTC

This package is auto-updated.

Last update: 2024-09-05 20:43:05 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()!!}