Descargar ngx inline editor - Descargar código fuente ngx inline editor

Componente nativo de UI en línea-editor angular (versión 4+) (demostración)

Sígueme para ser notificado sobre nuevos lanzamientos.

NGX-Enline-editor es una biblioteca de Angular (versión 4+) que le permite crear elementos editables. Dicha técnica también se conoce como clic para editar o editar en el lugar . Se basa en ideas de angular-xeditable que se desarrolla en angularjs.

Versión 0.1.0

Dependencias

Básicamente no depende de ninguna biblioteca excepto Angular4 en sí. Para los temas, es posible que deba incluir Twitter Bootstrap CSS.

Versión angular 4+

Angular 4 ahora es estable. Por lo tanto, si encontrar errores utilizando este lib, asegúrese de que su versión de Angular sea compatible. La versión actual utilizada para desarrollar esta lib es Angular4 ^4.0.0 .

Controles y características

Comienzo rápido

Una forma recomendada de instalar NGX-Enline-editor es a través de NPM Package Manager usando el siguiente comando:

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

Incluya el tema básico o configure sus propios estilos que están en la siguiente ruta:

dist/themes/bootstrap.css

Incluya Twitter Bootstrap y Fontawawesome en su proyecto.

Uso

Angular (4+) y luego

Importar InlineEditorModule en los módulos de su aplicación:

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

@ NgModule ( {
  imports : [
    InlineEditorModule
  ]
} )

Esto hace que todos los componentes de @qontu/ngx-inline-editor estén disponibles para su uso en los componentes de su aplicación.

Ejemplo simple

Puedes encontrar un ejemplo completo aquí

 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

InlineEditordordirectores

Texto

 < 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 ] Especifica el elemento Tipo <input> para mostrar.
onSave [ event handler ] La expresión especificada se invocará cada vez que el formulario se guarde a través de un botón de clic en Guardar. El argumento $event será la devolución de valor del envío de entrada.
onError [ event handler ] La expresión especificada se invocará siempre que el formulario se guarde mediante un botón de clic en Guardar y se provoca un error (ejemplo: el valor no es entre min y max).
name [ string ] Define el nombre de un elemento <input> . El valor predeterminado está undefined .
size [ number ] define el ancho, en los caracteres, de un elemento <input> . El valor predeterminado es 8 .
disabled [ boolean ] Si se establece en true , un elemento de entrada deshabilitado es inutilizable y no hace clic. El valor predeterminado es false .
min [ number ] El atributo MIN especifica el valor mínimo para un elemento <input> . El valor predeterminado es 1 .
max [ number ] El atributo Max especifica el valor máximo para un elemento <input> . El valor predeterminado es Infinity .

Contraseña

 < 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 ] Especifica el elemento Tipo <input> para mostrar.
onSave [ event handler ] La expresión especificada se invocará cada vez que el formulario se guarde a través de un botón de clic en Guardar. El argumento $event será la devolución de valor del envío de entrada.
onError [ event handler ] La expresión especificada se invocará siempre que el formulario se guarde mediante un botón de clic en Guardar y se provoca un error (ejemplo: el valor no es entre min y max).
name [ string ] Define el nombre de un elemento <input> . El valor predeterminado está undefined .
size [ number ] define el ancho, en los caracteres, de un elemento <input> . El valor predeterminado es 8 .
disabled [ boolean ] Si se establece en true , un elemento de entrada deshabilitado es inutilizable y no hace clic. El valor predeterminado es false .
min [ number ] El atributo MIN especifica el valor mínimo para un elemento <input> . El valor predeterminado es 1 .
max [ number ] El atributo Max especifica el valor máximo para un elemento <input> . El valor predeterminado es Infinity .

Textea

 < 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 ] Especifica el elemento Tipo <input> para mostrar.
onSave [ event handler ] La expresión especificada se invocará cada vez que el formulario se guarde a través de un botón de clic en Guardar. El argumento $event será la devolución de valor del envío de entrada.
onError [ event handler ] La expresión especificada se invocará siempre que el formulario se guarde mediante un botón de clic en Guardar y se provoca un error (ejemplo: el valor no es entre min y max).
name [ string ] Define el nombre de un elemento <input> . El valor predeterminado está undefined .
size [ number ] define el ancho, en los caracteres, de un elemento <input> . El valor predeterminado es 8 .
disabled [ boolean ] Si se establece en true , un elemento de entrada deshabilitado es inutilizable y no hace clic. El valor predeterminado es false .
cols [ number ] especifica el ancho visible de un área de texto. El valor predeterminado es 50 .
rows [ number ] especifican la altura visible de un área de texto. El valor predeterminado es 4 .
min [ number ] El atributo MIN especifica el valor mínimo para un elemento <input> . El valor predeterminado es 1 .
max [ number ] El atributo Max especifica el valor máximo para un elemento <input> . El valor predeterminado es Infinity .

Seleccionar

Ejemplo básico

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

type [ string ] Especifica el elemento Tipo <input> para mostrar.
onSave [ event handler ] La expresión especificada se invocará cada vez que el formulario se guarde a través de un botón de clic en Guardar. El argumento $event será la devolución de valor del envío de entrada.
name [ string ] Define el nombre de un elemento <input> . El valor predeterminado está undefined .
disabled [ boolean ] Si se establece en true , un elemento de entrada deshabilitado es inutilizable y no hace clic. El valor predeterminado es false .
options [ Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string } ] Matriz de elementos de los cuales seleccionar. Debe ser una matriz de objetos con value y propiedades text . Es posible configurar los parámetros de valor clave utilizando un objeto que especifique estos campos y datos.

Código mecanografiado:

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

  }

Ejemplo de configuración del parámetro

editableSelect [ number ] Especifica el valor predeterminado de la selección.
editableSelectOptions [ Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string } ] Especifica la matriz de elementos de los cuales seleccionar. Debe ser una matriz de objetos con value y propiedades text . Es posible configurar los parámetros de valor clave utilizando un objeto que especifique estos campos y datos.

Código mecanografiado:

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

  }

Ejemplo de niños

Es posible configurar Sublevels/niños para generar la selección utilizando una matriz de objetos llamados children .

Código mecanografiado:

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

Versión 0.1.0-optgroup

Componentes vacíos

  < 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 ] Especifica el mensaje predeterminado para mostrar si no hay ngmodel para el componente. Si el tipo es select , entonces el elemento seleccionado predeterminado es el primer elemento de la matriz options .

Estilo/tema

El inline-editor tiene el siguiente tema básico que puede encontrar en 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;
}

Integración con otras bibliotecas NGX

mesa de datos ngx

Ejemplo usando Angular2-Data-Table (demo) Versión 0.1.0-angular2-data-table

Solución de problemas

Siga estas pautas al informar errores y solicitudes de funciones:

Use la Junta de problemas de GitHub para informar los errores y las solicitudes de funciones (no nuestra dirección de correo electrónico)
Siempre escriba pasos para reproducir el error. De esa manera, podemos centrarnos en arreglar el error, no rascarse nuestras cabezas tratando de reproducirlo.

¡Gracias por entender!

Desarrollo

Para generar todos los archivos *.js , *.js.map y *.d.ts :
npm run build
Para depurar:
npm run build:watch

Autores

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

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

Licencia

La licencia MIT (consulte el archivo de licencia para el texto completo) -

Expandir