Angular Tile Manager (タイル マネージャー) の概要

    Tile Manager コンポーネントを使用すると、コンテンツを個々のタイルに表示できます。ユーザーはタイルを並べ替えたりサイズを変更したりして操作できるため、好みに応じてコンテンツのレイアウトや外観を自由にカスタマイズできます。この柔軟性により、パーソナライズされた効率的なコンテンツの表示と管理が可能になり、ユーザー エクスペリエンスが向上します。

    Angular Tile Manager の例

    次の Ignite UI for Angular Tile Manager の例では、コンポーネントの動作を示しています。

    EXAMPLE

    このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    iframe の権限ポリシーにより、この例のフルスクリーン ボタンは、右上隅の Expand to fullscreen (フルスクリーンに展開) ボタンをクリックしてスタンドアロン モードで例を開いた場合にのみ機能します。

    Ignite UI for Angular Tile Manager を使用した作業の開始

    Ignite UI Tile Manager は標準の Web コンポーネントであるため、Angular アプリケーションで使用できます。

    Tile Manager コンポーネントの使用を開始するには、最初に次のコマンドを実行して Web Components パッケージをインストールする必要があります。

    npm install igniteui-webcomponents --save
cmd

    次に、main.ts ファイルまたは IgcTileManager を使用しているコンポーネントの .ts ファイルで IgcTileManagerComponent 引数を指定して defineCustomElements() 関数を呼び出す必要があります。

    import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';

defineComponents(IgcTileManagerComponent);
ts

    また、コンポーネントの構成に CUSTOM_ELEMENTS_SCHEMA スキーマを含める必要があります。

    import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {
typescript

    これで、Angular Tile Manager の基本構成から始めることができます。

    使用方法

    タイル マネージャーは、最大化状態または通常状態でのタイルの配置を管理する基本的なタイル レイアウト動作を提供します。タイルはそれぞれ独立してサイズを設定でき、複雑なレイアウトを構築できます。エンドユーザーはドラッグ アンド ドロップによる直感的な操作で柔軟にタイルを並べ替えることが可能です。

    タイル マネージャーでは、使用できる 2 つのコンポーネントが提供されます。

    • IgcTileComponent - このコンポーネントは、タイル マネージャー内に表示される個々のタイルを表します。
    • IgcTileManagerComponent - これはすべてのタイル コンポーネントを含むメイン コンポーネントであり、タイル レイアウト全体のコンテナーとして機能します。
    <igc-tile-manager>
  <igc-tile>
    <p>Tile 1</p>
  </igc-tile>
  <igc-tile>
    <p>Tile 2</p>
  </igc-tile>
  <igc-tile>
    <p>Tile 3</p>
  </igc-tile>
</igc-tile-manager>
html

    Ignite UI for Angular については、「はじめに」トピックををご覧ください。

    Tile Manager コンポーネントの使用方法の詳細については、このトピックを参照してください。