コンポーネント テンプレート

    以下の表に、Ignite UI Angular Schematics また は Ignite UI CL Iコマンドを使用して生成できる Ignite UI Angular コンポーネントのリストを示します。さらに、本ドキュメントには利用可能なデモへのリンクが含まれますが、CLI によって生成されたデモと完全にく同じではないことに注意してください。

    テンプレート コードと説明 デモ
    グリッドとリスト
    grid Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c grid newGrid
    Ignite UI CLI:
    ig add grid newGrid
    IgxGrid の基本 テンプレート。
    		 自動生成列を含む IgxGrid コンポーネント。
    grid-batch-editing Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
    Ignite 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 newCustomGrid
    Ignite UI CLI:
    ig add custom-grid newCustomGrid
    ソート、フィルタリング、編集などのオプション機能を含む IgxGrid。
    		 IgxGrid には、オプション機能 ソート、フィルタリング、セル編集、行編集、グループ化、サイズ変更、選択、ページング、列ピン固定、列移動、列の非表示 などが含まれます。
    grid-summaries Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
    Ignite 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 newGridMultiColumnHeaders
    Ignite 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 newCustomTreeGrid
    Ignite UI CLI:
    ig add custom-tree-grid newCustomTreeGrid
    ソート、フィルタリング、行編集などのオプション機能を含む IgxTreeGrid。
    		 IgxTreeGrid には、オプション機能 ソーティング、フィルタリング、セル編集、行編集、サイズ変更、行選択、ページング、列のピン固定、列移動、列の非表示 などが含まれます。
    list Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c list newList
    Ignite UI CLI:
    ig add list newList
    基本 IgxList。
    		 検索とフィルタリング ロジックを含む IgxList。
    combo Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c combo newCombo
    Ignite UI CLI:
    ig add combo newCombo
    テンプレートを含む基本 IgxCombo。
    		 カスタム templatingを含む IgxCombo。
    チャート
    category chart Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c category-chart newCategoryChart
    Ignite UI CLI:
    ig add category-chart newCategoryChart
    チャート タイプ セレクターを備えた基本 カテゴリチャート。
    		 チャート タイプ セレクターを含む基本 category chart。
    financial chart Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
    Ignite UI CLI:
    ig add financial-chart newFinancialChart
    自動ツールバーとタイプ選択を含む基本 ファイナンシャル チャート。
    		 自動ツールバーとタイプ選択を含む基本 financial chart。
    ゲージ
    bullet graph Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
    Ignite UI CLI:
    ig add bullet-graph newBulletGraph
    さまざまなアニメーションを含む IgxBulletGraph。
    		 さまざまなアニメーションを含む IgxBulletGraph。
    linear gauge Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
    Ignite UI CLI:
    ig add linear-gauge newLinearGauge
    さまざまなアニメーションを含む IgxLinearGauge
    		 さまざまなアニメーションを含む IgxLinearGauge。
    radial gauge Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
    Ignite UI CLI:
    ig add radial-gauge newRadialGauge
    さまざまなアニメーションを含む IgxRadialGauge。
    		 さまざまなアニメーションを含む IgxRadialGauge。
    レイアウト
    dock-manager Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c dock-manager newDockManager
    Ignite UI CLI:
    ig add dock-manager newDockManager
    基本 IgcDockManager。
    		 9 つのコンテンツ スロットの IgcDockManager。
    carousel Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c carousel newCarousel
    Ignite UI CLI:
    ig add carousel newCarousel
    基本 IgxCarousel。
    		 一連の画像を循環する IgxCarousel。
    tabs Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c tabs newTabs
    Ignite UI CLI:
    ig add tabs newTabs
    基本 IgxTabs。
    		 3 つのカスタマイズされたタブグループを含む IgxTabs コンポーネント。
    bottom-nav Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
    Ignite UI CLI:
    ig add bottom-nav newBottomNav
    3 項目の下部ナビゲーション テンプレート。
    		 3 項目の下部 navbar テンプレート。
    データ入力と表示
    chip Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c chip newChip
    Ignite UI CLI:
    ig add chip newChip
    基本 IgxChip。
    		 igx-chips-area 内の IgxChip コンポーネント。
    dropdown Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c dropdown newDropDown
    Ignite UI CLI:
    ig add dropdown newDropDown
    基本 IgxDropDown。
    		 項目のリストを表示する基本 IgxDropDown。
    select (v4.1.0) Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c select newSelect
    Ignite UI CLI:
    ig add select newSelect
    基本 IgxSelect。
    		 項目のリストを表示する基本 IgxSelect。
    select (v4.1.0) Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c select-in-form newFormSelect
    Ignite UI CLI:
    ig add select-groups newGroupsSelect
    グループ選択。
    		 グループ項目を表示する IgxSelect。
    select (v4.1.0) Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c select-in-form newFormSelect
    Ignite UI CLI:
    ig add select-in-form newFormSelect
    フォームの IgxSelect。
    		 フォームで使用する IgxSelect コンポーネント。
    input group Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c input-group newInputGroup
    Ignite UI CLI:
    ig add input-group newInputGroup
    基本 IgxInputGroup フォーム ビュー。
    		 IgxInputGroup で作成したフォーム。
    インタラクション
    dialog gnite UI Schematics collection:
    ng g @igniteui/angular-schematics:c dialog newDialog
    Ignite UI CLI:
    ig add dialog newDialog
    基本 IgxDialog。
    		 標準の確認ダイアログとして使用される IgxDialog。
    tooltip gnite UI Schematics collection:
    ng g @igniteui/angular-schematics:c tooltip newTooltip
    Ignite UI CLI:
    ig add tooltip newTooltip
    フルカスタマイズ可能なツールチップ。
    		 IgxTooltip で作成される基本 ツールチップ。
    スケジュール
    date-picker Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c date-picker newDatePicker
    Ignite UI CLI:
    ig add date-picker newDatePicker
    基本 IgxDatePicker。
    		 一方向データ バインディングを含む基本 IgxDatePicker。
    time-picker Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c time-picker newTimePicker
    Ignite UI CLI:
    ig add time-picker newTimePicker
    基本 IgxTimePicker。
    		 初期値設定と一方向データ バインディングを含む基本 IgxTimePicker。
    calendar Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c calendar newCalendar
    Ignite UI CLI:
    ig add calendar newCalendar
    単一選択を含む IgxCalendar。
    		 一方向データ バインディングを含む基本 IgxDatePicker。

    シナリオ テンプレート

    テンプレート コードとテンプレート デモ
    awesome-grid Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
    Ignite UI CLI:
    ig add awesome-grid newAwesomeGrid
    カスタムセルテンプレートを含む IgxGrid。
    		 セル テンプレートを含み、コントロールをセルに埋め込める IgxGrid。
    crm-grid Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
    Ignite UI CLI:
    ig add crm-grid newCrmGrid
    カスタム検索実装を含む IgxGrid。
    		 カスタム検索実装を含む IgxGrid。
    fintech-grid Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
    Ignite 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 newFinTechTreeGrid
    Ignite UI CLI:
    ig add fintech-tree-grid newFinTechTreeGrid
    毎秒数千のライブ更新が可能な IgxGrid
    		IgxTreeGrid 1 秒あたり数千の更新を処理するライブ更新デモ。
    login Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c login newLogin
    Ignite UI CLI:
    ig add login newLogin
    IgxInputGroup で作成された登録およびログインフォーム。
    		 IgxInputGroup で作成された登録およびログインフォーム。
    weather-forecast Ignite UI Schematics コレクション:
    ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
    Ignite UI CLI:
    ig add weather-forecast newWeatherForecast
    テンプレートを含む igxExpansionPanel。
    		 テンプレートは IgxExpansionPanel を使用して、毎日の天気予報の詳細を表示します。