ngx inline editor

مكون محرر واجهة المستخدم الأصلية مضمن (الإصدار 4+) (العرض التوضيحي)

اتبع لي أن يتم إخطاره حول الإصدارات الجديدة.

NGX-Inline-Editor هي مكتبة من Angular (الإصدار 4+) تتيح لك إنشاء عناصر قابلة للتحرير. تُعرف هذه التقنية أيضًا باسم النقر إلى الحفر أو التحرير في مكانها . يعتمد على أفكار القابلة للذات الزاوي والتي تم تطويرها في AngularJS.

التبعيات

في الأساس لا يعتمد على أي مكتبات باستثناء Angular4 نفسها. بالنسبة للموضوعات التي قد تحتاج إلى تضمين Twitter Bootstrap CSS.

نسخة 4+ الزاوي

Angular 4 الآن مستقر. لذلك ، إذا واجهت أخطاء باستخدام هذا lib ، تأكد من أن نسختك من Angular متوافق. الإصدار الحالي المستخدم لتطوير هذا lib هو Angular4 ^4.0.0 .

عناصر التحكم والميزات

• نص
• Textarea
• يختار
• مربع الاختيار
• راديو
• تاريخ
• وقت
• DateTime
• مدخلات HTML5
  • نمط
  • رقم
  • يتراوح
• typeahead
• واجهة المستخدم
• شكل معقد
• صف قابل للتحرير
• عمود قابل للتحرير
• جدول قابل للتحرير
• موضوعات

بداية سريعة

1. هناك طريقة موصى بها لتثبيت NGX-Inline-Editor هي من خلال NPM Package Manager باستخدام الأمر التالي:

npm i @qontu/ngx-inline-editor --save

2. قم بتضمين السمة الأساسية أو تكوين الأنماط الخاصة بك الموجودة في المسار التالي:

dist/themes/bootstrap.css

3. قم بتضمين Twitter Bootstrap و FontawomeS في مشروعك.

الاستخدام

الزاوي (4+) وبعد ذلك

استيراد InlineEditorModule في وحدات التطبيق الخاص بك:

 import { InlineEditorModule } from '@qontu/ngx-inline-editor' ;

@ NgModule ( {
  imports : [
    InlineEditorModule
  ]
} )

هذا يجعل جميع مكونات @qontu/ngx-inline-editor متاحة للاستخدام في مكونات التطبيق الخاصة بك.

مثال بسيط

يمكنك العثور على مثال كامل هنا

 import { Component } from '@angular/core' ;

@ Component ( {
    selector : 'my-component' ,
    template : `
    <div>
        <inline-editor type="text" [(ngModel)]="editableText" (onSave)="saveEditable($event)" name="editableText1" size="8"></inline-editor>
    </div>
    <div>
        <inline-editor type="password" [(ngModel)]="editablePassword" (onSave)="saveEditable($event)"></inline-editor>
    </div>
    <div>
        <inline-editor type="textarea" [(ngModel)]="editableTextArea" (onSave)="saveEditable($event)"> </inline-editor>
    </div>
    <div>
        <inline-editor type="select" [(ngModel)]="editableSelect" (onSave)="saveEditable($event)" [options]="editableSelectOptions"
        value="valor"></inline-editor>
  </div>`
} )
export class MyComponent {
  title = 'My component!' ;

  editableText = 'myText' ;
  editablePassword = 'myPassword' ;
  editableTextArea = 'Text in text area' ;
  editableSelect = 2 ;
  editableSelectOptions = [
    { value : 1 , text : 'status1' } ,
    { value : 2 , text : 'status2' } ,
    { value : 3 , text : 'status3' } ,
    { value : 4 , text : 'status4' }
  ] ;

  saveEditable ( value ) {
    //call to http service
    console . log ( 'http.service: ' + value ) ;
  } 

API

inlineeditordirectives

نص

 < inline-editor
        type =" text "
        [(ngModel)] =" editableText "
        (onSave) =" saveEditable($event) "
        name =" editableText1 "
        size =" 8 "
        disabled =" true "
        min =" 1 "
        max =" 8 "
        pattern =" ^[a-zA-Z]{1,3} "
        (onError) =" myHandleError() " > </ inline-editor >

• type [ string ] يحدد العنصر <input> لعرضه.
• onSave [ event handler ] سيتم استدعاء التعبير المحدد كلما تم حفظ النموذج عبر زر النقر على حفظ. ستكون وسيطة $event هي إرجاع قيمة الإدخال.
• onError [ event handler ] سيتم استدعاء التعبير المحدد كلما تم حفظ النموذج عبر زر النقر على الحفظ ويتم استفزاز خطأ (مثال: القيمة ليست بين دقيقة و MAX).
• يحدد name [ string ] اسم العنصر <input> . الافتراضي undefined .
• يحدد size [ number ] عرض ، في الأحرف ، لعنصر <input> . الافتراضي هو 8 .
• disabled [ boolean ] إذا تم ضبطه على true ، فإن عنصر الإدخال المعاق غير قابل للاستخدام وغير قابل للنقر. الافتراضي false .
• min [ number ] تحدد سمة MIN القيمة الدنيا لعنصر <input> . الافتراضي هو 1 .
• max [ number ] تحدد سمة MAX القيمة القصوى لعنصر <input> . الافتراضي هو Infinity .

كلمة المرور

 < inline-editor
        type =" password "
        [(ngModel)] =" editablePassword "
        (onSave) =" saveEditable($event) "
        name =" editablePassword "
        size =" 8 "
        disabled =" true "
        min =" 1 "
        max =" 8 "
        (onError) =" myHandleError " > </ inline-editor >

• type [ string ] يحدد العنصر <input> لعرضه.
• onSave [ event handler ] سيتم استدعاء التعبير المحدد كلما تم حفظ النموذج عبر زر النقر على حفظ. ستكون وسيطة $event هي إرجاع قيمة الإدخال.
• onError [ event handler ] سيتم استدعاء التعبير المحدد كلما تم حفظ النموذج عبر زر النقر على الحفظ ويتم استفزاز خطأ (مثال: القيمة ليست بين دقيقة و MAX).
• يحدد name [ string ] اسم العنصر <input> . الافتراضي undefined .
• يحدد size [ number ] عرض ، في الأحرف ، لعنصر <input> . الافتراضي هو 8 .
• disabled [ boolean ] إذا تم ضبطه على true ، فإن عنصر الإدخال المعاق غير قابل للاستخدام وغير قابل للنقر. الافتراضي false .
• min [ number ] تحدد سمة MIN القيمة الدنيا لعنصر <input> . الافتراضي هو 1 .
• max [ number ] تحدد سمة MAX القيمة القصوى لعنصر <input> . الافتراضي هو Infinity .

Textarea

 < inline-editor
        type =" textarea "
        [(ngModel)] =" editableTextArea "
        (onSave) =" saveEditable($event) "
        name =" editableTextArea "
        size =" 8 "
        disabled =" true "
        cols =" 50 "
        rows =" 4 "
        min =" 1 "
        max =" 8 "
        (onError) =" myHandleError " > </ inline-editor >

• type [ string ] يحدد العنصر <input> لعرضه.
• onSave [ event handler ] سيتم استدعاء التعبير المحدد كلما تم حفظ النموذج عبر زر النقر على حفظ. ستكون وسيطة $event هي إرجاع قيمة الإدخال.
• onError [ event handler ] سيتم استدعاء التعبير المحدد كلما تم حفظ النموذج عبر زر النقر على الحفظ ويتم استفزاز خطأ (مثال: القيمة ليست بين دقيقة و MAX).
• يحدد name [ string ] اسم العنصر <input> . الافتراضي undefined .
• يحدد size [ number ] عرض ، في الأحرف ، لعنصر <input> . الافتراضي هو 8 .
• disabled [ boolean ] إذا تم ضبطه على true ، فإن عنصر الإدخال المعاق غير قابل للاستخدام وغير قابل للنقر. الافتراضي false .
• يحدد cols [ number ] العرض المرئي لمنطقة النص. الافتراضي هو 50 .
• rows [ number ] تحدد الارتفاع المرئي لمنطقة النص. الافتراضي هو 4 .
• min [ number ] تحدد سمة MIN القيمة الدنيا لعنصر <input> . الافتراضي هو 1 .
• max [ number ] تحدد سمة MAX القيمة القصوى لعنصر <input> . الافتراضي هو Infinity .

يختار

مثال أساسي

 < inline-editor
        type =" select "
        [(ngModel)] =" editableSelect "
        (onSave) =" saveEditable($event) "
        name =" editableSelect "
        disabled =" false "
        [options] =" editableSelectOptions " > </ inline-editor >

• type [ string ] يحدد العنصر <input> لعرضه.
• onSave [ event handler ] سيتم استدعاء التعبير المحدد كلما تم حفظ النموذج عبر زر النقر على حفظ. ستكون وسيطة $event هي إرجاع قيمة الإدخال.
• يحدد name [ string ] اسم العنصر <input> . الافتراضي undefined .
• disabled [ boolean ] إذا تم ضبطه على true ، فإن عنصر الإدخال المعاق غير قابل للاستخدام وغير قابل للنقر. الافتراضي false .
• options [ Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string } ] مجموعة من العناصر التي يجب تحديدها. يجب أن تكون مجموعة من الكائنات ذات value text . من الممكن تكوين معلمات القيمة الرئيسية باستخدام كائن يحدد هذه الحقول والبيانات.

رمز TypeScript:

  editableSelect = 2 ;
  editableSelectOptions = [
    { value : 1 , text : 'status1' } ,
    { value : 2 , text : 'status2' } ,
    { value : 3 , text : 'status3' } ,
    { value : 4 , text : 'status4' }
  ] ;

  saveEditable ( value ) {
    //call to http server
    console . log ( 'http.server: ' + value ) ;

  } 

مثال تكوين المعلمة

• يحدد editableSelect [ number ] القيمة الافتراضية لـ SELECT.
• editableSelectOptions [ Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string } ] يحدد صفيف العناصر التي يجب تحديدها. يجب أن تكون مجموعة من الكائنات ذات value text . من الممكن تكوين معلمات القيمة الرئيسية باستخدام كائن يحدد هذه الحقول والبيانات.

رمز TypeScript:

  editableSelect = 2 ;
  editableSelectOptionsConfiguration = {
    data : [
      { id : 1 , field : 'status1' } ,
      { id : 2 , field : 'status2' } ,
      { id : 3 , field : 'status3' } ,
      { id : 4 , field : 'status4' }
    ] ,
    value : 'id' ,
    text : 'field'
  }

  saveEditable ( value ) {
    //call to http server
    console . log ( 'http.server: ' + value ) ;

  } 

مثال للأطفال

من الممكن تكوين Sublevels/Children لإنشاء Select باستخدام مجموعة من الكائنات التي تسمى children .

رمز TypeScript:

 editableSelectOptionsTwoLevelsDefault = 1 ;
  editableSelectOptionsTwoLevelsConfiguration = {
    data : [
      {
        id : 1 , field : 'status1' ,
        children : [
          { id : 5 , field : 'status1.1' } ,
          { id : 6 , field : 'status1.2' }
        ]
      } ,
      { id : 2 , field : 'status2' } ,
      { id : 3 , field : 'status3' } ,
      {
        id : 4 , field : 'status4' ,
        children : [ { id : 7 , field : 'status4.1' } ]
      }
    ] ,
    value : 'id' ,
    text : 'field'
  } 

مكونات فارغة

  < inline-editor
  type =" text "
  ngModel
  empty =" My custom message "
  (onSave) =" saveEditable($event) "
  (onError) =" handleError "
  name =" editableText1 "
  size =" 8 "
  min =" 3 "
  max =" 5 " > </ inline-editor >

  < inline-editor type =" select "
                [(ngModel)] =" editableSelectDoesntExist "
                (onSave) =" saveEditable($event) "
                [options] =" editableSelectOptionsConfiguration " > </ inline-editor >

• يحدد empty [ string ] الرسالة الافتراضية لعرضها إذا لم يكن هناك ngmodel للمكون. إذا تم select النوع ، فإن العنصر المحدد الافتراضي هو العنصر الأول من مجموعة options .

نمط/موضوع

يحتوي inline-editor على السمة الأساسية التالية التي يمكنك العثور عليها في dist/themes/bootstrap.css :

 a . c-inline-editor {
  text-decoration : none;
  color : # 428bca ;
  border-bottom : dashed 1 px # 428bca ;
  cursor : pointer;
  line-height : 2 ;
  margin-right : 5 px ;
  margin-left : 5 px ;
}
. c-inline-editor . editable-empty ,
. c-inline-editor . editable-empty : hover ,
. c-inline-editor . editable-empty : focus ,
. c-inline-editor . a . editable-empty ,
. c-inline-editor . a . editable-empty : hover ,
. c-inline-editor . a . editable-empty : focus {
  font-style : italic;
  color : # DD1144 ;
  text-decoration : none;
}

. c-inline-editor . inlineEditForm {
  display : inline-block;
  white-space : nowrap;
  margin : 0 ;
}

# inlineEditWrapper {
  display : inline-block;
}

. c-inline-editor . inlineEditForm input ,
. c-inline-editor . select {
  width : auto;
  display : inline;
}

. c-inline-editor . inline-editor-button-group {
  display : inline-block;
}

. c-inline-editor . editInvalid {
  color : # a94442 ;
  margin-bottom : 0 ;
}

. c-inline-editor . error {
  border-color : # a94442 ;
}

[ hidden ]. c-inline-editor {
  display : none;
}

التكامل مع مكاريات NGX الأخرى

طاولة NGX-Data

مثال باستخدام TANGULL2-DATA TABY (DEMO)

استكشاف الأخطاء وإصلاحها

يرجى اتباع هذه الإرشادات عند الإبلاغ عن الأخطاء وطلبات الميزة:

1. استخدم لوحة مشكلات GitHub للإبلاغ عن الأخطاء وطلبات الميزات (وليس عنوان بريدنا الإلكتروني)
2. يرجى دائمًا كتابة خطوات لإعادة إنتاج الخطأ. وبهذه الطريقة يمكننا التركيز على إصلاح الخطأ ، وليس خدش رؤوسنا في محاولة لإعادة إنتاجه.

شكرا لتفهمها!

تطوير

1. لإنشاء كل *.js ، *.js.map و *.d.ts ملفات:

   npm run build

2. لتصحيح:

   npm run build:watch

المؤلفون

Carlos Caballero - https://github.com/caballerog

Antonio Villena - https://github.com/xxxtonixxx

رخصة

ترخيص معهد ماساتشوستس للتكنولوجيا (انظر ملف الترخيص للنص الكامل) -