ngx inline editor скачать - ngx inline editor исходный код скачать исходный код

Нативный пользовательский интерфейс встроенного направления (версия 4+) Компонент (демонстрация)

Следуйте за мной, чтобы быть уведомленным о новых выпусках.

NGX-Inline-Editor-это библиотека угловой (версия 4+), которая позволяет создавать редактируемые элементы. Такая техника также известна как клик-редакция или редактирование на месте . Он основан на идеях Angular-xeditable, которые развиваются в AngularJS.

Версия 0.1.0

Зависимости

В основном это не зависит от каких -либо библиотек, кроме самого Angular4. Для тем, вам может потребоваться включить CSS Twitter Bootstrap.

Угловая версия 4+

Angular 4 теперь стабилен. Следовательно, если они сталкиваются с ошибками с использованием этой LIB, убедитесь, что ваша версия Angular совместима. Текущая версия, используемая для разработки этой LIB, является Angular4 ^4.0.0 .

Управление и функции

Быстрый старт

Рекомендуемый способ установить NGX-inline-Editor -через диспетчер пакетов NPM, используя следующую команду:

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

Включите основную тему или настройте свои собственные стили, которые находятся в следующем пути:

dist/themes/bootstrap.css

Включите в свой проект Bootstrap и Fontawesome.

Использование

Угловой (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

Inlineeditordirectives

Текст

 < 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 ] Определяет элемент Type <input> для отображения.
onSave [ event handler ] Указанное выражение будет вызвано всякий раз, когда форма сохраняется через кнопку «Нажмите на сохранение». Аргументом $event будет возвратом значения входной отправки.
onError [ event handler ] Указанное выражение будет вызвано всякий раз, когда форма сохраняется через кнопку «Нажмите на сохранение», и вызвана ошибка (пример: значение не между минем и максимум).
name [ string ] Определяет имя элемента <input> . По умолчанию undefined .
size [ number ] определяет ширину в символах элемента <input> . По умолчанию 8 .
disabled [ boolean ] Если установлено в true , элемент отключенного ввода не является использованием и не используется. По умолчанию false .
min [ number ] атрибут min определяет минимальное значение для элемента <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 >

type [ string ] Определяет элемент Type <input> для отображения.
onSave [ event handler ] Указанное выражение будет вызвано всякий раз, когда форма сохраняется через кнопку «Нажмите на сохранение». Аргументом $event будет возвратом значения входной отправки.
onError [ event handler ] Указанное выражение будет вызвано всякий раз, когда форма сохраняется через кнопку «Нажмите на сохранение», и вызвана ошибка (пример: значение не между минем и максимум).
name [ string ] Определяет имя элемента <input> . По умолчанию undefined .
size [ number ] определяет ширину в символах элемента <input> . По умолчанию 8 .
disabled [ boolean ] Если установлено в true , элемент отключенного ввода не является использованием и не используется. По умолчанию false .
min [ number ] атрибут min определяет минимальное значение для элемента <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 >

type [ 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 ] атрибут min определяет минимальное значение для элемента <input> . По умолчанию 1 .
max [ number ] атрибут Max определяет максимальное значение для элемента <input> . По умолчанию Infinity .

Выбирать

Основной пример

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

type [ 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 . Возможно настройка параметров клавиш значения с использованием объекта, который указывает эти поля и данные.

Код 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 ) ;

  }

Пример конфигурации параметра

editableSelect [ number ] Указывает значение по умолчанию SELECT.
editableSelectOptions [ Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string } ] Указывает массив элементов, из которых можно выбрать. Должен быть массив объектов со value и свойствами text . Возможно настройка параметров клавиш значения с использованием объекта, который указывает эти поля и данные.

Код 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 ) ;

  }

Дети пример

Возможно настройка Sublevels/детей, чтобы генерировать выбор, используя массив объектов, называемых children .

Код 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'
  }

Версия 0.1.0-Optgroup

Пустые компоненты

  < 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-библиотеками

ngx-data-stable

Пример с использованием Angular2-Data-Table (демонстрация) Версия 0.1.0-Angular2-DATA-Table

Поиск неисправностей

Пожалуйста, следуйте этим рекомендациям при сообщении об ошибках и запросах функций:

Используйте доску GitHub, чтобы сообщать об ошибках и запросах функций (не наш адрес электронной почты)
Пожалуйста, всегда пишите шаги, чтобы воспроизвести ошибку. Таким образом, мы можем сосредоточиться на исправлении ошибки, не царапая наши головы, пытаясь воспроизвести ее.

Спасибо за понимание!

Разработка

Чтобы сгенерировать все *.js , *.js.map и *.d.ts файлы:
npm run build
Отладки:
npm run build:watch

Авторы

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

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

Лицензия

Лицензия MIT (см. Файл лицензии для полного текста) -

Расширять