0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Office UI Fabricでアイコンを表示するにはinitializeIcons()を呼ばないといけない

Posted at

Office UI Fabric のちょっとしたハマりどころの共有です。

Office UI Fabric で、チェックボックスのチェックマークとかプルダウンの下向き括弧とかのアイコンが表示されなくてなんでかなーと思ったら、initializeIcons() を呼ぶ必要がありました。

スクリーンショット_112017_060804_PM.jpg

チェックしても色がつくだけでチェックマークが表示されない。

ここに initizelizeIcons() を呼ぶようにと書いてました。

コードサンプル

"use strict";

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { initializeIcons } from '@uifabric/icons';

initializeIcons();

class MyPage extends React.Component {
  render() {
    return (
      <div style={{width: '200px'}}>
        <Fabric>
          <Dropdown
              defaultSelectedKey='A'
              options={
                  [
                      { key: 'A', text: '田中' },
                      { key: 'B', text: '山田' },
                  ]
              }
              disabled={false}
          />
          <Checkbox
            label='checkbox'
            ariaDescribedBy={'descriptionID'}
          />
        </Fabric>
      </div>
    );
  }
}

ReactDOM.render(<MyPage />, document.getElementById("app"));

スクリーンショット_112017_061206_PM.jpg

表示されました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?