ngx inline editor Download - ngx inline editor -Quellcode herunterladen

Native UI-Inline-EDOR-Angular-Komponente (Version 4+) (Demo)

Folgen Sie mir, um über neue Veröffentlichungen informiert zu werden.

Der NGX-Inline-Eduditor ist eine Bibliothek mit Angular (Version 4+), mit der Sie bearbeitbare Elemente erstellen können. Eine solche Technik wird auch als Klick-zu-Edit- oder Bearbeitungsstelle bezeichnet. Es basiert auf Ideen von Angular-Xeditable, die in AngularJs entwickelt wurden.

Version 0.1.0

Abhängigkeiten

Grundsätzlich hängt es nicht von Bibliotheken ab, außer Angular4 selbst. Für Themen müssen Sie möglicherweise Twitter Bootstrap CSS einbeziehen.

Angular 4+ Version

Angular 4 ist jetzt stabil. Wenn Sie auf Fehler mit dieser LIB stoßen, stellen Sie daher sicher, dass Ihre Version von Angular kompatibel ist. Die aktuelle Version, die zur Entwicklung dieser LIB verwendet wird, ist Angular4 ^4.0.0 .

Steuerelemente und Funktionen

Schneller Start

Eine empfohlene Methode zur Installation von NGX-Inline-Editor erfolgt über den folgenden Befehl über den NPM-Paketmanager:

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

Fügen Sie das grundlegende Thema hinzu oder konfigurieren Sie Ihre eigenen Stile, die sich auf dem folgenden Pfad befinden:

dist/themes/bootstrap.css

Fügen Sie Twitter Bootstrap und FontaWesome in Ihr Projekt auf.

Verwendung

Angular (4+) und später

Importieren Sie InlineEditorModule in die Module Ihrer App:

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

@ NgModule ( {
  imports : [
    InlineEditorModule
  ]
} )

Dadurch können alle @qontu/ngx-inline-editor Komponenten für die Verwendung in Ihren App-Komponenten zur Verfügung stehen.

Einfaches Beispiel

Hier finden Sie ein vollständiges Beispiel

 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

Text

 < 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 ] an, gibt das zu angezeigte Typ <input> -Element an.
onSave [ event handler ] Der angegebene Ausdruck wird aufgerufen, wenn das Formular über eine Klick auf die Schaltfläche Speichern speichert wird. Das $event Ereignisargument ist die Wertrückgabe des Eingangssendens.
onError [ event handler ] Der angegebene Ausdruck wird aufgerufen, wenn das Formular über eine Klick auf die Schaltfläche Speichern speichert und ein Fehler provoziert wird (Beispiel: Der Wert ist nicht zwischen min und max).
name [ string ] definiert den Namen eines <input> -Elements. Standardeinstellung ist undefined .
size [ number ] definiert die Breite in Zeichen eines <input> -Elements. Standard ist 8 .
disabled [ boolean ] Wenn auf true eingestellt ist, ist ein deaktiviertes Eingangselement unbrauchbar und nicht klickbar. Standard ist false .
min [ number ] Das min -Attribut gibt den Mindestwert für ein <input> -Element an. Standard ist 1 .
max [ number ] Das Max -Attribut gibt den Maximalwert für ein <input> -Element an. Standard ist Infinity .

Passwort

 < 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 ] an, gibt das zu angezeigte Typ <input> -Element an.
onSave [ event handler ] Der angegebene Ausdruck wird aufgerufen, wenn das Formular über eine Klick auf die Schaltfläche Speichern speichert wird. Das $event Ereignisargument ist die Wertrückgabe des Eingangssendens.
onError [ event handler ] Der angegebene Ausdruck wird aufgerufen, wenn das Formular über eine Klick auf die Schaltfläche Speichern speichert und ein Fehler provoziert wird (Beispiel: Der Wert ist nicht zwischen min und max).
name [ string ] definiert den Namen eines <input> -Elements. Standardeinstellung ist undefined .
size [ number ] definiert die Breite in Zeichen eines <input> -Elements. Standard ist 8 .
disabled [ boolean ] Wenn auf true eingestellt ist, ist ein deaktiviertes Eingangselement unbrauchbar und nicht klickbar. Standard ist false .
min [ number ] Das min -Attribut gibt den Mindestwert für ein <input> -Element an. Standard ist 1 .
max [ number ] Das Max -Attribut gibt den Maximalwert für ein <input> -Element an. Standard ist Infinity .

Textbereich

 < 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 ] an, gibt das zu angezeigte Typ <input> -Element an.
onSave [ event handler ] Der angegebene Ausdruck wird aufgerufen, wenn das Formular über eine Klick auf die Schaltfläche Speichern speichert wird. Das $event Ereignisargument ist die Wertrückgabe des Eingangssendens.
onError [ event handler ] Der angegebene Ausdruck wird aufgerufen, wenn das Formular über eine Klick auf die Schaltfläche Speichern speichert und ein Fehler provoziert wird (Beispiel: Der Wert ist nicht zwischen min und max).
name [ string ] definiert den Namen eines <input> -Elements. Standardeinstellung ist undefined .
size [ number ] definiert die Breite in Zeichen eines <input> -Elements. Standard ist 8 .
disabled [ boolean ] Wenn auf true eingestellt ist, ist ein deaktiviertes Eingangselement unbrauchbar und nicht klickbar. Standard ist false .
cols [ number ] Gibt die sichtbare Breite eines Textbereichs an. Standard ist 50 .
rows [ number ] Gibt die sichtbare Höhe eines Textbereichs an. Standard ist 4 .
min [ number ] Das min -Attribut gibt den Mindestwert für ein <input> -Element an. Standard ist 1 .
max [ number ] Das Max -Attribut gibt den Maximalwert für ein <input> -Element an. Standard ist Infinity .

Wählen

Grundlegendes Beispiel

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

type [ string ] an, gibt das zu angezeigte Typ <input> -Element an.
onSave [ event handler ] Der angegebene Ausdruck wird aufgerufen, wenn das Formular über eine Klick auf die Schaltfläche Speichern speichert wird. Das $event Ereignisargument ist die Wertrückgabe des Eingangssendens.
name [ string ] definiert den Namen eines <input> -Elements. Standardeinstellung ist undefined .
disabled [ boolean ] Wenn auf true eingestellt ist, ist ein deaktiviertes Eingangselement unbrauchbar und nicht klickbar. Standard ist false .
options [ Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string } ] Array von Elementen, aus denen ausgewählt werden soll. Sollte eine Reihe von Objekten mit value und text sein. Ist möglich, um Schlüsselwertparameter mithilfe eines Objekts zu konfigurieren, das diese Felder und Daten angibt.

TypeScript -Code:

  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 ) ;

  }

Das Konfigurationsbeispiel des Parameters

editableSelect [ number ] Gibt den Wert des Standardwerts des SELECT an.
editableSelectOptions [ Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string } ] Gibt das Array der Elemente an, aus denen ausgewählt werden soll. Sollte eine Reihe von Objekten mit value und text sein. Ist möglich, um Schlüsselwertparameter mithilfe eines Objekts zu konfigurieren, das diese Felder und Daten angibt.

TypeScript -Code:

  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 ) ;

  }

Beispiel für Kinder

Ist möglich, Sublevels/Kinder zu konfigurieren, um die Auswahl mit einem Array von Objekten zu generieren, die als children bezeichnet werden.

TypeScript -Code:

 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'
  }

Version 0.1.0-optgroup

Leere Komponenten

  < 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 ] Gibt die Standardmeldung an, die angezeigt werden soll, wenn nicht ngmodel für die Komponente vorhanden ist. Wenn der Typ select ist, ist das Standardelement für ausgewählte Standarde das erste Element des options -Array.

Stil/Thema

Der inline-editor hat das folgende Grundthema, das Sie in dist/themes/bootstrap.css finden können:

 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;
}

Integration mit anderen NGX-Library

Ngx-Daten-Tabelle

Beispiel mit Angular2-Data-Table (Demo) Version 0.1.0-angular2-data-table

Fehlerbehebung

Bitte befolgen Sie diese Richtlinien, wenn Sie Fehler und Feature -Anfragen melden:

Verwenden Sie GitHub Probleme Board, um Fehler und Feature -Anfragen zu melden (nicht unsere E -Mail -Adresse)
Bitte schreiben Sie immer Schritte, um den Fehler zu reproduzieren. Auf diese Weise können wir uns darauf konzentrieren, den Fehler zu reparieren und uns nicht an den Kopf zu kratzen, um ihn zu reproduzieren.

Danke fürs Verständnis!

Entwicklung

So generieren Sie alle *.js , *.js.map und *.d.ts Dateien:
npm run build
Zu debuggen:
npm run build:watch

Autoren

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

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

Lizenz

Die MIT -Lizenz (siehe Lizenzdatei für den Volltext) -

Expandieren