Help us understand the problem. What is going on with this article?

Typescript で Material UI の App Bar を使用した際のメモ書き

More than 3 years have passed since last update.

Typescript で Material UI の App Bar を使用した際のメモ書き

(2016.07.05 OS X El Capitan)

完成したアプリ: summarize-text-data アプリ

以前作成したテキストの文字数などを数えるウェブアプリ
Material UI を使用して、App Bar をつけてみる.

必要な npm パッケージのインストール

npm i material-ui react-tap-event-plugin --save-dev

型定義ファイルのインストール

typings i dt~material-ui --save --global
typings i dt~react-tap-event-plugin --save --global

App Bar

App Bar の作成. IconMenu を iconElementLeft に設定.

import * as React from 'react';
import {AppBar, IconButton, IconMenu, MenuItem} from 'material-ui';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

export default class AppBarIcon extends React.Component<any, any> {
    render () {
        return (
            <AppBar
                 title="Summarize Text Data"
                 titleStyle={{textAlign: "center"}}
                 iconElementLeft={
                     <IconMenu
                         iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
                         anchorOrigin={{horizontal: 'left', vertical: 'top'}}
                         targetOrigin={{horizontal: 'left', vertical: 'top'}}
                     >
                         <MenuItem primaryText="Version 0.0.1" />
                         <MenuItem primaryText="Version 0.0.1" />
                     </IconMenu>
                 }
            />
        );
    }
}

App.tsx の編集

より

import * as React from 'react';
import AppBarIcon from './AppBarIcon';
import FileDropzoneContainer from '../containers/FileDropzoneContainer';
import TextAreaContainer from '../containers/TextAreaContainer';
import SummaryContainer from '../containers/SummaryContainer';

import * as injectTapEventPlugin from 'react-tap-event-plugin';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

injectTapEventPlugin();

const App = () => (
    <MuiThemeProvider muiTheme={getMuiTheme()}>
        <div>
            <AppBarIcon />
            <FileDropzoneContainer />
            <TextAreaContainer />
            <SummaryContainer />
        </div>
    </MuiThemeProvider>
)

export default App

index.html の編集

<html>
<head>
    <title>Summarize Text Data</title>
</head>
<body>
    <div id="root"></div>
    <script src="build.js"></script>
</body>
</html>

その他

style でテキストエリアのマージンなどを調整した.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away