Download the PHP package pkeogan/laravel-html-extra-core-ui without Composer

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 input
• HtmlExtra::textarea()-> -Text Input Type - basic text area input
• HtmlExtra::textField()-> -TextField Input Type - basic textField input
• HtmlExtra::password()-> -Text Input Type - password input
• HtmlExtra::email()-> -Text Input Type - email input
• HtmlExtra::hidden()-> -Text Input Type - hidden input
• HtmlExtra::summernote()-> -Summernote Type - creates a summernote editor
• HtmlExtra::slider()->-NoUiSlider Type - creates a NoUISlider component
• HtmlExtra::toggle()-> -Bootstrap Toggle Type - creates a Bootstrap Toggle component
• HtmlExtra::select()-> - Select2 Type - creates a Select2 component, select only 1
• HtmlExtra::multiple()-> - Flatpickr Type - creates a Flatpickr component, with only the date
• HtmlExtra::time()-> - Flatpickr Type - creates a Flatpickr component, with only the time
• HtmlExtra::dateTime()-> - Flatpickr Type - creates a Flatpickr component, with the dateTime
• HtmlExtra::cropper()-> - Cropper Type - creates a Croppercomponent
• HtmlExtra::file()-> - UNDECIDED
• HtmlExtra::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 array

  Examples

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 is select2

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