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

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

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

5min read

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

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

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

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

列と行

ユーザーはタイルマネージャーのグリッド列数を定義Web Componentsできます。これを行うには、単に the propertycolumn-countを希望の列数に設定するだけです。

Gap

ギャップの性質はタイル間の空間を定義します。gapプロパティの値は、数の後に長さ単位(例:px、rem、em、...)でなければなりません。この値はタイル間の横ギャップ(幅)と垂直ギャップ(高さ)の両方に適用されます。

最小幅と最小高さ

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

サイズ

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

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

並べ替える

タイルマネージャーではドラッグ&ドロップ機能を使ってタイルの順序を入れ替えることができます。デフォルトではタイルはドラッグできません。この機能を有効にするには、タイルマネージャーのdrag-modeプロパティをどちらかtileまたはtile-headerに設定してください。

  • ​tileoptionでは、個々のタイルのどこかをクリック&長押ししてドラッグを始められます。
  • ​tile-headeroptionでは、タイルのヘッダーセクションをクリックして長押しするだけでドラッグが始まります。

連載

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

  • ​saveLayoutメソッドでは、現在のタイル配置をタイルマネージャーに保存できます。すべてのタイルの現在の順序、サイズ、位置を記録し、後でこの正確な配置に戻すことができます。
  • このloadLayoutメソッドは、以前に保存したレイアウトを読み込むことを可能にします。呼び出すと、タイルはレイアウト保存時の状態に正確に復元され、順序、サイズ、位置も含まれます。

スタイリング

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

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

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

  • thecol-span propertyは、タイルがレイアウト内で何列にわたって横たわるかを指定し、横方向の大きさをコントロールできます。
  • ​row-spanプロパティはタイルが縦に何行かかるかを決定し、レイアウト内でタイルの高さを調整します。
  • Thecol-startプロパティはタイルが置かれる開始列を指定します。
  • Therow-startプロパティはタイルが置かれる開始行を指定します。
  • ​disable-fullscreenプロパティはデフォルトのフルスクリーンアクションボタンを隠しています。
  • theのpropertydisable-maximizeデフォルトの最大化トグルアクションボタンを隠しています。
  • ​disable-resizeプロパティは、ユーザーがタイルのサイズを変更することを妨げます。

Ignite UI for Web Components 5.3.0 変更履歴

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

Added

  • タイルマネージャーコンポーネント#1402
  • List
    • ​igc-list-itemコンポーネントは新しいselectedプロパティを露出します。リスト項目に設定すると、その項目は視覚的にハイライトされます#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リポジトリを通じて、あなたのようなユーザーからのリクエストのおかげで追加されました。このことを念頭に置いて、私たちは常に提案やフィードバックを受け入れています - それは私たちを成長させ、あなたの開発ニーズによりよく対応します。

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

さらに

​MediumでIgnite UIをフォローして、最新情報を入手し、私たちが取り組んでいる最新のAngular関連プロジェクトについて学びましょう。GitHub でスターを付けて、問題セクションの懸念事項、質問、または機能リクエストに対処することで、製品を継続的に改善するのにご協力ください。

Web Components
デモを予約