Office アドインの Fabric Core

  • [アーティクル]

Fabric Core は、React以外の Office アドインで使用することを目的とした CSS クラスと Sass mixins のオープンソース コレクションです。Fabric Core には、アイコン、色、書体、グリッドなど、Fluent UI デザイン言語の基本的な要素が含まれています。 Fabric Core はフレームワークに依存しないため、任意のシングルページ アプリケーションまたは任意のサーバー側 Web UI フレームワークで使用できます。 (履歴上の理由から、"Fluent Core" ではなく "Fabric Core" と呼ばれます)。

アドインの UI がReactベースでない場合は、React以外のコンポーネントのセットを使用することもできます。 「Office UI Fabric JS コンポーネントを使用する」を参照してください。

注:

この記事では、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 を使用する: アイコン、フォント、色

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

    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">

  2. Fabric Core のアイコンとフォントを使用します。

    Fabric Core アイコンを使用するには、ページに "i" 要素を含め、適切なクラスを参照します。 アイコンのサイズは、フォント サイズを変更することで制御できます。 たとえば、次のコードは、themePrimary (#0078d7) 色を使用する特大の表アイコンを作成する方法を示しています。

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

    詳細な手順については、「 Fluent UI アイコン」を参照してください。 Fabric Core で使用できるその他のアイコンを見つけるには、そのページの検索機能を使用します。 アドインで使用するアイコンを検索するときには、アイコン名の先頭に ms-Icon-- を追加してください。

    Fabric Core で使用できるフォント サイズと色の詳細については、「色」の「文字体裁と色」の目次を参照してください。

例については、この記事の後半の 「サンプル」 を参照してください。

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

React以外の UI を含むアドインでは、ボタン、ダイアログ、ピッカーなど、Office UI Fabric JS の多数のコンポーネントのいずれかを使用することもできます。 手順については、リポジトリの readme を参照してください。

例については、この記事の後半の 「サンプル」 を参照してください。

サンプル

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