README

该包正在积极开发中，尚未准备好发布。包已完整并运行。我只是在发布前修复所有错误并完善它。目前还没有安装指南。但很快就会有！请确保关注！

Laravel Html Extra

描述

Laravel 5.5 扩展包，通过不同的 js 插件扩展LaravelCollective/html。每个组件都配置为具有相同的显示方式，包括标签、输入框和一些辅助文本。

功能

该包扩展 LaravelCollective/html 包，包括以下内容

文本输入框（与 LaravelCollective/html 相同，但内置标签等）
日期选择器
切换
选择/药丸盒
滑块
文本编辑器
文件上传器（尚未决定）
上传图像和裁剪

目录表

描述
目录表
安装
用法
- Form:: 面板用法
- HtmlExtra 方法链
组件
- 文本输入类型 - 基本文本输入
- Summernote 类型 - 创建 Summernote 编辑器
- NoUiSlider 类型 - 创建 NoUISlider 组件
- Bootstrap Toggle 类型 - 创建 Bootstrap Toggle 组件
- Select2 类型 - 创建 Select2 组件，仅选择 1
- Flatpickr 类型 - 创建 Flatpickr 组件，仅时间
- Cropper 类型 - 创建 Cropper 组件
- 文件类型 - 即将推出....
- 绘图类型 - 即将推出....
自定义 Blade 指令

安装

用法

有两种方法可以将此包集成到您的代码中。您可以使用由 laravelCollective/html 创建的 Form:: 面板，或者您可以使用自定义的 HtmlExtra 面板。区别在于，HtmlExtra 面板使用方法链来创建组件并渲染它们，而 laravelCollective/html 面板仅调用视图，您必须按正确的顺序注入参数。

Form:: 用法示例

{{ Form::textInput('Name', 'id', 'helper_text', 'Type',  $attributes[...]) }}

HtmlExtra:: 用法示例

{{ HtmlExtra::text()->name('Name')->id('1')->helperText('This is an input')->attributes(['required' => 'true'])->render() }}

Form:: 用法

您可以通过 LaravelCollective/html 的组件魔法方法获取组件

{{ Form::textInput('Name', 'id', 'helper_text', 'Type',  $attributes[...]) }}

有关如何使用此功能未来的文档将很快推出。

HtmlExtra:: 用法

使用 HtmlExtra 方法链既简单又友好，最重要的是，由于您不需要声明空变量，因此可以使用更少的代码来完成。

步骤 1: 初始化

第一步是声明类型，您可以选择以下两种方法中的任何一种。

// Facade Based, with build() and without 
{{ HtmlExtra::build()->text->... }}
{{ HtmlExtra::text()->... }}

// Service Binding Based
{{ app()->htmlextra()->build()->text->... }}
{{ app()->htmlextra()->text()->... }}

类型

HtmlExtra::text()-> -文本输入类型 - 基本文本输入
HtmlExtra::textarea()-> -文本输入类型 - 基本文本区域输入
HtmlExtra::textField()-> -TextField 输入类型 - 基本 textField 输入
HtmlExtra::password()-> -文本输入类型 - 密码输入
HtmlExtra::email()-> -文本输入类型 - 电子邮件输入
HtmlExtra::hidden()-> -文本输入类型 - 隐藏输入
HtmlExtra::summernote()-> -Summernote 类型 - 创建 Summernote 编辑器
HtmlExtra::slider()->-NoUiSlider 类型 - 创建 NoUISlider 组件
HtmlExtra::toggle()-> -Bootstrap Toggle 类型 - 创建 Bootstrap Toggle 组件
HtmlExtra::select()-> - Select2 类型 - 创建 Select2 组件，单选
HtmlExtra::multiple()-> - Select2 类型 - 创建 Select2 组件，多选* HtmlExtra::date()-> - Flatpickr 类型 - 创建 Flatpickr 组件，仅日期
HtmlExtra::time()-> - Flatpickr 类型 - 创建 Flatpickr 组件，仅时间
HtmlExtra::dateTime()-> - Flatpickr 类型 - 创建 Flatpickr 组件，日期时间
HtmlExtra::cropper()-> - Cropper 类型 - 创建 Cropper 组件
HtmlExtra::file()-> - 未确定
HtmlExtra::drawing()-> - 未确定

步骤 2：参数

下一步您必须声明参数并设置它们！

{{ HtmlExtra::build()->text->name('Some Name')->id('Some Id')->helperText('This is some helping Text') }}
{{ HtmlExtra::toggle()->name('Some Name')->helperText('Some Helper Text')->id('Some Id')->data(['some-atttribute' => 'some value'])... }}

参数方法

...->name('Some Name')->... - 输入名称，用于标签 必需！ $string
...->id('Foo')->... - ID 名称，需要是字母数字破折号（如果不提供，则将名称转换为字母数字） $string
...->helperText('Some Details')->... - 辅助文本，在输入下方 必需！ $string
...->value('Bar')->... - 输入的默认值 $mixed
...->attributes(['class' => 'form-control', 'style' => 'color: fff;'])->... - 直接传递给 HTML <input> 元素的属性。 $array
...->data(['data-width' => 100])->... - 将传递到视图中的数据。用于控制 JavaScript！ $array

魔法方法

您也可以通过上面的参数方法之外的方式将变量、属性和数据传递到组件中，前四个字母必须与以下相同，然后跟随的字母将是名称/键。该方法将接收您发送的值。

...->withFoo($var)->... // 替换 foo - 将变量传递到组件视图
...->attrBar($var)->... // 替换 Bar - 添加到属性数组
...->dataBaz($var)->... // 替换 Baz - 添加到数据数组

示例

{{ HtmlExtra::text()->name('Some Name')withRole('admin')... }} // Would pass $role = admin into the view.
{{ HtmlExtra::toggle()->name('Some Name')attrClass('hide-div')... }} // Would add 'class' => 'hide-div' to the attributes array
{{ HtmlExtra::select()->name('Some Name')dataDisable(true)... }} // would add 'disable' => true to the data array

魔法设置器（它实际上是一个魔法获取器，但嘿，它在设置某些东西）

您还可以将单个值传递到属性或数据数组中。

...->attrFoo->... // 替换 Foo - 添加到属性数组
...->attrBaz->... // 替换 Baz - 添加到数据数组

{{ HtmlExtra::text()->name('Some Name')->attrRequired->... }} // would add 'required' to the end of the attributes array
{{ HtmlExtra::toggle()->name('Some Name')->attrDisabled->... }} // would add 'disabled' to the end of the attributes array
{{ HtmlExtra::select()->name('Some Name')->dataStop->... }} // would add 'stop' to the end of the data array

步骤 3：渲染

最后你需要做的是告诉HtmlExtra渲染你给它提供的内容。只需将...->render()方法链接到外观链的末尾即可

示例

`{{ HtmlExtra::select()->name('Some Name')->id('1')->render() }}`

将来我会考虑将其扩展到其他方式。

基本文本输入

提供对表单基本表单输入的访问，唯一的不同是这将以所有其他输入相同的样式呈现，并为你创建标签和辅助文本。

Blade指令

{{ Form::textInput('Name', 'id', 'helper_text', 'Type',  $attributes[...]) }}

参数

名称 - 这将成为标签，如果没有在属性中设置占位符，则将在占位符中显示必需
id - 这将是切换的id，以及请求键的id 必需
辅助文本 - 这是显示在切换下面的文本，以提供更多信息
类型 - 输入类型选项：文本、密码、电子邮件 默认：'text'
Attributes[] - 一个包含输入属性的数组。直接传递给Form::text 默认：Null

可用属性

同样，你可以使用在Form::text方法调用中通常使用的任何属性 HTML5输入属性

['value'                   => 'String',   // Value of the input upon page load DEFAULT: NULL
'placeholder'              => 'String',   // placeholder text DEFAULT: 'Enter ' . $Name
'maxlength'                => 'String',   // max amount of chars allowed
'required'                 => boolean,   // If use, label will get a * after it
'autocomplete'             => 'String',   // Use On or Off Only
'autofocus'                =>  boolean,   // Specifies that an <input> element should automatically get focus when the page loads, only use once!

简单用法

{{ Form::texInput('Label', 'toggle-id', 'This is some helper text', true}}

flatpickr v4组件

Blade指令

{{ Form::datePicker('Name', 'id', 'helper_text', $date,  $attributes[...]) }}
{{ Form::timePicker('Name', 'id', 'helper_text', $date,  $attributes[...]) }}
{{ Form::dateTimePicker('Name', 'id', 'helper_text', $date,  $attributes[...]) }}

参数

名称 - 这将成为标签，如果没有在属性中设置占位符，则将在占位符中显示必需
id - 这将是切换的id，以及请求键的id 必需
辅助文本 - 这是显示在切换下面的文本，以提供更多信息必需（如果你不想显示helper_text，请留空）
$Date - 日期值必需如果你想为空设置，请设置为null
Attributes[] - 一个包含flatpickr属性的数组，更多信息请参见下文 默认：Null

可用属性


['enableTime'              => 'boolean',  // Allow Time to be selected (you can use dateTimePicker or timePicker instead if you want)
'enableSeconds'            => 'boolean',  // enable seconds to be captures, but be using dateTimePicker, or timePicker
'noCalendar'               => boolean,   // will not display a day picking
//NOTE the above 3 are linked with the date format. see flatpickr.blade.php

//You can also pass in normal text attributes that are HTML complainct

简单用法

{{ Form::datePicker('Date of Birth', 'date_of_birth', 'Users Date Of Birth', null ) }}
{{ Form::dateTimePicker('Time Clocked In', 'clock_in_at', 'Time Clocked', null ) }}

高级用法 - 带有属性

{{ Form::datePicker('Date of Birth', 'date_of_birth', 'Users Date Of Birth', null, ['required' => 'required'] ) }}

select2组件

Blade指令

{{ Form::select2('Name', 'id', 'helper_text', $items[],  $attributes[...], $logic[...]) }}

参数

名称 - 这将成为标签，如果没有在属性中设置占位符，则将在占位符中显示必需
id - 这将是切换的id，以及请求键的id 必需
辅助文本 - 这是显示在切换下面的文本，以提供更多信息必需（如果你不想显示helper_text，请留空）
$items[] - 要显示的项目列表。需要是一个键值对数组必需
Attributes[] - 一个包含select2属性的数组，更多信息请参见下文 默认：Null
Data[] - 一个键值对数组，如果选中，将通过移除class hide-div显示特定的divID 默认：Null

可用属性

['multiple'              => 'String',  // Allow Multiple Selects
'placeholder'            => 'String',  // placeholder text DEFAULT: 'Enter ' . $Name
'required'               => boolean,   // If use, label will get a * after it
'allow-clear'            => boolean,   // Provides an X to hit so you can clear the selection
'tags'                   => boolean,   //Allows user to type their own awnser in
'maximumSelectionLength' =>  int,      // If mutiple is used, this will set the maxium amount of selectins you can choose

简单用法

{{ Form::select2('Users', 'user_id', 'A List Of Users', $users) }}

高级用法 - 带有属性

{{ Form::select2('Users', 'user_id', 'A List Of Users', $users, ['mutiple' => 'mutiple', 'tags' => 'true']) }}

高级用法 - 带有属性和逻辑

显示一个Select 2输入，如果选择peter，则显示id为的div

@php
  $users = ['Peter' => 1, 'John' => 2],
@endphp
...
{{ Form::select2('Users', 'user_id', 'A List Of Users', $users, ['mutiple' => 'mutiple', 'tags' => 'true'], ['Peter', => 'hide-me']) }}
<div class="hide-div", id="hide-me">
    //Show some stuff
</div>

切换组件

由bootstrap-toggle屏蔽的Form::checkbox

Blade指令

{{ Form::toggle('Name', 'id', 'helper_text', $boolean,  $attributes[...], $data[...]) }}

外观调用

{{ HtmlExtra::toggle()->withName()->withId()->withHelperText()->withValue()->withAttributes()->withData() }}

参数

名称 - 这将成为标签必需
id - 这将是切换的id，以及请求键的id 必需
辅助文本 - 这是显示在切换下面的文本，以提供更多信息必需
$boolean - 切换的默认状态，仅true或false 必需
Attributes[] - 一个包含HTML INPUT属性的数组，更多信息请参见下文必需
Data[] - 一个包含TOGGLE JAVASCRIPT数据的数组必需

$Attributes[]

此数组传递给所有javascript下面的Form::checkbox

['required'                 => boolean,   // If use, label will get a * after it
]

$Data[] 参数

此数组传递给bootstrap toogle元素

['data-on'             => 'String',   //Text Displayed when Toggle Is On DEFAULT = ON
 'data-off'            => 'String',   //Text Displayed when Toggle Is On DEFAULT = OFF
 'data-label'          => 'String',   //label of toggle if data-on and data-off are not set' NO DEFAULT
 'data-size'           => 'String',   //Overrides height and width. OPTIONS: large, normal, small, mini
 'data-offstyle'       => 'String',   // Style OPTIONS: primary, default, warning, danger, success, info
 'data-onstyle'        => 'String',   // Style OPTIONS: primary, default, warning, danger, success, info
 'data-width'          =>   int,      // Width of toggle DEFAULT 200
 'data-height          =>   int,      // Height of toggle DEFAULT 30
 'show-id-if-toggled' =>  'Array',    // If turned toggle, this will remove the hide-div from the inputed div#ID
 'hide-id-if-toggled' =>  'Array',     // If turned toggle, this will remove the hide-div from the inputed div#ID
 'disable-id-if-toggled' =>  'Array', //if the toggle is toggle, disablen another toggle
 'enable-id-if-toggled' =>  'Array',  //if the toggle is enable, enable another toggle

简单用法

{{ Form::toggle('Label', 'toggle-id', 'This is some helper text', true}}

高级用法 - 带有属性

{{ Form::toggle('Label', 'toggle-id', 'This is some helper text', true,  $data['data-label' => 'Hello There'] }}

高级用法 - 带有属性和逻辑

显示3个切换，2个可见，1个隐藏。如果第一个被选中，它将显示第三个。只有第一个和第二个切换可以同时被选中。（像单选按钮一样）

{{ Form::toggle('Label', 'toggle-id', 'This is some helper text', false,  $attributes['data-label' => 'Hello There', 'show-id-if-selected' => 'hide-me'], ['toggle-id2'] }}
{{ Form::toggle('Label', 'toggle-id2', 'This is some helper text', false,  $attributes['data-label' => 'Hello There2'], ['toggle-id'] }}
<div class="hide-div", id="hide-me">
{{ Form::toggle('Label', 'toggle-id3', 'This is some helper text', false,  $attributes['data-label' => 'Hello There3', ], ['toggle-id'] }}
</div>

自定义 Blade 指令

添加了一些自定义blade指令以使这一切都起作用。

@pushonce('stack:component') && @endpushonce

@pushonce('stack:component')
   //stuff to push to stack
@endpushonce

参数

stack - 你想要推入的堆栈名称。不能包含破折号必需
component - 组件的名称，这将创建一个具有此名称的布尔值，并用于检查是否已调用。不能包含破折号必需

用法

假设你想要将脚本推送到名为scripts的堆栈，并且你的小部件名称为select2

// In Blade View
...
@pushonce('scripts:select2')
   <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
@endpushonce

在第一次加载此blade视图时，将推入，但在第二次加载时将为false，不会推入任何内容

许可证

请参阅LICENSE.md

赵科刚 / laravel-html-extra

维护者

详细信息

README

Laravel Html Extra

描述

功能

目录表

安装

用法

Form:: 用法示例

HtmlExtra:: 用法示例

Form:: 用法

HtmlExtra:: 用法

步骤 1: 初始化

类型

步骤 2：参数

参数方法

魔法方法

示例

魔法设置器（它实际上是一个魔法获取器，但嘿，它在设置某些东西）

步骤 3：渲染

示例

基本文本输入

Blade指令

参数

可用属性

简单用法

flatpickr v4组件

Blade指令

参数

可用属性

简单用法

高级用法 - 带有属性

select2组件

Blade指令

参数

可用属性

简单用法

高级用法 - 带有属性

高级用法 - 带有属性和逻辑

切换组件

Blade指令

外观调用

参数

$Attributes[]

$Data[] 参数

简单用法

高级用法 - 带有属性

高级用法 - 带有属性和逻辑

自定义 Blade 指令

@pushonce('stack:component') && @endpushonce

参数

用法

许可证