新機能: Web Componentsタイルマネージャー

使用するコンポーネントで究極のアプリ開発の柔軟性と俊敏性を確保することが重要です。そのため、Ignite UI for Web Componentsツールボックスに新しいコンポーネントであるタイルマネージャーを追加しました。そのプロパティをチェックして、使用方法を確認してください。

Radoslav Mirchev Last Updated Mar 21, 2025 5min read

このIgnite UI for Web Components 5.3 リリースでは、俊敏性と最適なユーザーエクスペリエンスを確保する機能を備えた、まったく新しい時間節約コンポーネントであるTile Managerが導入されています。このブログ記事では、その仕組みを説明し、サイズ変更、並べ替え、シリアル化などの機能を見ていきます。

Web Componentsタイルマネージャーコンポーネント

Web Components Tile Managerコンポーネントは、個々のタイルにコンテンツを表示するための UI を提供します。これにより、ユーザーはタイルを再配置およびサイズ変更することで、タイルを操作できます。コンテンツのレイアウトと外観を好みに応じてカスタマイズする自由は、ドックマネージャーコンポーネントによってのみ一致する可能性があります。この柔軟性により、コンテンツを表示および管理するためのよりパーソナライズされた効率的な方法が可能になり、ユーザーエクスペリエンスが向上します。

タイルマネージャーのプロパティ

列と行

ユーザーは、Web Components Tile Manager のグリッド列の数を定義できます。これを行うには、the column-count property を必要な列数に設定するだけです。

Gap

Gap プロパティは、タイル間のスペースを定義します。the gapプロパティの値は、数値の後に長さの単位 (px、rem、em など) を付ける必要があります。この値は、タイル間の水平方向のギャップ (幅) と垂直方向のギャップ (高さ) の両方に適用されます。

最小幅と最小高さ

タイルマネージャーで列の最小幅 (min-column-width) と行の最小高さ (min-row-height) を設定するためのプロパティです。gap プロパティと同様に、これらのプロパティの値は、数値の後に長さの単位が続く必要があります。

サイズ

タイルマネージャーでのサイズ変更は、3つの異なるサイズ変更装飾を使用してタイルのサイズを変更できる機能です。

サイドアドライナー:柱のスパンを変更して幅を調整します。
ボトムアドライナー: 行のスパンを変更して高さを調整します。
コーナー装飾:幅と高さの両方を同時に調整します。

並べ替える

タイルマネージャーでは、ドラッグアンドドロップ機能を使用してタイルを並べ替えることができます。デフォルトでは、タイルはドラッグできません。この機能を有効にするには、タイルマネージャのdrag-modeプロパティをtileまたは 1 に設定しますtile-header。

オプションを使用すると、tileオプションを使用すると、個々のタイルの任意の場所をクリックしたままにすると、ドラッグを開始できます。
tile-headerオプションを使用すると、タイルのヘッダーセクションをクリックしたままにするだけで、ドラッグプロセスを開始できます。

連載

Web Componentsタイルマネージャーには、タイルのレイアウトの管理に役立つメソッドが用意されています。

この方法でsaveLayout、タイルマネージャーでタイルの現在の配置を保存できます。すべてのタイルの現在の順序、サイズ、および位置がキャプチャされるため、後でこの正確な構成に復元できます。
loadLayoutメソッドを使用すると、以前に保存したレイアウトをロードできます。呼び出されると、タイルはレイアウトが保存されたときの正確な状態 (順序、サイズ、位置など) に復元されます。

スタイリング

また、2 つのコンポーネントTile Manager Tileの外観をカスタマイズすることもできます。Tile Managerは、タイルマネージャーの基本ラッパーのスタイル設定に使用できる CSS プロパティbase 1 つだけを公開します。Tile コンポーネントは、使用できるいくつかの CSS プロパティを公開します。

Tile コンポーネントのプロパティ

Web Components Tile コンポーネントには、タイルごとに個別に設定できるプロパティがあります。これらのプロパティには、次のようなものがあります。

col-spanプロパティは、レイアウト内でタイルがまたがる列の数を指定し、タイルの水平サイズを制御できるようにします。
row-spanプロパティは、タイルが垂直方向に何行にまたがるかを決定し、レイアウト内のタイルの高さを調整します。
col-startプロパティは、タイルが配置される開始列を指定します。
row-startプロパティは、タイルが配置される開始行を指定します。
disable-fullscreenプロパティは、デフォルトの全画面表示アクションボタンを非表示にします。
disable-maximizeプロパティは、デフォルトの最大化トグルアクションボタンを非表示にします。
disable-resizeプロパティは、ユーザーがタイルのサイズを変更できないようにします。

Ignite UI for Web Components 5.3.0 変更履歴

詳細については、こちらをご覧ください。

Added

タイルマネージャーコンポーネント#1402
List
- igc-list-itemコンポーネントは new selected property を公開します。リスト項目に設定すると、項目は視覚的に強調表示されます#1590

変更

Progressbar
- Use theme schemas #1582

Fixed

Calendar
- Fluent テーマと Bootstrap テーマの日数行の高さ# 1597
- マテリアルとインディゴのテーマの範囲プレビューで日付テキストの色を無効にしました#1595
Chip
- レスポンシブレイアウトスタイルの改善#1588
Combo
- トグルボタンの表示状態の改善#1580

すべてを包み込むために...

互換性のためにシームレスに作成されたIgnite UI for Angularは、最新のテクノロジーとメジャーリリースの力を活用できるライブラリです。最高のAngular UIツールキットと関連する洞察を提供することに尽力し、私たちの目標は、より多くのノウハウ、新機能、パフォーマンスの向上、安定性の向上を提供することです。一部の拡張機能は、Ignite UI for Web Components GitHubリポジトリを通じて、あなたのようなユーザーからのリクエストのおかげで追加されました。このことを念頭に置いて、私たちは常に提案やフィードバックを受け入れています - それは私たちを成長させ、あなたの開発ニーズによりよく対応します。

詳細については、以下をご覧ください。