README

该包正在积极开发中，尚未准备好发布。包已经完整并且可用。我正在修复所有的错误并使其完善，然后发布。目前还没有安装指南。但很快就会有！请确保关注！

Laravel Html Extra

描述

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

功能

此包扩展了LaravelCollective/html包，包括以下内容：

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

目录表

描述
目录表
安装
使用
- Form:: 面向对象使用
- HtmlExtra 方法链
组件
- 文本输入类型 - 基本文本输入
- Summernote 类型 - 创建一个Summernote编辑器
- NoUiSlider 类型 - 创建一个NoUISlider组件
- Bootstrap Toggle 类型 - 创建一个Bootstrap Toggle组件
- Select2 类型 - 创建一个Select2组件，只能选择一个
- 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方法链既简单又友好，最重要的是，由于不需要声明null变量，因此代码量更少。

步骤 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 组件，仅选择 1
HtmlExtra::multiple()-> - Select2 类型 - 创建 Select2 组件，选择多个
HtmlExtra::date()-> - Flatpickr 类型 - 创建仅日期的 Flatpickr 组件
HtmlExtra::time()-> - Flatpickr 类型 - 创建仅时间的 Flatpickr 组件
HtmlExtra::dateTime()-> - Flatpickr 类型 - 创建包含 dateTime 的 Flatpickr 组件
HtmlExtra::cropper()-> - Cropper 类型 - 创建 Cropper 组件
HtmlExtra::file()-> - 未决定

第二步：参数

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

{{ 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() 方法链接到 Facade 链的末尾

示例

`{{ 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 为

@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-core-ui

维护者

详细信息

README

Laravel Html Extra

描述

功能

目录表

安装

使用

Form:: 使用示例

HtmlExtra:: 使用示例

Form:: 使用

HtmlExtra:: 使用

步骤 1: 初始化

类型

第二步：参数

参数方法

魔法方法

示例

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

步骤 3：渲染

示例

基本文本输入

Blade 指令

参数

可用属性

简单用法

flatpickr v4 组件

Blade 指令

参数

可用属性

简单用法

高级用法 - 带属性

select2 组件

Blade 指令

参数

可用属性

简单用法

高级用法 - 带属性

高级用法 - 带属性和逻辑

切换组件

Blade 指令

外观调用

参数

$Attributes[]

$Data[] 参数

简单用法

高级用法 - 带属性

高级用法 - 带属性和逻辑

自定义Blade指令

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

参数

使用

许可证