الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

أشكال العنب

يضيف هذا البرنامج المساعد بعض مكونات وكتل النماذج الأساسية التي تساعد في العمل مع النماذج أسهل

العرض التوضيحي

المكونات المتاحة label form input textarea select option checkbox button radio

خيارات

خيار وصف تقصير
blocks الذي يحرك لإضافة ['form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio'] (الكل)
category اسم الفئة Forms
block أضف خيارات كتلة مخصصة ، بناءً على معرف الكتلة. (blockId) => ({})

تحميل

  • CDN
    • https://unpkg.com/grapesjs-plugin-forms
  • NPM
    • npm i grapesjs-plugin-forms
  • غيت
    • git clone https://github.com/GrapesJS/components-forms.git

الاستخدام

مباشرة في المتصفح 

 < link href =" path/to/grapes.min.css " rel =" stylesheet " />
< script src =" path/to/grapes.min.js " > </ script >
< script src =" path/to/grapesjs-plugin-forms.min.js " > </ script >

< div id =" gjs " > </ div >

< script type =" text/javascript " >
  var editor = grapesjs . init ( {
      fromElement : 1 ,
      container : '#gjs' ,
      plugins : [ 'grapesjs-plugin-forms' ] ,
      pluginsOpts : {
        'grapesjs-plugin-forms' : { /* ...options */ }
      }
  } ) ;
</ script >

جافا سكريبت الحديثة 

 import grapesjs from 'grapesjs' ;
import gjsForms from 'grapesjs-plugin-forms' ;

const editor = grapesjs . init ( {
  container : '#gjs' ,
  // ...
  plugins : [ gjsForms ] ,
  pluginsOpts : {
    [ gjsForms ] : { /* options */ }
  }
  // or
  plugins : [
    editor => gjsForms ( editor , { /* options */ } ) ,
  ] ,
} ) ;

i18n

إذا كنت بحاجة إلى تغيير بعض ملصقات المكونات/السمات ، فيمكنك الاعتماد على وحدة I18N ، هنا مثال كامل على اللغة الافتراضية en 

 editor . I18n . addMessages ( {
  en : {
    blockManager : {
      labels : {
        form : 'EN Form' ,
        input : 'EN Input' ,
        textarea : 'EN Textarea' ,
        select : 'EN Select' ,
        checkbox : 'EN Checkbox' ,
        radio : 'EN Radio' ,
        button : 'EN Button' ,
        label : 'EN Label' ,
      } ,
      categories : {
        forms : 'EN Forms' ,
      }
    } ,
    domComponents : {
      names : {
        form : 'EN Form' ,
        input : 'EN Input' ,
        textarea : 'EN Textarea' ,
        select : 'EN Select' ,
        checkbox : 'EN Checkbox' ,
        radio : 'EN Radio' ,
        button : 'EN Button' ,
        label : 'EN Label' ,
      } ,
    } ,
    traitManager : {
      traits : {
        labels : {
          method : 'EN Method' ,
          action : 'EN Action' ,
          name : 'EN Name' ,
          placeholder : 'EN Placeholder' ,
          type : 'EN Type' ,
          required : 'EN Required' ,
          options : 'EN Options' ,
          id : 'EN Id' ,
          for : 'EN For' ,
          value : 'EN Value' ,
          checked : 'EN Checked' ,
          text : 'EN Text' ,
        } ,
        options : {
          type : {
            text : 'EN Text' ,
            email : 'EN Email' ,
            password : 'EN Password' ,
            number : 'EN Number' ,
            submit : 'EN Submit' ,
            reset : 'EN Reset' ,
            button : 'EN Button' ,
          }
        }
      } ,
    } ,
  }
} ) ;

تطوير

استنساخ المستودع 

$ git clone https://github.com/GrapesJS/components-forms.git
$ cd grapesjs-plugin-forms

تثبيته 

$ npm i

ابدأ خادم DEV 

$ npm start

رخصة

BSD 3 طبقة

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل