コンポーネント テンプレート
以下の表に、Ignite UI Angular Schematics また は Ignite UI CL Iコマンドを使用して生成できる Ignite UI Angular コンポーネントのリストを示します。さらに、本ドキュメントには利用可能なデモへのリンクが含まれますが、CLI によって生成されたデモと完全にく同じではないことに注意してください。
| テンプレート | コードと説明 | デモ |
|---|---|---|
| グリッドとリスト | ||
| grid | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c grid newGridIgnite UI CLI: ig add grid newGridIgxGrid の基本 テンプレート。 | 自動生成列を含む IgxGrid コンポーネント。 |
| grid-batch-editing | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditingIgnite UI CLI: ig add grid-batch-editing newGridBatchEditing一括編集を含むサンプル IgxGrid。 | batch editing にトランザクション サービスを使用する IgxGrid。 |
| custom-grid | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c custom-grid newCustomGridIgnite UI CLI: ig add custom-grid newCustomGridソート、フィルタリング、編集などのオプション機能を含む IgxGrid。 | IgxGrid には、オプション機能 ソート、フィルタリング、セル編集、行編集、グループ化、サイズ変更、選択、ページング、列ピン固定、列移動、列の非表示 などが含まれます。 |
| grid-summaries | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c grid-summaries newGridSummariesIgnite UI CLI: ig add grid-summaries newGridSummaries集計機能を含む IgxGrid。 | 集計 を含む IgxGrid。 |
| grid-multi-column-headers | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeadersIgnite UI CLI: ig add grid-multi-column-headers newGridMultiColumnHeaders複数のヘッダー列を含む IgxGrid。 | multi-column headers を含む IgxGrid。 |
| tree grid | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGridIgnite UI CLI: ig add custom-tree-grid newCustomTreeGridソート、フィルタリング、行編集などのオプション機能を含む IgxTreeGrid。 | IgxTreeGrid には、オプション機能 ソーティング、フィルタリング、セル編集、行編集、サイズ変更、行選択、ページング、列のピン固定、列移動、列の非表示 などが含まれます。 |
| list | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c list newListIgnite UI CLI: ig add list newList基本 IgxList。 | 検索とフィルタリング ロジックを含む IgxList。 |
| combo | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c combo newComboIgnite UI CLI: ig add combo newComboテンプレートを含む基本 IgxCombo。 | カスタム templatingを含む |
| チャート | ||
| category chart | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c category-chart newCategoryChartIgnite UI CLI: ig add category-chart newCategoryChartチャート タイプ セレクターを備えた基本 カテゴリチャート。 | チャート タイプ セレクターを含む基本 category chart。 |
| financial chart | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c financial-chart newFinancialChartIgnite UI CLI: ig add financial-chart newFinancialChart自動ツールバーとタイプ選択を含む基本 ファイナンシャル チャート。 | 自動ツールバーとタイプ選択を含む基本 financial chart。 |
| ゲージ | ||
| bullet graph | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c bullet-graph newBulletGraphIgnite UI CLI: ig add bullet-graph newBulletGraphさまざまなアニメーションを含む IgxBulletGraph。 | さまざまなアニメーションを含む IgxBulletGraph。 |
| linear gauge | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c linear-gauge newLinearGaugeIgnite UI CLI: ig add linear-gauge newLinearGaugeさまざまなアニメーションを含む IgxLinearGauge | さまざまなアニメーションを含む IgxLinearGauge。 |
| radial gauge | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c radial-gauge newRadialGaugeIgnite UI CLI: ig add radial-gauge newRadialGaugeさまざまなアニメーションを含む IgxRadialGauge。 | さまざまなアニメーションを含む IgxRadialGauge。 |
| レイアウト | ||
| dock-manager | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c dock-manager newDockManagerIgnite UI CLI: ig add dock-manager newDockManager基本 IgcDockManager。 | 9 つのコンテンツ スロットの IgcDockManager。 |
| carousel | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c carousel newCarouselIgnite UI CLI: ig add carousel newCarousel基本 IgxCarousel。 | 一連の画像を循環する IgxCarousel。 |
| tabs | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c tabs newTabsIgnite UI CLI: ig add tabs newTabs基本 IgxTabs。 | 3 つのカスタマイズされたタブグループを含む IgxTabs コンポーネント。 |
| bottom-nav | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c bottom-nav newBottomNavIgnite UI CLI: ig add bottom-nav newBottomNav3 項目の下部ナビゲーション テンプレート。 | 3 項目の下部 navbar テンプレート。 |
| データ入力と表示 | ||
| chip | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c chip newChipIgnite UI CLI: ig add chip newChip基本 IgxChip。 | igx-chips-area 内の IgxChip コンポーネント。 |
| dropdown | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c dropdown newDropDownIgnite UI CLI: ig add dropdown newDropDown基本 IgxDropDown。 | 項目のリストを表示する基本 IgxDropDown。 |
| select (v4.1.0) | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c select newSelectIgnite UI CLI: ig add select newSelect基本 IgxSelect。 | 項目のリストを表示する基本 IgxSelect。 |
| select (v4.1.0) | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c select-in-form newFormSelectIgnite UI CLI: ig add select-groups newGroupsSelectグループ選択。 | グループ項目を表示する IgxSelect。 |
| select (v4.1.0) | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c select-in-form newFormSelectIgnite UI CLI: ig add select-in-form newFormSelectフォームの IgxSelect。 | フォームで使用する IgxSelect コンポーネント。 |
| input group | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c input-group newInputGroupIgnite UI CLI: ig add input-group newInputGroup基本 IgxInputGroup フォーム ビュー。 | IgxInputGroup で作成したフォーム。 |
| インタラクション | ||
| dialog | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c dialog newDialogIgnite UI CLI: ig add dialog newDialog基本 IgxDialog。 | 標準の確認ダイアログとして使用される IgxDialog。 |
| tooltip | Ignite UI Schematics collection:ng g @igniteui/angular-schematics:c tooltip newTooltipIgnite UI CLI: ig add tooltip newTooltipフルカスタマイズ可能なツールチップ。 | IgxTooltip で作成される基本 ツールチップ。 |
| スケジュール | ||
| date-picker | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c date-picker newDatePickerIgnite UI CLI: ig add date-picker newDatePicker基本 IgxDatePicker。 | 一方向データ バインディングを含む基本 IgxDatePicker。 |
| time-picker | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c time-picker newTimePickerIgnite UI CLI: ig add time-picker newTimePicker基本 IgxTimePicker。 | 初期値設定と一方向データ バインディングを含む基本 IgxTimePicker。 |
| calendar | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c calendar newCalendarIgnite UI CLI: ig add calendar newCalendar単一選択を含む IgxCalendar。 | 一方向データ バインディングを含む基本 IgxDatePicker。 |
シナリオ テンプレート
| テンプレート | コードとテンプレート | デモ |
|---|---|---|
| awesome-grid | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGridIgnite UI CLI: ig add awesome-grid newAwesomeGridカスタムセルテンプレートを含む IgxGrid。 | セル テンプレートを含み、コントロールをセルに埋め込める IgxGrid。 |
| crm-grid | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c crm-grid newCrmGridIgnite UI CLI: ig add crm-grid newCrmGridカスタム検索実装を含む IgxGrid。 | カスタム検索実装を含む IgxGrid。 |
| fintech-grid | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c fintech-grid newFinTechGridIgnite UI CLI: ig add fintech-grid newFinTechGrid毎秒数千のライブ更新が可能な IgxGrid。 | IgxGrid 1 秒あたり数千の更新を処理するライブ更新デモ。 |
| fintech-tree-grid | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGridIgnite UI CLI: ig add fintech-tree-grid newFinTechTreeGrid毎秒数千のライブ更新が可能な IgxGrid | IgxTreeGrid 1 秒あたり数千の更新を処理するライブ更新デモ。 |
| login | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c login newLoginIgnite UI CLI: ig add login newLoginIgxInputGroup で作成された登録およびログインフォーム。 | IgxInputGroup で作成された登録およびログインフォーム。 |
| weather-forecast | Ignite UI Schematics コレクション:ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecastIgnite UI CLI: ig add weather-forecast newWeatherForecastテンプレートを含む igxExpansionPanel。 | テンプレートは IgxExpansionPanel を使用して、毎日の天気予報の詳細を表示します。 |