igniteui angular wrappers
17.0.0
igniteui-angular بدلاً من ذلك! استخدم المكونات الموجودة في projectsigniteui-angular-wrapperssrcpublic-api.ts لاستخدام ضوابط واجهة المستخدم في التطبيقات الزاوية. العمل مع عينات الجري هنا.
من المهم أن تم إعادة تسمية المستودع من igniteui-angular2 إلى igniteui-angular-wrappers . اقرأ المزيد عن اتفاقية التسمية الجديدة.
لتشغيل العينات ، تحتاج إلى تثبيت node.js على جهازك. بعد ذلك ، من المحطة الخاصة بك ، قم بتشغيل الأوامر التالية:
git clone https://github.com/IgniteUI/igniteui-angular-wrapperscd igniteui-angular-wrappersnpm installnpm start يعتمد igniteui-angular-wrappers على الحزمة المرخصة ignite-ui-full . اتبع هذا الدليل عند إعداد إمكانية الوصول إلى خلاصة NPM الخاصة بـ INGITE UI وأضف التبعية إلى package.json .
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
للبدء مع واجهة المستخدم uniite و ignite واجهة المستخدم الزاوية:
npm i -g igniteui-cli
ig new <project name> --framework=angular --type=ig-ts
cd <project name>
ig add combo <component name>
ig start
في تطبيق زاوي ، تدعم عناصر التحكم في واجهة المستخدم تهيئة ترميز العلامات التي تتم باستخدام علامات مخصصة.
يقوم كل عنصر تحكم بتنفيذ مكون علامة مخصص حيث يتم تشكيل اسم العلامة عن طريق تقسيم كل حرف رأسمالي في اسم التحكم مع الرمز - .
ملاحظة : يوصى باستخدام علامات الإغلاق ( </ig-combo> ) على العلامات ذاتية الانضمام ( <ig-combo/> ) ، لأن الأخير معروف أنه يشكل مشكلات على بعض المتصفحات (اعتمادًا على وضع المستند المستخدم).
| اسم التحكم | علامة |
|---|---|
| igcombo | <ig-combo> |
| iggrid | <ig-grid> |
| igdatachart | <ig-data-chart> |
| igdialog | <ig-dialog> |
| igDateEditor | <ig-date-editor> |
| Igeditor | <ig-editor> |
| igmaskeditor | <ig-mask-editor> |
| Ignumericeditor | <ig-numeric-editor> |
| IgperCenteditor | <ig-percent-editor> |
| igtexteditor | <ig-text-editor> |
| igdatepicker | <ig-date-picker> |
| igtree | <ig-tree> |
| igmap | <ig-map> |
| igupload | <ig-upload> |
| IgVideOplayer | <ig-video-player> |
هناك سمتان إلزاميان يجب تعيينهما على علامة مخصصة للتحكم في واجهة المستخدم: options - يشير إلى خاصية على فئة مكون التطبيق التي تحتوي على تكوين عنصر التحكم. widgetId - يتطلب التحكم في معرف تعيينه إليه.
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]='data'
></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
}
في هذا المثال ، تشير options السمة إلى خاصية gridOptions على فئة Compoment Application و widgetId يشير إلى خاصية id .
يُسمح بتعيين جميع خيارات المستوى الأعلى كسمات لعلامة مخصصة للتحكم في واجهة المستخدم. في هذه الحالة ، فإن options السمة ليست إلزامية ، ولكن يُسمح بها. وإذا تم دمج كلا options والسمات ذات المستوى الأعلى ، فستتجاوز السمات ذات المستوى الأعلى options ، عندما تكون هناك خصائص متداخلة. كما سيقوم تغيير السمة من المستوى الأعلى بتطبيق التغيير على عنصر واجهة المستخدم ، فقط إذا كان الخيار قابل للتطبيق.
@Component({
selector: 'my-app',
template: `<ig-grid
[widgetId]='id'
[width]='w'
[autoCommit]='true'
[dataSource]='data'
[height]='h'
[autoGenerateColumns]='true'
>
</ig-grid>`
})
export class AppComponent {
private id: string;
private data: any;
private w: string;
private h: string;
private pKey: string;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.w = '100%';
this.h = '400px';
this.pKey = 'ProductID';
}
}
هناك علامتان مخصصتان <column> و <features> يتم استخدامهما في IgGrid/IgTreeGrid/ighierarchicalGrid لتكوين خيارات columns features وفقًا لذلك.
<ig-grid [widgetId]='id'>
<column [key]="'ProductID'" [headerText]="'Product ID'" [width]="'165px'" [dataType]="'number'"></column>
<column [key]="'ProductName'" [headerText]="'Product Name'" [width]="'250px'" [dataType]="'string'"></column>
<column [key]="'QuantityPerUnit'" [headerText]="'Quantity per unit'" [width]="'250px'" [dataType]="'string'"></column>
<column [key]="'UnitPrice'" [headerText]="'Unit Price'" [width]="'100px'" [dataType]="'number'"></column>
<features>
<paging [pageSize]="currPageSize"></paging>
<filtering></filtering>
<selection></selection>
<group-by></group-by>
</features>
</ig-grid>
يتم تمثيل كل من ميزات الشبكات أيضًا بعلامة مخصصة.
| اسم الميزة | علامة |
|---|---|
| العمود | <column-moving> |
| تصفية | <filtering> |
| مجموعة | <group-by> |
| إخفاء | <hiding> |
| الخلايا | <cell-merging> |
| AppendRowsondemand | <append-rows-on-demand> |
| MulticOlumnheaders | <multi-column-headers> |
| الترحيل | <paging> |
| استجابة | <responsive> |
| تغيير حجمه | <resizing> |
| المهرجانات | <row-selectors> |
| اختيار | <selection> |
| فرز | <sorting> |
| ملخصات | <summaries> |
| العمود | <column-fixing> |
| تلميحات الأدوات | <tooltips> |
| التحديث | <updating> |
من أجل تغيير المزيد من الخيارات في وقت واحد (أو إعادة إنشاء المكون بمجموعة أخرى من الخيارات) ، يمكن تطبيق التكوين الجديد على خاصية options .
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]="data"
></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
recreateGrid() {
this.gridOptions = {
dataSource: Northwind.getAnotherData(),
width: "700px",
autoGenerateColumns: true,
features: [
{ name: "Paging" }
]
};
}
}
في هذا المثال ، options السمة التي تشير إلى gridOptions والتغيير في المرجع سوف تدمر الشبكة ، ودمج الخيارات القديمة مع الخيارات الجديدة وإنشاء الشبكة مع الخيارات المدمجة. لاحظ أيضًا أن الشبكة الجديدة ستحصل على ارتفاع 400 بكسل ، على الرغم من أنها لم يتم تعريفها في الخيارات الجديدة ، بسبب الجمع بين خيارات جديدة. إذا كان تعطيل الخيار مطلوبًا ، قم بتعيينه على null ، undefined ، [] أو {} .
يتم تحقيق ربط أحداث التحكم عن طريق تعيين سمات حيث يكون اسم السمة هو اسم اسم الحدث الخاص بالتحكم محاطًا بالأقواس والقيمة هي اسم معالج الأحداث.
| حدث | ترميز |
|---|---|
| iggrid.events.databind | <ig-grid (dataBind)="dataBindHandler"> |
| igcombo.events.textChanged | <ig-combo (textChanged)="textChangedHandler"> |
| igdateeditor.events.keypress | <ig-date-editor (keypress)="keypressHandler"> |
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[(widgetId)]='id'
[dataSource]="data"
(dataBind)="dataBindHandler($event)"></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
private dataBindHandler: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true
};
}
dataBindHandler(event, ui) {
// event handler code
}
}
يتم ربط أحداث ميزة IgGrid* في رمز تكوين التحكم.
@Component({
selector: 'my-app',
template: `<ig-grid
[(options)]="gridOptions"
[dataSource]="data"
[(widgetId)]='id'></ig-grid>`
})
export class AppComponent {
private gridOptions: IgGrid;
private id: string;
private data: any;
constructor() {
this.data = Northwind.getData();
this.id ='grid1';
this.gridOptions = {
width: "100%",
height: "400px",
autoGenerateColumns: true,
features: [
{
name: "Filtering",
dataFiltered: function (evt, ui) {
// event handler code
}
}
]
};
}
}
في هذا المثال ، يتم التعامل مع حدث IgGridFiltering dataFiltered في فئة مكون التطبيق.
يمكن استدعاء طرق المكون عن طريق الوصول إلى المكون من العرض. على سبيل المثال:
@Component({
selector: 'my-app',
template: '<ig-grid #grid1
[(options)]="gridOptions">
<features>
<paging [pageSize]="'2'"></paging>
</features>
</ig-grid>'
})
export class AppComponent {
private gridOptions: IgGrid;
@ViewChild("grid1") myGrid: IgGridComponent;
private id: string;
constructor() { ... }
ngAfterViewInit() {
//call grid method
var cell = this.myGrid.cellById(1, "Name");
//call grid paging method
this.myGrid.featuresList.paging.pageIndex(2);
}
}
تدعم عناصر التحكم التالية حاليًا ربط البيانات ثنائية الاتجاه:
بالنسبة لربط البيانات ثنائية الاتجاه ، تحتاج إلى تعيين مصدر البيانات كخاصية في القالب. مثال:
<ig-combo [widgetId]="'combo2'"
[(options)]="options"
[dataSource]='northwind'
[(ngModel)]="combo.value1">
</ig-combo>
ملاحظة: لن يعمل ربط البيانات ثنائية الاتجاه إذا كنت تستخدم options.dataSource في ملف .TS كتكوين.
لإطلاق تغيير التغيير يدويًا ، استخدم واجهة برمجة تطبيقات markForCheck .
بفضل أنواع @/ignite-ui ، من الممكن إنشاء مثيل لجميع مصادر بيانات واجهة المستخدم.
let source = new Infragistics.DataSource(settings);
يتم منح مثيل مصدر البيانات هذا مع Intellisense حول أساليب IgDataSource.
source.dataBind();
مراجعة العرض التوضيحي التالي لمزيد من المعلومات.
أمر إجراء الاختبارات هو:
npm test
بعد ذلك ، إذا نجحت جميع الاختبارات في اجتياز تغطية رمز لملف public-api.ts ضمن مجلد ./coverage/igniteui-angular-wrappers .
لمشاهدة تغطية الكود ، يمكنك فتح أحد ملفات HTML ضمن ./coverage/igniteui-angular-wrappers/src .
Ignite UI هي مجموعة أدوات HTML5+ متقدمة تساعدك على إنشاء تطبيقات ويب مذهلة وحديثة. بناءً على jQuery و jQuery UI ، يتكون في المقام الأول من ضوابط/أجهزة واجهة المستخدم غنية وعالية الأداء مثل جميع أنواع المخططات ، خرائط تصور البيانات ، شبكات البيانات (الهرمية ، القابلة للتحرير) ، محرر Dative Pivot ، Thanks Contractors. الكثيرون لسرد هنا - تحقق من الموقع لمزيد من المعلومات وتنزيل تجربة.
INGITE UI ليست مجرد مكتبة أخرى تم إنشاؤها في وقت فراغ شخص ما. إنه جاهز تجاريًا ، ويتم اختباره جيدًا للغاية ، ويتم ضبطه للأداء الأعلى ، والذي تم تصميمه لـ Good UX ، ويدعمه Infragistics ، وهي شركة تركز على الخبرة مع سجل حافل لأكثر من 24 عامًا من الخبرة في توفير أدوات واجهة مستخدم جاهزة للمؤسسات ، وبيئات مستخدمية على الويب ، و Windows و Begits.
