Download the PHP package pkeogan/laravel-html-extra without Composer
On this page you can find all versions of the php package pkeogan/laravel-html-extra. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package laravel-html-extra
READ ME BEFORE MOVING ONWARD
Package is under heavy development and not ready for release, Package is complete and working. I am just working on all of the bugs and perfecting it before I release. At the time there is no install guide. Will be soon though! Make sure you watch!
Laravel Html Extra
Description
A Laravel 5.5 Package that extendsLaravelCollective/html further with different js plugins. Every component is also setup to be displayed the same, with label, the input, a some helper text.
Features
This package extends LaravelCollective/html package to include the following
- Text Inputs (Same as LaravelCollective/html, but build in with labels ect)
- Date Picker
- Toggle
- Select/Pillbox
- Slider
- Text Editor
- Fileuploader (Not Decided Yet)
- Image Uploaded and Cropper
Table of Contents
- Description
- Table of Contents
- Install
- Usage
- Form:: Facade Usage
- HtmlExtra Method Chaining
- Step 1 - Initialization
- Step 2 - Parameters
- Step 3 - Render
- Components
- Text Input Type - basic text input
- Summernote Type - creates a summernote editor
- NoUiSlider Type - creates a NoUISlider component
- Bootstrap Toggle Type - creates a Bootstrap Toggle component
- Select2 Type - creates a Select2 component, select only 1
- Flatpickr Type - creates a Flatpickr component, with only the time
- Cropper Type - creates a Croppercomponent
- File Type - coming soon....
- Drawintg Type - coming soon....
- Custom Blade Directives
Install
Usage
There are two ways to implement this package into your code. You can use the Form:: facade that is created by laravelCollective/html, or you can use the custom HtmlExtra Facade. The differnce, is that the HtmlExtra facade uses method chaining, to create components and render them, where as the laravelCollective/html facade just calls the views and you must inject the parameters in the right order.
Form:: Usage Example
{{ Form::textInput('Name', 'id', 'helper_text', 'Type', $attributes[...]) }}
HtmlExtra:: Usage Example
{{ HtmlExtra::text()->name('Name')->id('1')->helperText('This is an input')->attributes(['required' => 'true'])->render() }}
Form:: Usage
You can all for a component over LaravelCollective/html's Component Magic Methods
Future Documentation on how to use this coming in the future.
HtmlExtra:: Usage
Using the HtmlExtra method chaining can be easy, and more friendly to look at. most importantly it can be done with a smaller amount of code, due to the fact you do not have to declare null variables.
Step 1: Initialization
First Step Is To Declare the type, you can do this two ways, which ever you prefer.
Types
HtmlExtra::text()->
-Text Input Type - basic text inputHtmlExtra::textarea()->
-Text Input Type - basic text area inputHtmlExtra::textField()->
-TextField Input Type - basic textField inputHtmlExtra::password()->
-Text Input Type - password inputHtmlExtra::email()->
-Text Input Type - email inputHtmlExtra::hidden()->
-Text Input Type - hidden inputHtmlExtra::summernote()->
-Summernote Type - creates a summernote editorHtmlExtra::slider()->
-NoUiSlider Type - creates a NoUISlider componentHtmlExtra::toggle()->
-Bootstrap Toggle Type - creates a Bootstrap Toggle componentHtmlExtra::select()->
- Select2 Type - creates a Select2 component, select only 1HtmlExtra::multiple()->
- Flatpickr Type - creates a Flatpickr component, with only the dateHtmlExtra::time()->
- Flatpickr Type - creates a Flatpickr component, with only the timeHtmlExtra::dateTime()->
- Flatpickr Type - creates a Flatpickr component, with the dateTimeHtmlExtra::cropper()->
- Cropper Type - creates a CroppercomponentHtmlExtra::file()->
- UNDECIDEDHtmlExtra::drawing()->
- UNDECIDED
Step 2: Parameters
Next step you must declare the parameters and set them!
Parameter Methods
...->name('Some Name')->...
- The name of the input, used for label REQUIRED! $string...->id('Foo')->...
- The name of the ID, needs to be alpha-numeric-dash (If not supplied, this will take the name and convert it to alpha numeric) $string...->helperText('Some Details')->...
- The Helper Text, under the input REQUIRED! $string...->value('Bar')->...
- The default value of the input $mixed...->attributes(['class' => 'form-control', 'style' => 'color: fff;'])->...
- Attributes that get passed directly to the html<input>
Element. $array...->data(['data-width' => 100])->...
- The data that will be passed into the view. Used to control the JavaScript! $array
Magic Methods
You may also pass varibles, attributes and data to your component without using the above parameter methods the first 4 letters must be the same as below, then te letters following it will be the name/key. The method will then take the value you are sending.
...->withFoo($var)->... //Replace foo
- pass a variable into the component view...->attrBar($var)->... //Replace Bar
- add to the attributes array...->dataBaz($var)->... //Replace Baz
- add to the data arrayExamples
Magic Setters (Its really a Magic Getter, but hey its setting something)
you may also pass single values into the attribute or data arrays.
...->attrFoo->... //Replace Foo
- add to the attributes array...->attrBaz->... // Replace Baz
- add to the data array
Step 3: Render
The last thing you need to do, is tell the HtmlExtra to render what you gave it.
Simply chain the ...->render()
method to the end of a Facade Chain
Example
`{{ HtmlExtra::select()->name('Some Name')->id('1')->render() }}`
In the future I will look into expanding this into other ways.
Basic Text Input
Provides access to Form's basic form input, only difference is this will have the same style as all the other inputs, and create the label and helper text for you.
Blade Directive
Parameters
- Name - This will become the label and if no placeholder is set in attribute, this will display in the placeholderREQUIRED
- id -This will be the id of the toggle, and the id of the request key REQUIRED
- Helper Text - This is the text displayed underneath the toggle to give more information
- Type - Type of input OPTIONS: text, password, email DEFAULT: 'text'
- Attributes[] - An array that contains the attributes for the input. Gets passed directly to the Form::text DEFAULT: Null
Avaible Attributes
Again, you can use anything that you would normaling use in the Form::text method call for the attributes HTML5 Inputs Attributes
Simple Usage
flatpickr v4 Component
Blade Directive
Parameters
- Name - This will become the label and if no placeholder is set in attribute, this will display in the placeholderREQUIRED
- id -This will be the id of the toggle, and the id of the request key REQUIRED
- Helper Text - This is the text displayed underneath the toggle to give more information REQUIRED (leave '' if you dont want helper_text)
- $Date - Date Value REQUIRED Set to null if you want it empty
- Attributes[] - An array that contains the attributes for the flatpickr, see below for more information DEFAULT: Null
Avaible Attributes
Simple Usage
Advanced Usage - With Attributes
select2 Component
Blade Directive
Parameters
- Name - This will become the label and if no placeholder is set in attribute, this will display in the placeholderREQUIRED
- id -This will be the id of the toggle, and the id of the request key REQUIRED
- Helper Text - This is the text displayed underneath the toggle to give more information REQUIRED (leave '' if you dont want helper_text)
- $items[] - List of Items to Display. Needs to be a keypair array. REQUIRED
- Attributes[] - An array that contains the attributes for the select2, see below for more information DEFAULT: Null
- Data[] - A Keypair Array that if selected will display certain divID by removing class hide-div DEFAULT: Null
Avaible Attributes
Simple Usage
Advanced Usage - With Attributes
Advanced Usage - With Attributes and Logic
Display a Select 2 input, and if peter is selected, then show a div with id
Toggle Component
A Form::checkbox masked by a bootstrap-toggle
Blade Directive
Facade Call
Parameters
- Name - This will become the label REQUIRED
- id -This will be the id of the toggle, and the id of the request key REQUIRED
- Helper Text - This is the text displayed underneath the toggle to give more information REQUIRED
- $boolean - Default state of the toggle, true or false only REQUIRED
- Attributes[] - An array that contains the attributes for the HTML INPUT, see below for more information REQUIRED
- Data[] - an ans) an Array that contains the data for the TOGGLE JAVASCIRPT REQUIRED
$Attributes[]
This array is passed to the Form::checkbox beneath all of the javascript
$Data[] Parameters
This array is passed to the bootstrap toogle element
Simple Usage
Advanced Usage - With Attributes
Advanced Usage - With Attributes and Logic
Displays 3 toggles, 2 visble and 1 hidden. If the first one is selected, is will display the third. Only the first and second toggle can be selected at the same time. (like radio buttons)
Custom Blade Directives
There are some custom blade directives added in order to make this all work.
@pushonce('stack:component') && @endpushonce
Parameters
- stack - Name of the stack you want to push to. CANNOT HAVE DASHES REQUIRED
- component - Name of the component, this creates a boolean with this name and is used to check if its been called CANNOT HAVE DASHES REQUIRED
Usage
Lets say you want to push a script to the stack
scripts
and the name of your widget isselect2
On the first time loading this blade view, it will push, but the second time it will be false and not push anything
License
Please see LICENSE.md