Beranda>Sumber daya pembuatan situs web>Sumber daya lainnya
Unduh

Komponen Native UI Inline-Editor Angular (Versi 4+) (Demo)

Ikuti saya untuk diberi tahu tentang rilis baru.

NGX-Inline-Editor adalah perpustakaan Angular (versi 4+) yang memungkinkan Anda membuat elemen yang dapat diedit. Teknik semacam itu juga dikenal sebagai klik-ke-edit atau edit di tempat . Ini didasarkan pada ide-ide yang dapat dikurung sudut yang dikembangkan dalam AngularJS.

Versi 0.1.0

Dependensi

Pada dasarnya itu tidak bergantung pada perpustakaan apa pun kecuali Angular4 itu sendiri. Untuk tema, Anda mungkin perlu menyertakan CSS Bootstrap Twitter.

Versi Angular 4+

Angular 4 sekarang stabil. Oleh karena itu, jika menemukan kesalahan menggunakan Lib ini, pastikan versi sudut Anda kompatibel. Versi saat ini yang digunakan untuk mengembangkan lib ini adalah Angular4 ^4.0.0 .

Kontrol & Fitur

  • teks
  • TexTarea
  • memilih
  • kotak centang
  • radio
  • tanggal
  • waktu
  • datetime
  • Input HTML5
    • pola
    • nomor
    • jangkauan
  • typeead
  • UI-select
  • bentuk kompleks
  • baris yang dapat diedit
  • kolom yang dapat diedit
  • Tabel yang dapat diedit
  • tema

Awal yang cepat

  1. Cara yang disarankan untuk menginstal ngx-inline-editor adalah melalui NPM Package Manager menggunakan perintah berikut:

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

  1. Sertakan tema dasar atau konfigurasikan gaya Anda sendiri yang ada di jalur berikut:

dist/themes/bootstrap.css

  1. Sertakan Twitter Bootstrap dan Fontawesome dalam proyek Anda.

Penggunaan

Angular (4+) dan nanti

Impor InlineEditorModule ke dalam modul aplikasi Anda: 

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

@ NgModule ( {
  imports : [
    InlineEditorModule
  ]
} )

Ini membuat semua komponen @qontu/ngx-inline-editor tersedia untuk digunakan dalam komponen aplikasi Anda.

Contoh sederhana

Anda dapat menemukan contoh lengkap di sini 

 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

Inlineeditordireectives

Teks 
 < 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 ] Menentukan elemen Type <input> yang akan ditampilkan.
  • onSave [ event handler ] Ekspresi yang ditentukan akan dipanggil setiap kali formulir disimpan melalui tombol Simpan Klik. Argumen $event akan menjadi pengembalian nilai kirim input.
  • onError [ event handler ] Ekspresi yang ditentukan akan dipanggil setiap kali formulir disimpan melalui tombol Simpan pada Simpan dan kesalahan diprovokasi (Contoh: Nilai tidak antara min dan maks).
  • name [ string ] mendefinisikan nama elemen <input> . Default undefined .
  • size [ number ] mendefinisikan lebar, dalam karakter, elemen <input> . Default adalah 8 .
  • disabled [ boolean ] Jika diatur ke true , elemen input yang dinonaktifkan tidak dapat digunakan dan tidak dapat diklickable. Default false .
  • min [ number ] Atribut Min menentukan nilai minimum untuk elemen <input> . Default adalah 1 .
  • max [ number ] Atribut MAX menentukan nilai maksimum untuk elemen <input> . Defaultnya Infinity .
Kata sandi 
 < 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 ] Menentukan elemen Type <input> yang akan ditampilkan.
  • onSave [ event handler ] Ekspresi yang ditentukan akan dipanggil setiap kali formulir disimpan melalui tombol Simpan Klik. Argumen $event akan menjadi pengembalian nilai kirim input.
  • onError [ event handler ] Ekspresi yang ditentukan akan dipanggil setiap kali formulir disimpan melalui tombol Simpan pada Simpan dan kesalahan diprovokasi (Contoh: Nilai tidak antara min dan maks).
  • name [ string ] mendefinisikan nama elemen <input> . Default undefined .
  • size [ number ] mendefinisikan lebar, dalam karakter, elemen <input> . Default adalah 8 .
  • disabled [ boolean ] Jika diatur ke true , elemen input yang dinonaktifkan tidak dapat digunakan dan tidak dapat diklickable. Default false .
  • min [ number ] Atribut Min menentukan nilai minimum untuk elemen <input> . Default adalah 1 .
  • max [ number ] Atribut MAX menentukan nilai maksimum untuk elemen <input> . Defaultnya 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 ] Menentukan elemen Type <input> yang akan ditampilkan.
  • onSave [ event handler ] Ekspresi yang ditentukan akan dipanggil setiap kali formulir disimpan melalui tombol Simpan Klik. Argumen $event akan menjadi pengembalian nilai kirim input.
  • onError [ event handler ] Ekspresi yang ditentukan akan dipanggil setiap kali formulir disimpan melalui tombol Simpan pada Simpan dan kesalahan diprovokasi (Contoh: Nilai tidak antara min dan maks).
  • name [ string ] mendefinisikan nama elemen <input> . Default undefined .
  • size [ number ] mendefinisikan lebar, dalam karakter, elemen <input> . Default adalah 8 .
  • disabled [ boolean ] Jika diatur ke true , elemen input yang dinonaktifkan tidak dapat digunakan dan tidak dapat diklickable. Default false .
  • cols [ number ] Menentukan lebar yang terlihat dari area teks. Default adalah 50 .
  • rows [ number ] Menentukan ketinggian yang terlihat dari area teks. Default adalah 4 .
  • min [ number ] Atribut Min menentukan nilai minimum untuk elemen <input> . Default adalah 1 .
  • max [ number ] Atribut MAX menentukan nilai maksimum untuk elemen <input> . Defaultnya Infinity .
Memilih
Contoh Dasar 
 < inline-editor
        type =" select "
        [(ngModel)] =" editableSelect "
        (onSave) =" saveEditable($event) "
        name =" editableSelect "
        disabled =" false "
        [options] =" editableSelectOptions " > </ inline-editor >
  • type [ string ] Menentukan elemen Type <input> yang akan ditampilkan.
  • onSave [ event handler ] Ekspresi yang ditentukan akan dipanggil setiap kali formulir disimpan melalui tombol Simpan Klik. Argumen $event akan menjadi pengembalian nilai kirim input.
  • name [ string ] mendefinisikan nama elemen <input> . Default undefined .
  • disabled [ boolean ] Jika diatur ke true , elemen input yang dinonaktifkan tidak dapat digunakan dan tidak dapat diklickable. Default false .
  • options [ Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string } ] array item dari mana untuk dipilih. Harus berupa array objek dengan value dan properti text . Dimungkinkan untuk mengonfigurasi parameter nilai kunci menggunakan objek yang menentukan bidang dan data ini.

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

  }
Contoh konfigurasi parameter
  • editableSelect [ number ] Menentukan nilai default dari Select.
  • editableSelectOptions [ Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string } ] Menentukan array item yang akan dipilih. Harus berupa array objek dengan value dan properti text . Dimungkinkan untuk mengonfigurasi parameter nilai kunci menggunakan objek yang menentukan bidang dan data ini.

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

  }
Contoh Anak

Dimungkinkan untuk mengonfigurasi sublevel/anak -anak untuk menghasilkan pilih menggunakan array objek yang disebut children .

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

Versi 0.1.0-optgroup

Komponen kosong 

  < 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 ] Menentukan pesan default yang akan ditampilkan jika tidak ada ngmodel untuk komponen. Jika tipe select maka elemen yang dipilih default adalah elemen pertama dari array options .

Gaya/Tema

inline-editor memiliki tema dasar berikut yang dapat Anda temukan di 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;
}

Integrasi dengan perpustakaan NGX lainnya

NGX-Data-Table

Contoh Menggunakan Angular2-Data-Table (Demo) Versi 0.1.0-Angular2-Data-Table

Pemecahan masalah

Harap ikuti pedoman ini saat melaporkan bug dan permintaan fitur:

  1. Gunakan Dewan Masalah GitHub untuk melaporkan bug dan permintaan fitur (bukan alamat email kami)
  2. Harap selalu tulis langkah -langkah untuk mereproduksi kesalahan. Dengan begitu kita dapat fokus untuk memperbaiki bug, tidak menggaruk -garuk kepala kita mencoba mereproduksi.

Terima kasih sudah mengerti!

Perkembangan

  1. Untuk menghasilkan semua *.js , *.js.map dan *.d.ts file:

    npm run build

  2. Untuk men -debug:

    npm run build:watch

Penulis

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

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

Lisensi

Lisensi MIT (lihat file lisensi untuk teks lengkap) -

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua