igniteui angular wrappers
17.0.0
igniteui-angular Comploy Angular Components! Используйте компоненты, найденные в projectsigniteui-angular-wrapperssrcpublic-api.ts для использования управления пользовательским интерфейсом Ignite в угловых приложениях. Работайте с бегущими образцами здесь.
Важно, что репозиторий был переименован из 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 . Следуйте этому Руководству по настройке доступа к частному каналу UI ui ui и добавьте зависимость от package.json .
"dependencies": {
"@infragistics/ignite-ui-full": "latest"
}
Чтобы начать с Ignite UI CLI и Ignite UI Angular Crappers:
npm i -g igniteui-cli
ig new <project name> --framework=angular --type=ig-ts
cd <project name>
ig add combo <component name>
ig start
В угловом приложении Ignite UI Controls поддерживает инициализацию разметки, которая выполняется с помощью пользовательских тегов.
Каждый элемент управления реализует пользовательский компонент тега, где имя тега формируется путем разделения каждой заглавной буквы в управляющем имени с помощью - символом.
ПРИМЕЧАНИЕ . Рекомендуется использовать закрывающие теги ( </ig-combo> ) над самозакрывающимися тегами ( <ig-combo/> ), потому что последние, как известно, делают проблемы в некоторых браузерах (в зависимости от используемого режима документа).
| Управляющее имя | Ярлык |
|---|---|
| Игкомбо | <ig-combo> |
| Иггрид | <ig-grid> |
| Игдатачарт | <ig-data-chart> |
| Игдиалог | <ig-dialog> |
| Игдатеддитор | <ig-date-editor> |
| Игедитор | <ig-editor> |
| Igmaskeditor | <ig-mask-editor> |
| Engumericeditor | <ig-numeric-editor> |
| Igpercenteditor | <ig-percent-editor> |
| Igtexteditor | <ig-text-editor> |
| Игдатепикер | <ig-date-picker> |
| Игтри | <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 в классе компонента приложения и 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> |
| Groupby | <group-by> |
| Скрываясь | <hiding> |
| Совместная | <cell-merging> |
| AppendRowsOndemand | <append-rows-on-demand> |
| Многоколлектуальные головы | <multi-column-headers> |
| Пейджинг | <paging> |
| Отзывчивый | <responsive> |
| Изменение размера | <resizing> |
| Rowselectors | <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 , а изменение в ссылке разрушит сетку, объедините старые параметры с новыми и создайте сетку с объединенными параметрами. Также обратите внимание, что новая сетка будет иметь высоту 400px, даже если она не будет определена в новых вариантах из -за комбинации с новыми опциями. Если требуется отключение опции. Установите его на 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* Events выполняется в коде конфигурации управления.
@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 в качестве конфигурации.
Чтобы вручную запустить обнаружение изменения, используйте API markForCheck .
Благодаря @types/ignite-ui можно создать экземпляр всех источников данных 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, он в первую очередь состоит из богатых функций, высокоэффективных элементов управления пользовательским интерфейсом/виджетов, таких как все виды диаграмм, карты визуализации данных, (иерархические, редактируемые) сетки данных, сетки-сетки, расширенные редакторы (комбинированная коробка, редакторы маскируемых, редактор HTML, энтор-дата, насыщенные подключения, насыщенные, гибкие, и гибкие, и гибковые, и гибковые, и гибковые, и гибковые, и гибкие, и гибковые, гибкие, гибкости, и гибкие, гибкости, гибкие данные, и гибковые данные. Слишком много, чтобы перечислить здесь - ознакомьтесь с сайтом для получения дополнительной информации и для загрузки проб.
Ignite UI - это не просто еще одна библиотека, созданная в чье -то свободное время. Он готов к коммерческому, чрезвычайно хорошо проверяемым, настроенный на высшую производительность, предназначенную для хорошего UX, и поддерживается Infragistics, специализированной на опыте компании с опытом работы с более чем 24-летним опытом в обеспечении готовых к предприятиям, высокоэффективным инструментам пользовательского интерфейса для веб-сайтов, Windows и мобильных сред.
