Office アドインの Fabric Core

React以外の Office アドインを構築する場合、Fabric Core では、Fluent UI デザイン言語に合わせたアイコン、色、文字体裁、応答性の高いグリッド用の既製の CSS クラスと Sass mixin が提供されます。 フレームワークに依存しないため、任意のシングルページ アプリケーションまたはサーバー側 Web UI フレームワークで Fabric Core を使用できます。 (履歴上の理由から、"Fluent Core" ではなく "Fabric Core" と呼ばれます)。

注:

この記事では、Office アドインのコンテキストでの Fabric Core の使用について説明しますが、さまざまな Microsoft 365 アプリと拡張機能でも使用されています。 詳細については、「Fabric Core」と「オープンソース リポジトリ Office UI Fabric Core」を参照してください。

注:

Fabric Core は、React以外のアドインを設計するための推奨ライブラリですが、チームは Fluent UI Web コンポーネントに取り組み、新しいソリューションを提供しています。 FAST 上に構築された Fluent UI Web コンポーネント ライブラリを使用すると、Web コンポーネントを使用、カスタマイズ、ビルドして、よりモダンで標準ベースの UI を作成できます。 GitHub を通じたエクスペリエンスに関するクイック スタートとウェルカム フィードバックを完了して、このライブラリをテストすることをお勧めします。

Fabric Core を使用する: アイコン、フォント、色

まず、Fabric Core スタイルシートをアドインに追加し、アイコン、フォント、色に CSS クラスを適用します。

スタイルシートを追加する

HTML ページの <head> に Fabric Core コンテンツ配信ネットワーク (CDN) 参照を追加します。

<link rel="stylesheet" href="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-core/11.0.0/css/fabric.min.css">

アイコンを使用する

Fabric Core アイコンを使用するには、 <i> 要素を追加し、適切な CSS クラスを適用します。 アイコンのサイズは、フォント サイズ クラスで制御し、色クラスを使用してその色を制御します。 次の例では、テーマのプライマリ カラー (#0078d7) に特大のテーブル アイコンをレンダリングします。

<i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>

クラス パターンが ms-Icon--<IconName>。 使用可能なアイコンを参照し、その名前を見つけるには、「 Fluent UI アイコン」を参照してください。 使用するアイコンが見つかると、アイコン名の前に ms-Icon-- を付けます。

フォントと色を使用する

Fabric Core には、Segoe UI のフォント サイズ (ms-font-s、 ms-font-m、 ms-font-l、 ms-font-xlなど) とテーマ対応の色 (ms-fontColor-themePrimary、 ms-fontColor-neutralSecondaryなど) の CSS クラスが用意されています。 次の例では、大きなフォント サイズとプライマリ テーマの色を見出しに適用します。

<h2 class="ms-font-l ms-fontColor-themePrimary">Sales by region</h2>
<p class="ms-font-m ms-fontColor-neutralSecondary">Updated quarterly.</p>

使用可能なサイズの完全な一覧については、「 文字体裁」を参照してください。 テーマ対応の色とニュートラルな色については、「 色」を参照してください。

Office UI Fabric JS コンポーネントを使用する

React以外のアドインに対話型 UI コンポーネント (ボタン、ダイアログ、ドロップダウン、ピッカーなど) が必要な場合は、Office UI Fabric JS を使用できます。 このライブラリは、Reactを必要とせずに Office デザイン言語に一致する、事前に構築されたスタイルのコンポーネントを提供します。

コンポーネントを使用するには、HTML で Fabric JS スクリプトとスタイルシートを参照し、JavaScript でコンポーネントを初期化します。 セットアップ手順とコンポーネントの完全な一覧については 、リポジトリの README を参照してください。

サンプル

次のサンプル アドインでは、Fabric Core または Office UI Fabric JS コンポーネントを使用します。 これらのリポジトリの一部はアーカイブされています。つまり、バグやセキュリティ修正プログラムで更新されなくなりましたが、引き続きそれらを使用して、Fabric Core および Fabric UI コンポーネントを適用する方法を学習できます。

関連項目

  • Last updated on