@311devs/ngx-inline-editor 中文文档教程
Native UI Inline-editor Angular (version 4+) component (demo)
ngx-inline-editor 是 Angular(版本 4+)的一个库,允许您创建可编辑的元素。 这种技术也称为点击编辑 或就地编辑。 它基于在 AngularJS 中开发的 angular-xeditable 的思想。
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
安装 ngx-inline-editor 的推荐方法是通过 npm 包管理器使用以下命令:
npm i @qontu/ngx-inline-editor --save
在以下路径中包含基本主题或配置您自己的样式:
dist/themes/bootstrap.css
- 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 isundefined
.size
[number
] Defines the width, in characters, of an<input>
element. Default is8
.disabled
[boolean
] If set totrue
, a disabled input element is unusable and un-clickable. Default isfalse
.min
[number
] the min attribute specifies the minimum value for an<input>
element. Default is1
.max
[number
] the max attribute specifies the maximum value for an<input>
element. Default isInfinity
.
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 isundefined
.size
[number
] Defines the width, in characters, of an<input>
element. Default is8
.disabled
[boolean
] If set totrue
, a disabled input element is unusable and un-clickable. Default isfalse
.min
[number
] the min attribute specifies the minimum value for an<input>
element. Default is1
.max
[number
] the max attribute specifies the maximum value for an<input>
element. Default isInfinity
.
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 isundefined
.size
[number
] Defines the width, in characters, of an<input>
element. Default is8
.disabled
[boolean
] If set totrue
, a disabled input element is unusable and un-clickable. Default isfalse
.cols
[number
] Specifies the visible width of a text area. Default is50
.rows
[number
] Specifies the visible height of a text area. Default is4
.min
[number
] the min attribute specifies the minimum value for an<input>
element. Default is1
.max
[number
] the max attribute specifies the maximum value for an<input>
element. Default isInfinity
.
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 isundefined
.disabled
[boolean
] If set totrue
, a disabled input element is unusable and un-clickable. Default isfalse
.options
[Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string }
] Array of items from which to select. Should be an array of objects withvalue
andtext
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 withvalue
andtext
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'
}
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 isselect
then the default selected element is the first element of theoptions
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 (演示)
Troubleshooting
报告错误和功能请求时请遵循以下准则:
- Use GitHub Issues board to report bugs and feature requests (not our email address)
- 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
要生成所有
*.js
、*.js.map
和*.d.ts
文件:npm run build
调试:
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 to 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.
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
A recommended way to install ngx-inline-editor is through npm package manager using the following command:
npm i @qontu/ngx-inline-editor --save
Include the basic theme or configure your own styles which are in the following path:
dist/themes/bootstrap.css
- 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 isundefined
.size
[number
] Defines the width, in characters, of an<input>
element. Default is8
.disabled
[boolean
] If set totrue
, a disabled input element is unusable and un-clickable. Default isfalse
.min
[number
] the min attribute specifies the minimum value for an<input>
element. Default is1
.max
[number
] the max attribute specifies the maximum value for an<input>
element. Default isInfinity
.
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 isundefined
.size
[number
] Defines the width, in characters, of an<input>
element. Default is8
.disabled
[boolean
] If set totrue
, a disabled input element is unusable and un-clickable. Default isfalse
.min
[number
] the min attribute specifies the minimum value for an<input>
element. Default is1
.max
[number
] the max attribute specifies the maximum value for an<input>
element. Default isInfinity
.
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 isundefined
.size
[number
] Defines the width, in characters, of an<input>
element. Default is8
.disabled
[boolean
] If set totrue
, a disabled input element is unusable and un-clickable. Default isfalse
.cols
[number
] Specifies the visible width of a text area. Default is50
.rows
[number
] Specifies the visible height of a text area. Default is4
.min
[number
] the min attribute specifies the minimum value for an<input>
element. Default is1
.max
[number
] the max attribute specifies the maximum value for an<input>
element. Default isInfinity
.
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 isundefined
.disabled
[boolean
] If set totrue
, a disabled input element is unusable and un-clickable. Default isfalse
.options
[Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string }
] Array of items from which to select. Should be an array of objects withvalue
andtext
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 withvalue
andtext
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'
}
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 isselect
then the default selected element is the first element of theoptions
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)
Troubleshooting
Please follow this guidelines when reporting bugs and feature requests:
- Use GitHub Issues board to report bugs and feature requests (not our email address)
- 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
To generate all
*.js
,*.js.map
and*.d.ts
files:npm run build
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) -