README

一个基于 Tabler UI Kit 的 Laravel 视图组件包 - 一个基于 Bootstrap 的免费开源 HTML 仪表盘 UI Kit。

目标

本包的目标是提供一个易于使用的表单输入列表，作为 Blade 的视图组件，同时基于 Tabler UI Kit 构建，以模仿 LaravelCollective 的 HTML 包。Tabler 文档（https://preview-dev.tabler.io/docs/form-elements.html）上列出的所有表单元素最终都将在此处提供。

安装

1. 安装 Laravel 7.x 或更高版本的新版。
2. 使用以下命令安装此包： composer require laravel-view-components/forms。Laravel 7.x 将自动发现此包。无需注册服务提供者。
3. 安装 Tabler UI 预设。
4. 运行 npm install && npm run dev 以构建前端

用法

如果您不熟悉 Laravel 7.x 视图组件，请参阅 Laravel 文档 以获取详细信息。

以下列出了一些常见的组件属性。特定组件可能具有以下详细说明的额外属性。

• name - HTML name 属性。
• label - 与输入项相关联的 HTML label 元素。

本包中可用的 Tabler UI 组件如下。

表单文本组件

<x-form-text name="example-text-input" label="文本" placeholder="输入占位符"/>

<div class="form-group">
  <label for="example-text-input" class="form-label">Text</label>
  <input name="example-text-input" type="text" class="form-control " placeholder="Input placeholder" autocomplete="off">
</div>

表单密码组件

<x-form-password name="example-password-input" label="密码" placeholder="输入占位符"/>

<div class="form-group">
  <label for="example-password-input" class="form-label">Pasword</label>
  <input name="example-password-input" type="password" class="form-control " placeholder="Input placeholder" autocomplete="off">
</div>

表单复选框组件

<x-form-checkbox />

表单颜色组件

<x-form-color />

表单电子邮件组件

<x-form-email />

表单文件组件

<x-form-file />

表单数字组件

<x-form-number />

表单电话组件

<x-form-phone />

表单单选按钮组件

<x-form-radio />

表单搜索组件

<x-form-search />

表单选择组件

<x-form-select />

表单图片选择组件

<x-form-select.images />

表单标签选择组件

<x-form-select.tags />

表单用户选择组件

<x-form-select.users />

表单开关组件

<x-form-toggle />