HTML Tag Components Package for Laravel

HTML Tag Component Package with validation using bootstrap class for Laravel.

Installation & setup

You can install the package via composer:

composer require kaung199/htmltagcomponent

Usage

Usages Form Components

The form components can be used with the forms prefix.

Form

<x-forms::form-tag :attrs="[
    'class' => 'example-form',
    'id' => 'example-form-id',
    'action' => 'example-route',
    'method' => 'post',
    'formName' => 'example-form',
]">
   <!-- The form content here-->
</x-forms::form-tag>

These attributes are special:

• method ( Required )
• action ( Required )
• class (nullable)
• id (nullable)
• formName (nullable)

Submit Button

<x-forms::submit-button :attrs="[
    'label' => 'Example Label',
    'name' => 'example-name',
    'form' => 'example-form',
    'class' => 'example-class',
    'id' => 'id'
]"/>

These attributes are special:

• label ( Required )
• name (nullable)
• form (nullable)
• class (nullable)
• id (nullable)

Button

<x-forms::button :attrs="[
    'label' => 'Example Lable',
    'id' => 'example-id',
    'class' => 'example-class',
    'name' => 'example-name',
    'readOnly' => 'readonly',
    'disabled' => 'disabled'
]"/>

These attributes are special:

• label ( Required )
• id (nullable)
• class (nullable)
• name (nullable)
• readOnly (nullable)
• disabled (nullable)

Text Input

<x-forms::text-input :attrs="[
    'name' => 'example-name',
    'id' => 'example-id',
    'class' => 'example-class',
    'value' => 'example-value',
    'placeholder' => 'Example Placeholder',
    'label' => 'Example Label',
    'required' => 'yes'
]" />

These attributes are special:

• name ( Required )
• id (nullable)
• class (nullable)
• value (nullable)
• placeholder (nullable)
• label (nullable)
• required (nullable)

Number Input

<x-forms::number-input :attrs="[
    'name' => 'example-name',
    'id' => 'example-id',
    'class' => 'example-class',
    'value' => 'example-value',
    'placeholder' => 'Example Placeholder',
    'label' => 'Example Label',
    'required' => 'yes'
]" />

These attributes are special:

• name ( Required )
• id (nullable)
• class (nullable)
• value (nullable)
• placeholder (nullable)
• label (nullable)
• required (nullable)

Password Input

<x-forms::password-input :attrs="[
    'name' => 'example-name',
    'id' => 'example-id',
    'class' => 'example-class',
    'value' => 'example-value',
    'placeholder' => 'Example Placeholder',
    'label' => 'Example Label',
    'required' => 'yes'
]" />

These attributes are special:

• name ( Required )
• id (nullable)
• class (nullable)
• value (nullable)
• placeholder (nullable)
• label (nullable)
• required (nullable)

Hidden Input

<x-forms::hidden-input :attrs="[
    'name' => 'example-name',
    'id' => 'example-id',
    'class' => 'example-class',
    'value' => 'example-value',
]" />

These attributes are special:

• name ( Required )
• id (nullable)
• class (nullable)
• value (nullable)

Text Area

<x-forms::textarea :attrs="[
    'name' => 'example-name',
    'id' => 'example-id',
    'class' => 'example-class',
    'value' => 'example-value',
    'placeholder' => 'Example Placeholder',
    'label' => 'Example Label',
    'required' => 'yes'
]" />

These attributes are special:

• name ( Required )
• id (nullable)
• class (nullable)
• value (nullable)
• placeholder (nullable)
• label (nullable)
• required (nullable)

Select Option (Key => Value)

<x-forms::select-with-key-value :attrs="[
    'name' => 'Example Name',
    'selected' => 'example-selected-old-value',
    'class' => 'example-class',
    'placeholder' => 'Example Placeholder',
    'label' => 'Example Label',
    'required' => 'yes',
    'readOnly' => 'readonly',
    'disabled' => 'disabled',
    'list' => []
]"/>

These attributes are special:

• name ( Required )
• multiple (nullable)
• selected (nullable)
• class (nullable)
• placeholder (nullable)
• label (nullable)
• required (nullable)
• readOnly (nullable)
• disabled (nullable)
• list ( Required )

Select Option (Value => Value)

<x-forms::select-with-value-value :attrs="[
    'name' => 'Example Name',
    'selected' => 'example-selected-old-value',
    'class' => 'example-class',
    'placeholder' => 'Example Placeholder',
    'label' => 'Example Label',
    'required' => 'yes',
    'readOnly' => 'readonly',
    'disabled' => 'disabled',
    'list' => []
]"/>

These attributes are special:

• name ( Required )
• multiple (nullable)
• selected (nullable)
• class (nullable)
• placeholder (nullable)
• label (nullable)
• required (nullable)
• readOnly (nullable)
• disabled (nullable)
• list ( Required )

File

<x-forms::file-input :attrs="[
   'name' => 'ExampleFileName[]',
   'id' => 'example_file_id',
   'label' => 'Example Label',
   'fileType' => 'image or pdf or docx',
   'class' => 'example-class',
   'uploadableFileCount' => 1,
   'required' => 'yes',
   'placeholder' => ''
]" />

These attributes are special:

• JQuery Required
• name ( Required )
• id ( Required )
• label (nullable)
• fileType (nullable)
• class (nullable)
• uploadableFileCount ( Required )
• required (nullable)
• placeholder (nullable)