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 (
                 title="Summarize Text Data"
                 titleStyle={{textAlign: "center"}}
                         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" />

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';


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

export default App

index.html の編集

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


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