README

Laravel 的 HTML 标签组件包

使用 bootstrap 类进行验证的 HTML 标签组件包。

安装 & 设置

您可以通过 composer 安装此包

composer require kaung199/htmltagcomponent

用法

表单组件用法

表单组件可以使用 forms 前缀。

表单

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

以下属性是特殊的

• method ( 必需 )
• action ( 必需 )
• class (可为空)
• id (可为空)
• formName (可为空)

提交按钮

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

以下属性是特殊的

• label ( 必需 )
• name (可为空)
• form (可为空)
• class (可为空)
• id (可为空)

按钮

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

以下属性是特殊的

• label ( 必需 )
• id (可为空)
• class (可为空)
• name (可为空)
• readOnly (可为空)
• disabled (可为空)

文本输入

<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'
]" />

以下属性是特殊的

• name ( 必需 )
• id (可为空)
• class (可为空)
• value (可为空)
• placeholder (可为空)
• label (可为空)
• required (可为空)

数字输入

<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'
]" />

以下属性是特殊的

• name ( 必需 )
• id (可为空)
• class (可为空)
• value (可为空)
• placeholder (可为空)
• label (可为空)
• required (可为空)

密码输入

<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'
]" />

以下属性是特殊的

• name ( 必需 )
• id (可为空)
• class (可为空)
• value (可为空)
• placeholder (可为空)
• label (可为空)
• required (可为空)

隐藏输入

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

以下属性是特殊的

• name ( 必需 )
• id (可为空)
• class (可为空)
• value (可为空)

文本区域

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

以下属性是特殊的

• name ( 必需 )
• id (可为空)
• class (可为空)
• value (可为空)
• placeholder (可为空)
• label (可为空)
• required (可为空)

选择选项（键 => 值）

<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' => []
]"/>

以下属性是特殊的

• name ( 必需 )
• multiple (可为空)
• selected (可为空)
• class (可为空)
• placeholder (可为空)
• label (可为空)
• required (可为空)
• readOnly (可为空)
• disabled (可为空)
• list ( 必需 )

选择选项（值 => 值）

<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' => []
]"/>

以下属性是特殊的

• name ( 必需 )
• multiple (可为空)
• selected (可为空)
• class (可为空)
• placeholder (可为空)
• label (可为空)
• required (可为空)
• readOnly (可为空)
• disabled (可为空)
• list ( 必需 )

文件

<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' => ''
]" />

以下属性是特殊的

• JQuery 必需
• name ( 必需 )
• id ( 必需 )
• label (可为空)
• fileType (可为空)
• class (可为空)
• uploadableFileCount ( 必需 )
• required (可为空)
• placeholder (可为空)