Office UI Fabric のちょっとしたハマりどころの共有です。
Office UI Fabric で、チェックボックスのチェックマークとかプルダウンの下向き括弧とかのアイコンが表示されなくてなんでかなーと思ったら、initializeIcons() を呼ぶ必要がありました。
チェックしても色がつくだけでチェックマークが表示されない。
ここに 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"));
表示されました。