README

安装

您可以通过composer安装此包

composer require mostafasewidan/sewidan-field

发布配置文件

php artisan vendor:publish --provider="SewidanField\SewidanFieldServiceProvider"

使用方法

您可以使用任何类型创建字段

    /**
     * @param $name is a field name 
     * @param $label 
     * @param null $value
     * @param array $field_attributes
     * @return string
     */
    field()->text('name','label','value',[]);

输出

   <div class="form-group " id="{{$name}}_wrap">
           
       <label for="{{$name}}" class="col-md-2" style=""> {{$label}} </label>

       <div class="col-md-9" style="">
   
            <input placeholder="{{$label}}" value="{{$value}}" class="form-control" data-name="{{$name}}" id="{{$name}}" name="{{$name}}" type="text">

            <span class="help-block" style=""></span>
       
       </div>

   </div>

参数

字段是通过使用laravel collective创建的

     $name  // is a field name (string | required)
     
     $label // is a label name (string | required)
     
     $value // is a value of input (string | the default value is null)
      you can use it with laravel collective form model 
      Form::model($model,[attributes])
     
     $field_attributes // is input attributes like class , style 
     //it take some default values like class : form-control and you can override
     // there values like ['class' => 'your-class' , 'style' => 'color:red']
     // (array | not required)
     // default : 
      [
          "placeholder" => $label,
          "class" => "form-control",
          "data-name" => $name,
          "id" => $name
      ]
     

配置文件

在您发布提供者的地方，您将找到config/field.php文件，您可以通过创建和切换主题来控制HTML响应的内容

主题映射键

   {{-- container --}} <div class="form-group " id="{{$name}}_wrap">
   {{-- label --}}         <label for="{{$name}}" class="col-md-2" style=""> {{$label}} </label>
   {{-- field_div --}}     <div class="col-md-9" style="">   
                                  <input placeholder="{{$label}}" value="{{$value}}" class="form-control" data-name="{{$name}}" id="{{$name}}" name="{{$name}}" type="text">
   {{-- field_error --}}          <span class="help-block" style=""></span>
                           </div>
                       </div>

在config/field.php中控制主题

    'default_theme' => env('FIELD_DEFAULT_THEME','default'),
    
        'themes' => [
    
            'default' => [
    
                'container' => [
                    'active' => true,
                    'class' => 'form-group'
                ],
    
                'label' => [
                    'active' => true,
                    'options' => [
                        'class' => 'col-md-2',
                        'style' => ''
                    ],
                ],
    
                'field_div' => [
                    'active' => true,
                    'options' => [
                        'class' => 'col-md-9',
                        'style' => ''
                    ],
                ],
    
                'field_error' => [
                    'active' => true,
                    'options' => [
                        'class' => 'help-block',
                        'style' => ''
                    ],
                ],
            ],
        ],

您可以通过将FIELD_DEFAULT_THEME键设置为默认主题名称在.env文件中或直接在config/field.php中更改它来更改默认主题'default_theme' => env('FIELD_DEFAULT_THEME','your default theme name')

在创建字段时切换主题

您可以将主题名称轻松地添加到字段函数中

    field('theme_name')->text('name','label','value',[]);

如果您未输入主题名称，则字段函数将自动使用默认主题

    field()->text('name','label','value',[]); // take default theme in config file

CK editor (5)

###使用方法

首先，您必须在布局中添加script和style文件

    {{-- styles --}}
    <link href="{{asset('SewidanField/plugins/ck-editor-5/css/ckeditor.css')}}" rel="stylesheet" id="style_components" type="text/css" />

    {{-- scripts --}}
    <script src="{{asset('SewidanField/plugins/ck-editor-5/js/ckeditor.js')}}"></script>
    <script src="{{asset('SewidanField/plugins/ck-editor-5/js/ckEditorScripts.js')}}"></script>

添加脚本和样式文件后，您可以使用它像这样简单

    field()->ckEditor5('name','label','value',[]);

不要忘记在表单提交时添加此脚本

    if (window.editors == undefined) {
        $.each(editors, function (index, editor) {
            editor.updateSourceElement()
        });
    }