@311devs/ngx-inline-editor 中文文档教程

发布于 7年前 浏览 29 项目主页 更新于 3年前

Native UI Inline-editor Angular (version 4+) component (demo)

关注我 twitter收到有关新版本的通知。

ngx-inline-editor 是 Angular(版本 4+)的一个库,允许您创建可编辑的元素。 这种技术也称为点击编辑就地编辑。 它基于在 AngularJS 中开发的 angular-xeditable 的思想。

Version 0.1.0

Dependencies

基本上不依赖除了 Angular4 本身之外的任何库。 对于主题,您可能需要包含 Twitter Bootstrap CSS。

Angular 4+ Version

Angular 4 现在稳定了。 因此,如果使用这个遇到错误 lib,确保你的 Angular 版本是兼容的。 用于开发此库的当前版本是 angular4 ^4.0.0

Controls & Features

  • [x] text
  • [x] textarea
  • [x] select
  • [ ] checkbox
  • [ ] radio
  • [ ] date
  • [ ] time
  • [x] datetime
  • [ ] html5 inputs
  • [x] pattern
  • [x] number
  • [x] range
  • [ ] typeahead
  • [ ] ui-select
  • [ ] complex form
  • [ ] editable row
  • [ ] editable column
  • [ ] editable table
  • [x] themes

Quick start

  1. 安装 ngx-inline-editor 的推荐方法是通过 npm 包管理器使用以下命令:

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

  2. 在以下路径中包含基本主题或配置您自己的样式:

dist/themes/bootstrap.css

  1. Include Twitter Bootstrap and FontAwesome in your project.

Usage

Angular (4+) and later

InlineEditorModule 导入您的应用程序模块:

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

@NgModule({
  imports: [
    InlineEditorModule
  ]
})

这使得所有 @qontu/ngx-inline-editor 组件可用于在您的应用程序组件中使用。

Simple Example

这里找到一个完整的例子

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

Text
 <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] Specifies the type <input> element to display.
  • onSave [event handler] The expression specified will be invoked whenever the form is save via a click on save button. The $event argument will be the value return of the input send.
  • onError [event handler] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).
  • name [string] Defines the name of an <input> element. Default is undefined.
  • size [number] Defines the width, in characters, of an <input> element. Default is 8.
  • disabled [boolean] If set to true, a disabled input element is unusable and un-clickable. Default is false.
  • min [number] the min attribute specifies the minimum value for an <input> element. Default is 1.
  • max [number] the max attribute specifies the maximum value for an <input> element. Default is Infinity.
Password
 <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] Specifies the type <input> element to display.
  • onSave [event handler] The expression specified will be invoked whenever the form is save via a click on save button. The $event argument will be the value return of the input send.
  • onError [event handler] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).
  • name [string] Defines the name of an <input> element. Default is undefined.
  • size [number] Defines the width, in characters, of an <input> element. Default is 8.
  • disabled [boolean] If set to true, a disabled input element is unusable and un-clickable. Default is false.
  • min [number] the min attribute specifies the minimum value for an <input> element. Default is 1.
  • max [number] the max attribute specifies the maximum value for an <input> element. Default is 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] Specifies the type <input> element to display.
  • onSave [event handler] The expression specified will be invoked whenever the form is save via a click on save button. The $event argument will be the value return of the input send.
  • onError [event handler] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).
  • name [string] Defines the name of an <input> element. Default is undefined.
  • size [number] Defines the width, in characters, of an <input> element. Default is 8.
  • disabled [boolean] If set to true, a disabled input element is unusable and un-clickable. Default is false.
  • cols [number] Specifies the visible width of a text area. Default is 50.
  • rows [number] Specifies the visible height of a text area. Default is 4.
  • min [number] the min attribute specifies the minimum value for an <input> element. Default is 1.
  • max [number] the max attribute specifies the maximum value for an <input> element. Default is Infinity.
Select
Basic example
<inline-editor
        type="select"
        [(ngModel)]="editableSelect"
        (onSave)="saveEditable($event)"
        name="editableSelect"
        disabled="false"
        [options]="editableSelectOptions"></inline-editor>
  • type [string] Specifies the type <input> element to display.
  • onSave [event handler] The expression specified will be invoked whenever the form is save via a click on save button. The $event argument will be the value return of the input send.
  • name [string] Defines the name of an <input> element. Default is undefined.
  • disabled [boolean] If set to true, a disabled input element is unusable and un-clickable. Default is false.
  • options [Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string }] Array of items from which to select. Should be an array of objects with value and text properties. Is possible to configure key-value parameters using an object that specifies these fields and data.

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

  }
Parameter's configuration example
  • editableSelect [number] Specifies the default's value of the select.
  • editableSelectOptions [Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string }] Specifies the array of items from which to select. Should be an array of objects with value and text properties. Is possible to configure key-value parameters using an object that specifies these fields and data.

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

  }
Children example

可以 代码>。

打字稿代码:

 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

Empty components

  <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] Specifies the default message to display if there are not ngModel for the component. If the type is select then the default selected element is the first element of the options array.

Style/Theme

inline-editor 具有以下基本主题,您可以在 dist/themes/bootstrap.css 中找到:

a.c-inline-editor {
  text-decoration: none;
  color: #428bca;
  border-bottom: dashed 1px #428bca;
  cursor: pointer;
  line-height: 2;
  margin-right: 5px;
  margin-left: 5px;
}
.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;
}

Integration with other ngx-libraries

ngx-data-table

使用 angular2-data-table (演示) Version 0.1.0-angular2-data-table

Troubleshooting

报告错误和功能请求时请遵循以下准则:

  1. Use GitHub Issues board to report bugs and feature requests (not our email address)
  2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

感谢您的理解!

Development

  1. 要生成所有 *.js*.js.map*.d.ts 文件:

    npm run build

  2. 调试:

    npm run build:watch

Authors

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

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

License

MIT 许可证(参见 LICENSE 文件获取全文)-

Native UI Inline-editor Angular (version 4+) component (demo)

Follow me twitterto be notified about new releases.

ngx-inline-editor is a library of Angular (version 4+) that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place. It is based on ideas of angular-xeditable which is developed in AngularJS.

Version 0.1.0

Dependencies

Basically it does not depend on any libraries except Angular4 itself. For themes you may need to include Twitter Bootstrap CSS.

Angular 4+ Version

Angular 4 is now stable. Therefore, if encountering errors using this lib, ensure your version of Angular is compatible. The current version used to develop this lib is angular4 ^4.0.0.

Controls & Features

  • [x] text
  • [x] textarea
  • [x] select
  • [ ] checkbox
  • [ ] radio
  • [ ] date
  • [ ] time
  • [x] datetime
  • [ ] html5 inputs
  • [x] pattern
  • [x] number
  • [x] range
  • [ ] typeahead
  • [ ] ui-select
  • [ ] complex form
  • [ ] editable row
  • [ ] editable column
  • [ ] editable table
  • [x] themes

Quick start

  1. A recommended way to install ngx-inline-editor is through npm package manager using the following command:

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

  2. Include the basic theme or configure your own styles which are in the following path:

dist/themes/bootstrap.css

  1. Include Twitter Bootstrap and FontAwesome in your project.

Usage

Angular (4+) and later

Import InlineEditorModule into your app's modules:

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

@NgModule({
  imports: [
    InlineEditorModule
  ]
})

This makes all the @qontu/ngx-inline-editor components available for use in your app components.

Simple Example

You can find a complete example here

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

Text
 <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] Specifies the type <input> element to display.
  • onSave [event handler] The expression specified will be invoked whenever the form is save via a click on save button. The $event argument will be the value return of the input send.
  • onError [event handler] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).
  • name [string] Defines the name of an <input> element. Default is undefined.
  • size [number] Defines the width, in characters, of an <input> element. Default is 8.
  • disabled [boolean] If set to true, a disabled input element is unusable and un-clickable. Default is false.
  • min [number] the min attribute specifies the minimum value for an <input> element. Default is 1.
  • max [number] the max attribute specifies the maximum value for an <input> element. Default is Infinity.
Password
 <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] Specifies the type <input> element to display.
  • onSave [event handler] The expression specified will be invoked whenever the form is save via a click on save button. The $event argument will be the value return of the input send.
  • onError [event handler] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).
  • name [string] Defines the name of an <input> element. Default is undefined.
  • size [number] Defines the width, in characters, of an <input> element. Default is 8.
  • disabled [boolean] If set to true, a disabled input element is unusable and un-clickable. Default is false.
  • min [number] the min attribute specifies the minimum value for an <input> element. Default is 1.
  • max [number] the max attribute specifies the maximum value for an <input> element. Default is 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] Specifies the type <input> element to display.
  • onSave [event handler] The expression specified will be invoked whenever the form is save via a click on save button. The $event argument will be the value return of the input send.
  • onError [event handler] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).
  • name [string] Defines the name of an <input> element. Default is undefined.
  • size [number] Defines the width, in characters, of an <input> element. Default is 8.
  • disabled [boolean] If set to true, a disabled input element is unusable and un-clickable. Default is false.
  • cols [number] Specifies the visible width of a text area. Default is 50.
  • rows [number] Specifies the visible height of a text area. Default is 4.
  • min [number] the min attribute specifies the minimum value for an <input> element. Default is 1.
  • max [number] the max attribute specifies the maximum value for an <input> element. Default is Infinity.
Select
Basic example
<inline-editor
        type="select"
        [(ngModel)]="editableSelect"
        (onSave)="saveEditable($event)"
        name="editableSelect"
        disabled="false"
        [options]="editableSelectOptions"></inline-editor>
  • type [string] Specifies the type <input> element to display.
  • onSave [event handler] The expression specified will be invoked whenever the form is save via a click on save button. The $event argument will be the value return of the input send.
  • name [string] Defines the name of an <input> element. Default is undefined.
  • disabled [boolean] If set to true, a disabled input element is unusable and un-clickable. Default is false.
  • options [Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string }] Array of items from which to select. Should be an array of objects with value and text properties. Is possible to configure key-value parameters using an object that specifies these fields and data.

Typescript code:

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

  }
Parameter's configuration example
  • editableSelect [number] Specifies the default's value of the select.
  • editableSelectOptions [Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string }] Specifies the array of items from which to select. Should be an array of objects with value and text properties. Is possible to configure key-value parameters using an object that specifies these fields and data.

Typescript code:

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

  }
Children example

Is possible to configure sublevels/children to generate the select using an array of objects called children.

Typescript code:

 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

Empty components

  <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] Specifies the default message to display if there are not ngModel for the component. If the type is select then the default selected element is the first element of the options array.

Style/Theme

The inline-editor has the following basic theme which you can find in dist/themes/bootstrap.css:

a.c-inline-editor {
  text-decoration: none;
  color: #428bca;
  border-bottom: dashed 1px #428bca;
  cursor: pointer;
  line-height: 2;
  margin-right: 5px;
  margin-left: 5px;
}
.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;
}

Integration with other ngx-libraries

ngx-data-table

Example using angular2-data-table (demo) Version 0.1.0-angular2-data-table

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

  1. Use GitHub Issues board to report bugs and feature requests (not our email address)
  2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

Development

  1. To generate all *.js, *.js.map and *.d.ts files:

    npm run build

  2. To debug :

    npm run build:watch

Authors

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

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

License

The MIT License (See the LICENSE file for the full text) -

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文