ngx inline editor Téléchargement - ngx inline editor Téléchargement du code source

Composant (démo) de l'éditeur en ligne indigène (version 4+) (démo)

Suivez-moi pour être informé des nouvelles versions.

NGX-Inline-Editor est une bibliothèque d'Angular (version 4+) qui vous permet de créer des éléments modifiables. Une telle technique est également connue sous le nom de click-to-édition ou d'édition sur place . Il est basé sur des idées d'angulaires-xéditables qui se développent dans AngularJS.

Version 0.1.0

Dépendances

Fondamentalement, cela ne dépend d'aucune bibliothèque sauf Angular4 lui-même. Pour les thèmes, vous devrez peut-être inclure Twitter Bootstrap CSS.

Version angulaire 4+

Angular 4 est maintenant stable. Par conséquent, si vous rencontrez des erreurs à l'aide de cette lib, assurez-vous que votre version d'Angular est compatible. La version actuelle utilisée pour développer cette lib est angulaire4 ^ 4.0.0 .

Commandes et fonctionnalités

Démarrage rapide

Une façon recommandée d'installer NGX-Inline Editor est via NPM Package Manager à l'aide de la commande suivante:

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

Incluez le thème de base ou configurez vos propres styles qui sont dans le chemin suivant:

dist/themes/bootstrap.css

Incluez Twitter Bootstrap et Fontawesome dans votre projet.

Usage

Angulaire (4+) et plus tard

Importez en InlineEditorModule dans les modules de votre application:

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

@ NgModule ( {
  imports : [
    InlineEditorModule
  ]
} )

Cela rend tous les composants @qontu/ngx-inline-editor disponibles pour une utilisation dans les composants de votre application.

Exemple simple

Vous pouvez trouver un exemple complet ici

 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

En ligne

Texte

 < 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 ] Spécifie l'élément de type <input> à afficher.
onSave [ event handler ] L'expression spécifiée sera invoquée chaque fois que le formulaire est enregistré via un clic sur le bouton Enregistrer. L'argument $event sera le rendement de la valeur de l'envoi d'entrée.
onError [ event handler ] L'expression spécifiée sera invoquée chaque fois que le formulaire est enregistré via un clic sur le bouton Enregistrer et qu'une erreur est provoquée (exemple: la valeur n'est pas entre min et max).
name [ string ] définit le nom d'un élément <input> . La valeur par défaut n'est undefined .
size [ number ] définit la largeur, en caractères, d'un élément <input> . La valeur par défaut est 8 .
disabled [ boolean ] Si défini sur true , un élément d'entrée désactivé est inutilisable et non cliquable. La valeur par défaut est false .
min [ number ] L'attribut Min spécifie la valeur minimale pour un élément <input> . La valeur par défaut est 1 .
max [ number ] L'attribut max spécifie la valeur maximale pour un élément <input> . La valeur par défaut est Infinity .

Mot de passe

 < 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 ] Spécifie l'élément de type <input> à afficher.
onSave [ event handler ] L'expression spécifiée sera invoquée chaque fois que le formulaire est enregistré via un clic sur le bouton Enregistrer. L'argument $event sera le rendement de la valeur de l'envoi d'entrée.
onError [ event handler ] L'expression spécifiée sera invoquée chaque fois que le formulaire est enregistré via un clic sur le bouton Enregistrer et qu'une erreur est provoquée (exemple: la valeur n'est pas entre min et max).
name [ string ] définit le nom d'un élément <input> . La valeur par défaut n'est undefined .
size [ number ] définit la largeur, en caractères, d'un élément <input> . La valeur par défaut est 8 .
disabled [ boolean ] Si défini sur true , un élément d'entrée désactivé est inutilisable et non cliquable. La valeur par défaut est false .
min [ number ] L'attribut Min spécifie la valeur minimale pour un élément <input> . La valeur par défaut est 1 .
max [ number ] L'attribut max spécifie la valeur maximale pour un élément <input> . La valeur par défaut est 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 ] Spécifie l'élément de type <input> à afficher.
onSave [ event handler ] L'expression spécifiée sera invoquée chaque fois que le formulaire est enregistré via un clic sur le bouton Enregistrer. L'argument $event sera le rendement de la valeur de l'envoi d'entrée.
onError [ event handler ] L'expression spécifiée sera invoquée chaque fois que le formulaire est enregistré via un clic sur le bouton Enregistrer et qu'une erreur est provoquée (exemple: la valeur n'est pas entre min et max).
name [ string ] définit le nom d'un élément <input> . La valeur par défaut n'est undefined .
size [ number ] définit la largeur, en caractères, d'un élément <input> . La valeur par défaut est 8 .
disabled [ boolean ] Si défini sur true , un élément d'entrée désactivé est inutilisable et non cliquable. La valeur par défaut est false .
cols [ number ] spécifie la largeur visible d'une zone de texte. La valeur par défaut est 50 .
rows [ number ] spécifient la hauteur visible d'une zone de texte. La valeur par défaut est 4 .
min [ number ] L'attribut Min spécifie la valeur minimale pour un élément <input> . La valeur par défaut est 1 .
max [ number ] L'attribut max spécifie la valeur maximale pour un élément <input> . La valeur par défaut est Infinity .

Sélectionner

Exemple de base

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

type [ string ] Spécifie l'élément de type <input> à afficher.
onSave [ event handler ] L'expression spécifiée sera invoquée chaque fois que le formulaire est enregistré via un clic sur le bouton Enregistrer. L'argument $event sera le rendement de la valeur de l'envoi d'entrée.
name [ string ] définit le nom d'un élément <input> . La valeur par défaut n'est undefined .
disabled [ boolean ] Si défini sur true , un élément d'entrée désactivé est inutilisable et non cliquable. La valeur par défaut est false .
options [ Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string } ] tableau d'éléments à partir desquels sélectionner. Devrait être un tableau d'objets avec des propriétés value et text . Est possible de configurer les paramètres de valeur clé à l'aide d'un objet qui spécifie ces champs et données.

Code de type:

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

  }

Exemple de configuration du paramètre

editableSelect [ number ] Spécifie la valeur par défaut de la sélection.
editableSelectOptions [ Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string } ] spécifie le tableau d'éléments à partir desquels sélectionner. Devrait être un tableau d'objets avec des propriétés value et text . Est possible de configurer les paramètres de valeur clé à l'aide d'un objet qui spécifie ces champs et données.

Code de type:

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

  }

Exemple des enfants

Est possible de configurer des sous-niveaux / enfants pour générer la sélection à l'aide d'un tableau d'objets appelés children .

Code de type:

 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

Composants vides

  < 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 ] Spécifie le message par défaut à afficher s'il n'y a pas de ngmodel pour le composant. Si le type est select , l'élément sélectionné par défaut est le premier élément du tableau options .

Style / thème

L' inline-editor a le thème de base suivant que vous pouvez trouver dans 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;
}

Intégration avec d'autres bibliothèques NGX

ngx-data-table

Exemple utilisant une table (démo) angular2-data (démo) Version 0.1.0-Angular2-Data-Table

Dépannage

Veuillez suivre ces directives lors de la déclaration de bogues et de demandes de fonctionnalités:

Utilisez la carte GitHub Issues pour signaler les bogues et les demandes de fonctionnalités (pas notre adresse e-mail)
Veuillez toujours écrire des étapes pour reproduire l'erreur. De cette façon, nous pouvons nous concentrer sur la correction du bug, sans nous gratter la tête en essayant de le reproduire.

Merci de votre compréhension!

Développement

Pour générer tous les fichiers *.js , *.js.map et *.d.ts :
npm run build
Pour déboguer:
npm run build:watch

Auteurs

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

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

Licence

La licence MIT (voir le fichier de licence pour le texte intégral) -

Développer