UI Fabricを使って見た目を整える

どうも、ぽっぽです。

GitHub – microsoft\frontend-bootcamp: Frontend Workshop from HTML\CSS\JS to TypeScript\React\Reduxを参考にUI Fabricについて理解したことを紹介します。

Workshopの中にUI FabricというReactのコンポーネントを取り扱ったセクションがあります。こちらを使うとWindowsアプリ風の見た目を表現できます。

ソース

Reactで作成したTodoアプリにUI Fabricを対応したソースをこちらからダウンロード出来ます。

このソースはCreate React App · Set up a modern web app by running one command.を使っています。複数のツールを組み合わせて必要な設定なども行ってくれているので便利でした。

npm install
npm start

Todoアプリを動作させる場合、NodeJSのコマンドプロンプトを開いて、ソースをダウンロードして展開した場所（package.jsonファイルがある）に移動します。1行目のコマンドを実行します。package.jsonのパッケージをインストールして、インストールが終わるまで数十秒ほど待ちます。
2行目のコマンドを実行するとブラウザにTodoアプリが表示されます。

終わるときは、コマンドプロンプト上でCtrl + Cをタイプします。

使い方

import { DefaultButton } from 'office-ui-fabric-react';

const MyComponent = () => {
  return (
    <div>
      <DefaultButton iconProps={{ iconName: 'Mail' }}>Send Mail</DefaultButton>
    </div>
  );
};

コンポーネントをインポートします。
iconPropsでアイコンを表示する事ができます。
ボタンのコンポーネントは公式ドキュメントで詳細を確認出来ます。

import { TextField } from 'office-ui-fabric-react';

const MyComponent = () => {
  return (
    <div>
      <TextField onRenderPrefix={() => <Icon iconName="Search" />} />
      <TextField onRenderPrefix={() => 'hello world'} />
    </div>
  );
};

コンポーネントの一部をカスタマイズして表示する事ができます。
簡易的に動作を確認するには、テキストフィールドの公式ドキュメントでExport to CodePenを使って動作を確認してみてください。

Stackを使ってレイアウト

CSSレイアウトでは近頃flexboxが有名です。

• guide
• tool

Fabric UIはflexboxの使い方を抽象化したコンテナタイプのコンポーネントにStackを用意しています。
Stackの公式ドキュメントをあわせて確認してみてください。

まとめ

ダウンロードしたソースを確認すると、Stackを使ってコンポーネントを構成したり、UI Fabricのコンポーネント（IconButton TextFieldなど）でフォームを構成していることが分かります。
デザインに疎くてもコンポーネントを組み合わせるだけで統一したUIになるところが良いですね。