ngx inline editor

기본 UI 인라인 편집자 각도 (버전 4+) 구성 요소 (DEMO)

새로운 릴리스에 대해 알리기 위해 나를 따라 가십시오.

NGX 인라인 편집자는 편집 가능한 요소를 만들 수있는 각도 (버전 4+)의 라이브러리입니다. 이러한 기술은 클릭 대리 또는 편집 장소 라고도합니다. AngularJS에서 개발 된 각도 록스 가능성의 아이디어를 기반으로합니다.

의존성

기본적으로 Angular4 자체를 제외한 라이브러리에 의존하지 않습니다. 테마의 경우 Twitter 부트 스트랩 CS를 포함해야 할 수도 있습니다.

Angular 4+ 버전

Angular 4는 이제 안정적입니다. 따라서이 LIB를 사용하여 오류가 발생하면 Angular 버전이 호환되는지 확인하십시오. 이 lib을 개발하는 데 사용되는 현재 버전은 Angular4 ^4.0.0 입니다.

컨트롤 및 기능

• 텍스트
• Textarea
• 선택하다
• 확인란
• 라디오
• 날짜
• 시간
• DateTime
• HTML5 입력
  • 무늬
  • 숫자
  • 범위
• TypeAhead
• UI 선택
• 복잡한 형태
• 편집 가능한 행
• 편집 가능한 열
• 편집 가능한 테이블
• 테마

빠른 시작

1. NGX-Inline-Editor를 설치하는 권장 방법은 다음 명령을 사용하여 NPM 패키지 관리자를 통해 이루어집니다.

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

2. 기본 테마를 포함 시키거나 다음 경로에있는 자신의 스타일을 구성하십시오.

dist/themes/bootstrap.css

3. 프로젝트에 Twitter 부트 스트랩과 Fontawesome을 포함시킵니다.

용법

Angular (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

InlineEditordivers

텍스트

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

• [ string ] type 표시 할 유형 <input> 요소를 지정합니다.
• onSave [ event handler ] 지정된 표현식은 저장 버튼을 클릭하여 양식을 저장할 때마다 호출됩니다. $event 인수는 입력 보내기의 값 반환입니다.
• onError [ event handler ] 지정된 표현식은 저장 버튼을 클릭하고 오류가 유발 될 때마다 양식이 저장 될 때마다 호출됩니다 (예 : 값은 최소와 최대 사이에 있지 않음).
• name [ string ] <input> 요소의 이름을 정의합니다. 기본값은 undefined .
• size [ number ]는 <input> 요소의 문자로 너비를 정의합니다. 기본값은 8 입니다.
• disabled [ boolean ] true 로 설정되면 비활성화 된 입력 요소를 사용할 수없고 클릭 할 수 없습니다. 기본값은 false 입니다.
• min [ number ] 최소 속성은 <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 >

• [ string ] type 표시 할 유형 <input> 요소를 지정합니다.
• onSave [ event handler ] 지정된 표현식은 저장 버튼을 클릭하여 양식을 저장할 때마다 호출됩니다. $event 인수는 입력 보내기의 값 반환입니다.
• onError [ event handler ] 지정된 표현식은 저장 버튼을 클릭하고 오류가 유발 될 때마다 양식이 저장 될 때마다 호출됩니다 (예 : 값은 최소와 최대 사이에 있지 않음).
• name [ string ] <input> 요소의 이름을 정의합니다. 기본값은 undefined .
• size [ number ]는 <input> 요소의 문자로 너비를 정의합니다. 기본값은 8 입니다.
• disabled [ boolean ] true 로 설정되면 비활성화 된 입력 요소를 사용할 수없고 클릭 할 수 없습니다. 기본값은 false 입니다.
• min [ number ] 최소 속성은 <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 >

• [ string ] type 표시 할 유형 <input> 요소를 지정합니다.
• onSave [ event handler ] 지정된 표현식은 저장 버튼을 클릭하여 양식을 저장할 때마다 호출됩니다. $event 인수는 입력 보내기의 값 반환입니다.
• onError [ event handler ] 지정된 표현식은 저장 버튼을 클릭하고 오류가 유발 될 때마다 양식이 저장 될 때마다 호출됩니다 (예 : 값은 최소와 최대 사이에 있지 않음).
• name [ string ] <input> 요소의 이름을 정의합니다. 기본값은 undefined .
• size [ number ]는 <input> 요소의 문자로 너비를 정의합니다. 기본값은 8 입니다.
• disabled [ boolean ] true 로 설정되면 비활성화 된 입력 요소를 사용할 수없고 클릭 할 수 없습니다. 기본값은 false 입니다.
• cols [ number ]는 텍스트 영역의 가시 너비를 지정합니다. 기본값은 50 입니다.
• rows [ number ] 텍스트 영역의 가시 높이를 지정합니다. 기본값은 4 입니다.
• min [ number ] 최소 속성은 <input> 요소의 최소값을 지정합니다. 기본값은 1 입니다.
• max [ number ] MAX 속성은 <input> 요소의 최대 값을 지정합니다. 기본값은 Infinity 입니다.

선택하다

기본 예

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

• [ string ] type 표시 할 유형 <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 속성을 가진 객체 배열이어야합니다. 이러한 필드 및 데이터를 지정하는 객체를 사용하여 키 값 매개 변수를 구성 할 수 있습니다.

타이프 스크립트 코드 :

  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 속성을 가진 객체 배열이어야합니다. 이러한 필드 및 데이터를 지정하는 객체를 사용하여 키 값 매개 변수를 구성 할 수 있습니다.

타이프 스크립트 코드 :

  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을 구성하여 children 라는 다양한 객체를 사용하여 선택을 생성 할 수 있습니다.

타이프 스크립트 코드 :

 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-Libraries와의 통합

NGX-DATA 테이블

Angular2-Data-Table 사용 (데모) 사용 예

문제 해결

버그 및 기능 요청을보고 할 때이 지침을 따르십시오.

1. GitHub Issues Board를 사용하여 버그 및 기능 요청을보고합니다 (이메일 주소가 아님)
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

특허

MIT 라이센스 (전체 텍스트의 라이센스 파일 참조) -