kaung199/htmltagcomponent

HTML tag comopnent with validation using bootstrap class for Laravel Application

v1.5 2024-09-20 03:58 UTC

This package is auto-updated.

Last update: 2024-10-20 04:12:41 UTC


README

PHP from Packagist Latest Version on Packagist Total Downloads

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)