dmb / particles
一个提供blade组件的包,兼容Laravel 6及更早版本,以便更结构化、更简单地构建表单。
v0.1.0
2022-12-07 08:23 UTC
Requires
- php: >=7.2
README
Particles - 组装你的表单
一个提供blade组件的包,兼容Laravel 6及更早版本,以便更结构化、更简单地构建表单。
安装
您可以通过composer安装此包。
composer require dmb/particles
使用方法
使用Particles非常简单。每个组件都会渲染HTML标记,并利用参数的便利性和模块化,某些情况下参数有默认值,可以覆盖。
所有组件均基于bootstrap 4。
可用的组件有:
- 复选框
- 日期选择器 - 基于Datepicker for Bootstrap v1.9.0
- 输入框
- 标签
- 多选 - 基于Selec2
- 单选框
- 下拉选择框
- 文本区域 - 基于CkEditor的ckeditor选项
- 工具提示 - 基于FancyBox的依赖
支持的参数包括:
- 标签:字符串
- 工具提示:数组 <名称,内容>
- id:整数
- 类型:字符串 默认:text|radio|checkbox
- 类:字符串 默认:form-control|form-control date-picker|form-control multiple-select
- 名称:字符串
- 值:字符串
- 样式:字符串 内联样式默认:width: 100%;|null
- 只读:?bool 默认 null
- 必填:?bool 默认 null - 如果为true,则在标签旁边放置一个星号
- 禁用:?bool 默认 null
- 数据:数组 <[键,值]> 动态渲染数据属性
文本区域组件的特定参数:
- ckeditor:?bool 默认 null - 如果为true,则激活ckeditor插件
- 行数:int 默认 3
下拉选择框组件的特定参数:
- 禁用文本:string 默认 __('选择一个选项')
多选组件的特定参数:
- 多选:?bool 默认 mutiple="multiple"
- 数据占位符:?string 默认 __('选择一个选项')
- 数据允许清除:?bool 默认 true
- 数据标签:?bool
单选框和复选框组件的特定参数:
- 样式文本:string 默认 margin-left:5px
选择框、多选框和文本区域组件可以使用插槽将相关代码放置在组件自身的开启和关闭标签之间。
一些示例
@input([ 'label' => 'Label', 'name' => 'name', 'tooltip' => [ 'name' => 'name', 'content' => 'Content text' ], 'value' => 'value', 'required' => true ]) @endinput
@select([ 'label' => 'Age', 'name' => 'age', 'tooltip' => [ 'name' => 'age', 'content' => 'Lorem ipsum age.' ], 'required' => true ]) @foreach ( [30,31,32,33,34] as $age ) <option value="{{ $age }}" {{ $age === 34 ? 'selected' : null }} > {{ $age }} </option> @endforeach @endselect
@textarea([ 'label' => 'Description', 'name' => 'description', 'tooltip' => [ 'name' => 'description', 'content' => 'Lorem ispum description' ], 'rows' => 10, 'required' => true, 'readonly' => true ]) Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo sed necessitatibus dignissimos sint porro fugiat natus, eligendi obcaecati nulla itaque expedita commodi tenetur neque quos, sequi pariatur quidem provident reiciendis. @endtextarea
@multiple([ 'label' => 'Roles', 'name' => 'roles', 'dataTags' => true, 'required' => true ]) @foreach ( ['Superadmin','Admin','User'] as $role ) <option value="{{ $role }}" {{ $role === 'Admin' ? 'selected' : null }} > {{ $role }} </option> @endforeach @endmultiple
包含所有参数、功能等的完整文档将很快发布。
变更日志
有关最近更改的更多信息,请参阅变更日志。
致谢
许可
MIT许可(MIT)。有关更多信息,请参阅许可文件。