}
iconElementRight={
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
}
/>
);
// "http://www.material-ui.com/#/components/auto-complete"
export class AutoCompleteExampleSimple extends React.Component<{}, {dataSource: string[]}> {
constructor(props) {
super(props);
this.state = {
dataSource: [],
};
}
handleUpdateInput = (value) => {
this.setState({
dataSource: [
value,
value + value,
value + value + value,
],
});
};
render() {
return (
);
}
}
const dataSource1 = [
{
text: 'text-value1',
value: (
),
},
{
text: 'text-value2',
value: (
),
},
];
const dataSource2 = ['12345', '23456', '34567'];
const dataSource3 = [
{text: 'Some Text', value: 'someFirstValue'},
{text: 'Some Text', value: 'someSecondValue'},
];
const AutoCompleteExampleNoFilter = () => (
);
const colors = [
'Red',
'Orange',
'Yellow',
'Green',
'Blue',
'Purple',
'Black',
'White',
];
const fruit = [
'Apple', 'Apricot', 'Avocado',
'Banana', 'Bilberry', 'Blackberry', 'Blackcurrant', 'Blueberry',
'Boysenberry', 'Blood Orange',
'Cantaloupe', 'Currant', 'Cherry', 'Cherimoya', 'Cloudberry',
'Coconut', 'Cranberry', 'Clementine',
'Damson', 'Date', 'Dragonfruit', 'Durian',
'Elderberry',
'Feijoa', 'Fig',
'Goji berry', 'Gooseberry', 'Grape', 'Grapefruit', 'Guava',
'Honeydew', 'Huckleberry',
'Jabouticaba', 'Jackfruit', 'Jambul', 'Jujube', 'Juniper berry',
'Kiwi fruit', 'Kumquat',
'Lemon', 'Lime', 'Loquat', 'Lychee',
'Nectarine',
'Mango', 'Marion berry', 'Melon', 'Miracle fruit', 'Mulberry', 'Mandarine',
'Olive', 'Orange',
'Papaya', 'Passionfruit', 'Peach', 'Pear', 'Persimmon', 'Physalis', 'Plum', 'Pineapple',
'Pumpkin', 'Pomegranate', 'Pomelo', 'Purple Mangosteen',
'Quince',
'Raspberry', 'Raisin', 'Rambutan', 'Redcurrant',
'Salal berry', 'Satsuma', 'Star fruit', 'Strawberry', 'Squash', 'Salmonberry',
'Tamarillo', 'Tamarind', 'Tomato', 'Tangerine',
'Ugli fruit',
'Watermelon',
];
const AutoCompleteExampleFilters = () => (
);
// "http://www.material-ui.com/#/components/avatar"
const AvatarExampleSimple = () => (
}
>
Image Avatar
}
>
Image Avatar with custom size
} />
}
>
FontIcon Avatar
}
color={blue300}
backgroundColor={indigo900}
size={30}
style={style}
/>
}
>
FontIcon Avatar with custom colors and size
} />
}
>
SvgIcon Avatar
}
color={orange200}
backgroundColor={pink400}
size={30}
style={style}
/>
}
>
SvgIcon Avatar with custom colors and size
A}
>
Letter Avatar
A
}
>
Letter Avatar with custom colors and size
);
// "http://www.material-ui.com/#/components/badge"
const BadgeExampleSimple = () => (
);
const BadgeExampleContent = () => (
}
>
Company Name
);
// "http://www.material-ui.com/#/components/flat-button"
const FlatButtonExampleSimple = () => (
);
const FlatButtonExampleComplex = () => (
);
const FlatButtonExampleIcon = () => (
}
style={style}
/>
}
style={style}
/>
}
style={style}
/>
);
// "http://www.material-ui.com/#/components/raised-button"
const RaisedButtonExampleSimple = () => (
);
const RaisedButtonExampleComplex = () => (
);
const RaisedButtonExampleIcon = () => (
}
style={style}
/>
}
style={style}
/>
}
style={style}
/>
);
// "http://www.material-ui.com/#/components/floating-action-button"
const FloatingActionButtonExampleSimple = () => (
);
// "http://www.material-ui.com/#/components/icon-button"
const IconButtonExampleSimple = () => (
);
const IconButtonExampleComplex = () => (
);
const IconButtonExampleSize = () => (
);
const IconButtonExampleTooltip = () => (
);
const IconButtonExampleTouch = () => (
);
// "http://www.material-ui.com/#/components/card"
const CardExampleWithAvatar = () => (
}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
);
const CardExampleWithoutAvatar = () => (
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
);
class CardExampleControlled extends React.Component<{}, {expanded: boolean}> {
constructor(props) {
super(props);
this.state = {
expanded: false,
};
}
handleExpandChange = (expanded) => {
this.setState({expanded: expanded});
};
handleToggle = (event, toggle) => {
this.setState({expanded: toggle});
};
handleExpand = () => {
this.setState({expanded: true});
};
handleReduce = () => {
this.setState({expanded: false});
};
render() {
return (
}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
);
}
}
// "http://www.material-ui.com/#/components/chip"
const ChipExampleSimple = () => (
Basic Chip
Blue Background
Blue Label Color
UI Avatar
Styled
);
class ChipExampleComplex extends React.Component<{}, {}>{
handleRequestDelete = () => {
alert('You clicked the delete button.');
}
handleTouchTap = () => {
alert('You clicked the Chip.');
}
render() {
return (
Click Me
);
}
}
// "http://www.material-ui.com/#/components/date-picker"
const DatePickerExampleSimple = () => (
);
const DatePickerExampleInline = () => (
);
const optionsStyle = {
maxWidth: 255,
marginRight: 'auto',
};
interface DatePickerExampleToggleState {
minDate?: Date;
maxDate?: Date;
autoOk?: boolean;
disableYearSelection?: boolean;
}
class DatePickerExampleToggle extends React.Component<{}, DatePickerExampleToggleState> {
constructor(props) {
super(props);
const minDate = new Date();
const maxDate = new Date();
minDate.setFullYear(minDate.getFullYear() - 1);
minDate.setHours(0, 0, 0, 0);
maxDate.setFullYear(maxDate.getFullYear() + 1);
maxDate.setHours(0, 0, 0, 0);
this.state = {
minDate: minDate,
maxDate: maxDate,
autoOk: false,
disableYearSelection: false,
};
}
handleChangeMinDate = (event, date) => {
this.setState({
minDate: date,
});
};
handleChangeMaxDate = (event, date) => {
this.setState({
maxDate: date,
});
};
handleToggle = (event, toggled) => {
this.setState({
[event.target.name]: toggled,
});
};
render() {
return (
);
}
}
class DatePickerExampleControlled extends React.Component<{}, {controlledDate?: Date}> {
constructor(props) {
super(props);
this.state = {
controlledDate: null,
};
}
handleChange = (event, date) => {
this.setState({
controlledDate: date,
});
};
render() {
return (
);
}
}
function disableWeekends(date) {
return date.getDay() === 0 || date.getDay() === 6;
}
function disableRandomDates() {
return Math.random() > 0.7;
}
const DatePickerExampleDisableDates = () => (
);
let DateTimeFormat = new Intl.DateTimeFormat('fr');
const DatePickerExampleInternational = () => (
);
// "http://material-ui.com/#/components/dialog"
class DialogExampleSimple extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
,
,
];
return (
);
}
}
class DialogExampleModal extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
,
,
];
return (
);
}
}
class DialogExampleCustomWidth extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
,
,
];
return (
);
}
}
class DialogExampleDialogDatePicker extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
,
];
return (
);
}
}
class DialogExampleScrollable extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
,
,
];
const radios = [];
for (let i = 0; i < 30; i++) {
radios.push(
);
}
return (
);
}
}
class DialogExampleAlert extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
,
,
];
return (
);
}
}
// "http://www.material-ui.com/#/components/divider"
const DividerExampleForm = () => (
);
const DividerExampleList = () => (
);
const DividerExampleMenu = () => (
);
// "http://www.material-ui.com/#/components/drawer"
class DrawerSimpleExample extends React.Component<{}, {open?: boolean}> {
constructor(props) {
super(props);
this.state = {open: false};
}
handleToggle = () => this.setState({open: !this.state.open});
render() {
return (
);
}
}
class DrawerUndockedExample extends React.Component<{}, {open?: boolean}> {
constructor(props) {
super(props);
this.state = {open: false};
}
handleToggle = () => this.setState({open: !this.state.open});
handleClose = () => this.setState({open: false});
render() {
return (
this.setState({open})}
>
);
}
}
class DrawerOpenRightExample extends React.Component<{}, {open?: boolean}> {
constructor(props) {
super(props);
this.state = {open: false};
}
handleToggle = () => this.setState({open: !this.state.open});
render() {
return (
);
}
}
// "http://www.material-ui.com/#/components/grid-list"
const tilesData: {img: string, title: string, author: string, featured?: boolean}[] = [
{
img: 'images/grid-list/00-52-29-429_640.jpg',
title: 'Breakfast',
author: 'jill111',
featured: true,
},
{
img: 'images/grid-list/burger-827309_640.jpg',
title: 'Tasty burger',
author: 'pashminu',
},
{
img: 'images/grid-list/camera-813814_640.jpg',
title: 'Camera',
author: 'Danson67',
},
{
img: 'images/grid-list/morning-819362_640.jpg',
title: 'Morning',
author: 'fancycrave1',
},
{
img: 'images/grid-list/hats-829509_640.jpg',
title: 'Hats',
author: 'Hans',
},
{
img: 'images/grid-list/honey-823614_640.jpg',
title: 'Honey',
author: 'fancycravel',
},
{
img: 'images/grid-list/vegetables-790022_640.jpg',
title: 'Vegetables',
author: 'jill111',
},
{
img: 'images/grid-list/water-plant-821293_640.jpg',
title: 'Water plant',
author: 'BkrmadtyaKarki',
},
];
const GridListExampleSimple = () => (
December
{tilesData.map((tile) => (
by {tile.author}}
actionIcon={}
>
))}
);
const GridListExampleComplex = () => (
{tilesData.map((tile) => (
}
actionPosition="left"
titlePosition="top"
titleBackground="linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)"
cols={tile.featured ? 2 : 1}
rows={tile.featured ? 2 : 1}
>
))}
);
// "http://www.material-ui.com/#/components/font-icon"
const FontIconExampleSimple = () => (
);
const FontIconExampleIcons = () => (
home
flight_takeoff
cloud_download
videogame_asset
);
// "http://www.material-ui.com/#/components/svg-icon"
const HomeIcon = (props) => (
);
const SvgIconExampleSimple = () => (
);
const SvgIconExampleIcons = () => (
);
// "http://material-ui.com/#/components/lists"
const ListExampleSimple = () => (
} />
} />
} />
} />
} />
} />
} />
} />
} />
);
const ListExampleChat = () => (
Recent chats
}
rightIcon={}
/>
}
rightIcon={}
/>
}
rightIcon={}
/>
}
rightIcon={}
/>
}
rightIcon={}
/>
Previous chats
}
/>
}
/>
);
const ListExampleContacts = () => (
}
rightAvatar={}
/>
}
/>
}
/>
}
/>
A
}
rightAvatar={}
/>
}
/>
}
/>
}
/>
);
const ListExampleFolder = () => (
Folders
} />}
rightIcon={}
primaryText="Photos"
secondaryText="Jan 9, 2014"
/>
} />}
rightIcon={}
primaryText="Recipes"
secondaryText="Jan 17, 2014"
/>
} />}
rightIcon={}
primaryText="Work"
secondaryText="Jan 28, 2014"
/>
Files
} backgroundColor={blue500} />}
rightIcon={}
primaryText="Vacation itinerary"
secondaryText="Jan 20, 2014"
/>
} backgroundColor={yellow600} />}
rightIcon={}
primaryText="Kitchen remodel"
secondaryText="Jan 10, 2014"
/>
);
const ListExampleNested = () => (
Nested List Items
} />
} />
}
initiallyOpen={true}
primaryTogglesNestedList={true}
nestedItems={[
}
/>,
}
disabled={true}
nestedItems={[
} />,
]}
/>,
]}
/>
);
const ListExampleSettings = () => (
General
Hangout Notifications
}
primaryText="Notifications"
secondaryText="Allow notifications"
/>
}
primaryText="Sounds"
secondaryText="Hangouts message"
/>
}
primaryText="Video sounds"
secondaryText="Hangouts video call"
/>
Priority Interruptions
} />
} />
} />
Hangout Notifications
} />
} />
} />
);
const ListExamplePhone = () => (
}
rightIcon={}
primaryText="(650) 555 - 1234"
secondaryText="Mobile"
/>
}
primaryText="(323) 555 - 6789"
secondaryText="Work"
/>
}
primaryText="aliconnors@example.com"
secondaryText="Personal"
/>
);
const iconButtonElement = (
);
const rightIconMenu = (
);
const ListExampleMessages = () => (
Today
}
primaryText="Brunch this weekend?"
secondaryText={
Brendan Lim --
I'll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
}
secondaryTextLines={2}
/>
}
primaryText={
Summer BBQ 4
}
secondaryText={
to me, Scott, Jennifer --
Wish I could come, but I'm out of town this weekend.
}
secondaryTextLines={2}
/>
}
primaryText="Oui oui"
secondaryText={
Grace Ng --
Do you have Paris recommendations? Have you ever been?
}
secondaryTextLines={2}
/>
}
primaryText="Birdthday gift"
secondaryText={
Kerem Suer --
Do you have any ideas what we can get Heidi for her birthday? How about a pony?
}
secondaryTextLines={2}
/>
}
primaryText="Recipe to try"
secondaryText={
Raquel Parrado --
We should eat this: grated squash. Corn and tomatillo tacos.
}
secondaryTextLines={2}
/>
Today
}
rightIconButton={rightIconMenu}
primaryText="Brendan Lim"
secondaryText={
Brunch this weekend?
I'll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
}
secondaryTextLines={2}
/>
}
rightIconButton={rightIconMenu}
primaryText="me, Scott, Jennifer"
secondaryText={
Summer BBQ
Wish I could come, but I'm out of town this weekend.
}
secondaryTextLines={2}
/>
}
rightIconButton={rightIconMenu}
primaryText="Grace Ng"
secondaryText={
Oui oui
Do you have any Paris recs? Have you ever been?
}
secondaryTextLines={2}
/>
}
rightIconButton={rightIconMenu}
primaryText="Kerem Suer"
secondaryText={
Birthday gift
Do you have any ideas what we can get Heidi for her birthday? How about a pony?
}
secondaryTextLines={2}
/>
}
rightIconButton={rightIconMenu}
primaryText="Raquel Parrado"
secondaryText={
Recipe to try
We should eat this: grated squash. Corn and tomatillo tacos.
}
secondaryTextLines={2}
/>
);
function wrapState(ComposedComponent: React.ComponentClass<__MaterialUI.List.SelectableProps>) {
return class SelectableList extends Component<{defaultValue: number}, {selectedIndex: number}> {
static propTypes = {
children: PropTypes.node.isRequired,
defaultValue: PropTypes.number.isRequired,
};
componentWillMount() {
this.setState({
selectedIndex: this.props.defaultValue,
});
}
handleRequestChange = (event, index) => {
this.setState({
selectedIndex: index,
});
};
render() {
return (
{this.props.children}
);
}
};
}
let SelectableList = wrapState(MakeSelectable(List));
const ListExampleSelectable = () => (
Selectable Contacts
}
nestedItems={[
}
/>,
]}
/>
}
/>
}
/>
}
/>
);
// "http://www.material-ui.com/#/components/menu"
const MenuExampleSimple = () => (
);
const MenuExampleDisable = () => (
);
const MenuExampleIcons = () => (
);
const MenuExampleSecondary = () => (
);
const MenuExampleNested = () => (
);
// "http://www.material-ui.com/#/components/icon-menu"
const IconMenuExampleSimple = () => (
}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
}
anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
targetOrigin={{horizontal: 'left', vertical: 'bottom'}}
>
}
anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
targetOrigin={{horizontal: 'right', vertical: 'bottom'}}
>
}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
>
);
interface IconMenuExampleControlledState {
valueSingle?: string;
valueMultiple?: string[];
openMenu?: boolean;
}
class IconMenuExampleControlled extends React.Component<{}, IconMenuExampleControlledState> {
constructor(props) {
super(props);
this.state = {
valueSingle: '3',
valueMultiple: ['3', '5'],
};
}
handleChangeSingle = (event, value) => {
this.setState({
valueSingle: value,
});
};
handleChangeMultiple = (event, value) => {
this.setState({
valueMultiple: value,
});
};
handleOpenMenu = () => {
this.setState({
openMenu: true,
});
}
handleOnRequestChange = (value) => {
this.setState({
openMenu: value,
});
}
render() {
return (
}
onChange={this.handleChangeSingle}
value={this.state.valueSingle}
>
}
onChange={this.handleChangeMultiple}
value={this.state.valueMultiple}
multiple={true}
>
}
open={this.state.openMenu}
onRequestChange={this.handleOnRequestChange}
>
);
}
}
const IconMenuExampleScrollable = () => (
}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
maxHeight={272}
>
);
const IconMenuExampleNested = () => (
}
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
>
}
menuItems={[
,
,
,
,
]}
/>
}
menuItems={[
,
,
,
,
]}
/>
} />
);
// "http://www.material-ui.com/#/components/dropdown-menu"
class DropDownMenuSimpleExample extends React.Component<{}, {value?: number}> {
constructor(props) {
super(props);
this.state = {value: 1};
}
handleChange = (event, index, value) => this.setState({value});
render() {
return (
);
}
}
class DropDownMenuOpenImmediateExample extends React.Component<{}, {value?: number}> {
constructor(props) {
super(props);
this.state = {value: 2};
}
handleChange = (event, index, value) => this.setState({value});
render() {
return (
);
}
}
const items: React.ReactElement<__MaterialUI.Menus.MenuItemProps>[] = [];
for (let i = 0; i < 100; i++ ) {
items.push();
}
class DropDownMenuLongMenuExample extends React.Component<{}, {value?: number}> {
constructor(props) {
super(props);
this.state = {value: 10};
}
handleChange = (event, index, value) => this.setState({value});
render() {
return (
{items}
);
}
}
class DropDownMenuLabeledExample extends React.Component<{}, {value?: number}> {
constructor(props) {
super(props);
this.state = {value: 2};
}
handleChange = (event, index, value) => this.setState({value});
render() {
return (
);
}
}
// "http://material-ui.com/#/components/paper"
const PaperExampleSimple = () => (
);
const PaperExampleRounded = () => (
);
const PaperExampleCircle = () => (
);
// "http://www.material-ui.com/#/components/popover"
class PopoverExampleSimple extends React.Component<{}, {open?: boolean, anchorEl?: React.ReactInstance}> {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
handleTouchTap = (event) => {
// This prevents ghost click.
event.preventDefault();
this.setState({
open: true,
anchorEl: event.currentTarget,
});
};
handleRequestClose = () => {
this.setState({
open: false,
});
};
render() {
return (
);
}
}
class PopoverExampleAnimation extends React.Component<{}, {open?: boolean, anchorEl?: React.ReactInstance}> {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
handleTouchTap = (event) => {
// This prevents ghost click.
event.preventDefault();
this.setState({
open: true,
anchorEl: event.currentTarget,
});
};
handleRequestClose = () => {
this.setState({
open: false,
});
};
render() {
return (
);
}
}
interface PopoverExampleConfigurableState {
open?: boolean;
anchorOrigin?: __MaterialUI.propTypes.origin;
targetOrigin?: __MaterialUI.propTypes.origin;
anchorEl?: React.ReactInstance;
}
class PopoverExampleConfigurable extends React.Component<{}, PopoverExampleConfigurableState> {
constructor(props) {
super(props);
this.state = {
open: false,
anchorOrigin: {
horizontal: 'left',
vertical: 'bottom',
},
targetOrigin: {
horizontal: 'left',
vertical: 'top',
},
};
}
handleTouchTap = (event) => {
// This prevents ghost click.
event.preventDefault();
this.setState({
open: true,
anchorEl: event.currentTarget,
});
};
handleRequestClose = () => {
this.setState({
open: false,
});
};
setAnchor = (positionElement, position) => {
const {anchorOrigin} = this.state;
anchorOrigin[positionElement] = position;
this.setState({
anchorOrigin: anchorOrigin,
});
};
setTarget = (positionElement, position) => {
const {targetOrigin} = this.state;
targetOrigin[positionElement] = position;
this.setState({
targetOrigin: targetOrigin,
});
};
render() {
return (
Current Settings
anchorOrigin: {JSON.stringify(this.state.anchorOrigin)}
targetOrigin: {JSON.stringify(this.state.targetOrigin)}
Position Options
Use the settings below to toggle the positioning of the popovers above
Anchor Origin
Target Origin
);
}
}
// "http://www.material-ui.com/#/components/circular-progress"
const CircularProgressExampleSimple = () => (
);
class CircularProgressExampleDeterminate extends React.Component<{}, {completed?: number}> {
private timer: number;
constructor(props) {
super(props);
this.state = {
completed: 0,
};
}
componentDidMount() {
this.timer = setTimeout(() => this.progress(5), 1000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
progress(completed) {
if (completed > 100) {
this.setState({completed: 100});
} else {
this.setState({completed});
const diff = Math.random() * 10;
this.timer = setTimeout(() => this.progress(completed + diff), 1000);
}
}
render() {
return (
);
}
}
// "http://www.material-ui.com/#/components/linear-progress"
const LinearProgressExampleSimple = () => (
);
class LinearProgressExampleDeterminate extends React.Component<{}, {completed?: number}> {
private timer: number;
constructor(props) {
super(props);
this.state = {
completed: 0,
};
}
componentDidMount() {
this.timer = setTimeout(() => this.progress(5), 1000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
progress(completed) {
if (completed > 100) {
this.setState({completed: 100});
} else {
this.setState({completed});
const diff = Math.random() * 10;
this.timer = setTimeout(() => this.progress(completed + diff), 1000);
}
}
render() {
return (
);
}
}
// "http://www.material-ui.com/#/components/refresh-indicator"
const RefreshIndicatorExampleSimple = () => (
);
const RefreshIndicatorExampleLoading = () => (
);
// "http://www.material-ui.com/#/components/select-field"
class SelectFieldExampleSimple extends React.Component<{}, {value?: number}> {
constructor(props) {
super(props);
this.state = {value: 1};
}
handleChange = (event, index, value) => this.setState({value});
render() {
return (
);
}
}
class SelectFieldLongMenuExample extends React.Component<{}, {value?: number}> {
constructor(props) {
super(props);
this.state = {value: 10};
}
handleChange = (event, index, value) => this.setState({value});
render() {
return (
{items}
);
}
}
class SelectFieldExampleCustomLabel extends React.Component<{}, {value?: number}> {
constructor(props) {
super(props);
this.state = {value: 1};
}
handleChange = (event, index, value) => this.setState({value});
render() {
return (
);
}
}
const itemsPeriod = [
,
,
,
,
,
];
export default class SelectFieldExampleFloatingLabel extends React.Component<{}, {value?: number}> {
constructor(props) {
super(props);
this.state = {value: null};
}
handleChange = (event, index, value) => this.setState({value});
render() {
return (
{itemsPeriod}
{itemsPeriod}
);
}
}
class SelectFieldExampleError extends React.Component<{}, {value?: number}> {
constructor(props) {
super(props);
this.state = {value: null};
}
handleChange = (event, index, value) => this.setState({value});
render() {
const {value} = this.state;
const night = value === 2 || value === 3;
return (
{itemsPeriod}
{itemsPeriod}
);
}
}
// "http://www.material-ui.com/#/components/slider"
const SliderExampleSimple = () => (
);
const SliderExampleDisabled = () => (
);
const SliderExampleStep = () => (
);
class SliderExampleControlled extends React.Component<{}, {firstSlider?: number, secondSlider?: number}> {
state = {
firstSlider: 0.5,
secondSlider: 50,
}
handleFirstSlider(event, value) {
this.setState({firstSlider: value});
}
handleSecondSlider(event, value) {
this.setState({secondSlider: value});
}
render() {
return (
{'The value of this slider is: '}
{this.state.firstSlider}
{' from a range of 0 to 1 inclusive'}
{'The value of this slider is: '}
{this.state.secondSlider}
{' from a range of 0 to 100 inclusive'}
);
}
}
// "http://www.material-ui.com/#/components/checkbox"
const CheckboxExampleSimple = () => (
}
uncheckedIcon={
}
label="Custom icon"
style={styles.checkbox}
/>
);
// "http://www.material-ui.com/#/components/radio-button"
const RadioButtonExampleSimple = () => (
}
uncheckedIcon={}
style={styles.radioButton}
/>
);
// "http://www.material-ui.com/#/components/toggle"
const ToggleExampleSimple = () => (
);
// "http://material-ui.com/#/components/snackbar"
class SnackbarExampleSimple extends React.Component<{}, {open?: boolean}> {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
handleTouchTap = () => {
this.setState({
open: true,
});
};
handleRequestClose = () => {
this.setState({
open: false,
});
};
render() {
return (
);
}
}
class SnackbarExampleAction extends React.Component<{}, {open?: boolean, autoHideDuration?: number, message?: string}> {
constructor(props) {
super(props);
this.state = {
autoHideDuration: 4000,
message: 'Event added to your calendar',
open: false,
};
}
handleTouchTap = () => {
this.setState({
open: true,
});
};
handleActionTouchTap = () => {
this.setState({
open: false,
});
alert('Event removed from your calendar.');
};
handleChangeDuration = (event) => {
const value = event.target.value;
this.setState({
autoHideDuration: value.length > 0 ? parseInt(value) : 0,
});
};
handleRequestClose = () => {
this.setState({
open: false,
});
};
render() {
return (
);
}
}
class SnackbarExampleTwice extends React.Component<{}, {open?: boolean, message?: string}> {
private timer: number;
constructor(props) {
super(props);
this.state = {
message: 'Event 1 added to your calendar',
open: false,
};
this.timer = undefined;
}
componentWillUnMount() {
clearTimeout(this.timer);
}
handleTouchTap = () => {
this.setState({
open: true,
});
this.timer = setTimeout(() => {
this.setState({
message: `Event ${Math.round(Math.random() * 100)} added to your calendar`,
});
}, 1500);
};
handleRequestClose = () => {
this.setState({
open: false,
});
};
render() {
return (
);
}
}
// "http://www.material-ui.com/#/components/stepper"
class HorizontalLinearStepper extends React.Component<{}, {stepIndex?: number, finished?: boolean}> {
state = {
finished: false,
stepIndex: 0,
};
handleNext = () => {
const {stepIndex} = this.state;
this.setState({
stepIndex: stepIndex + 1,
finished: stepIndex >= 2,
});
};
handlePrev = () => {
const {stepIndex} = this.state;
if (stepIndex > 0) {
this.setState({stepIndex: stepIndex - 1});
}
};
getStepContent(stepIndex) {
switch (stepIndex) {
case 0:
return 'Select campaign settings...';
case 1:
return 'What is an ad group anyways?';
case 2:
return 'This is the bit I really care about!';
default:
return 'You\'re a long way from home sonny jim!';
}
}
render() {
const {finished, stepIndex} = this.state;
const contentStyle = {margin: '0 16px'};
return (
Select campaign settings
Create an ad group
Create an ad
);
}
}
class VerticalLinearStepper extends React.Component<{}, {stepIndex?: number, finished?: boolean}> {
state = {
finished: false,
stepIndex: 0,
};
handleNext = () => {
const {stepIndex} = this.state;
this.setState({
stepIndex: stepIndex + 1,
finished: stepIndex >= 2,
});
};
handlePrev = () => {
const {stepIndex} = this.state;
if (stepIndex > 0) {
this.setState({stepIndex: stepIndex - 1});
}
};
renderStepActions(step) {
const {stepIndex} = this.state;
return (
{step > 0 && (
)}
);
}
render() {
const {finished, stepIndex} = this.state;
return (
Select campaign settings
For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.
{this.renderStepActions(0)}
Create an ad group
An ad group contains one or more ads which target a shared set of keywords.
{this.renderStepActions(1)}
Create an ad
Try out different ad text to see what brings in the most customers,
and learn how to enhance your ads using features like ad extensions.
If you run into any problems with your ads, find out how to tell if
they're running and how to resolve approval issues.
{this.renderStepActions(2)}
{finished && (
{
event.preventDefault();
this.setState({stepIndex: 0, finished: false});
}}
>
Click here
to reset the example.
)}
);
}
}
class HorizontalNonLinearStepper extends React.Component<{}, {stepIndex?: number}> {
state = {
stepIndex: 0,
};
handleNext = () => {
const {stepIndex} = this.state;
if (stepIndex < 2) {
this.setState({stepIndex: stepIndex + 1});
}
};
handlePrev = () => {
const {stepIndex} = this.state;
if (stepIndex > 0) {
this.setState({stepIndex: stepIndex - 1});
}
};
getStepContent(stepIndex) {
switch (stepIndex) {
case 0:
return 'Select campaign settings...';
case 1:
return 'What is an ad group anyways?';
case 2:
return 'This is the bit I really care about!';
default:
return 'You\'re a long way from home sonny jim!';
}
}
render() {
const {stepIndex} = this.state;
const contentStyle = {margin: '0 16px'};
return (
this.setState({stepIndex: 0})}>
Select campaign settings
this.setState({stepIndex: 1})}>
Create an ad group
this.setState({stepIndex: 2})}>
Create an ad
{this.getStepContent(stepIndex)}
);
}
}
class VerticalNonLinear extends React.Component<{}, {stepIndex?: number}> {
state = {
stepIndex: 0,
};
handleNext = () => {
const {stepIndex} = this.state;
if (stepIndex < 2) {
this.setState({stepIndex: stepIndex + 1});
}
};
handlePrev = () => {
const {stepIndex} = this.state;
if (stepIndex > 0) {
this.setState({stepIndex: stepIndex - 1});
}
};
renderStepActions(step) {
return (
{step > 0 && (
)}
);
}
render() {
const {stepIndex} = this.state;
return (
this.setState({stepIndex: 0})}>
Select campaign settings
For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.
{this.renderStepActions(0)}
this.setState({stepIndex: 1})}>
Create an ad group
An ad group contains one or more ads which target a shared set of keywords.
{this.renderStepActions(1)}
this.setState({stepIndex: 2})}>
Create an ad
Try out different ad text to see what brings in the most customers,
and learn how to enhance your ads using features like ad extensions.
If you run into any problems with your ads, find out how to tell if
they're running and how to resolve approval issues.
{this.renderStepActions(2)}
);
}
}
const getStyles = () => {
return {
root: {
width: '100%',
maxWidth: 700,
margin: 'auto',
},
content: {
margin: '0 16px',
},
actions: {
marginTop: 12,
},
backButton: {
marginRight: 12,
},
};
};
class GranularControlStepper extends React.Component<{}, {stepIndex?: number, visited?: number[]}> {
state = {
stepIndex: null,
visited: [],
};
componentWillMount() {
const {stepIndex, visited} = this.state;
this.setState({visited: visited.concat(stepIndex)});
}
componentWillUpdate(nextProps, nextState) {
const {stepIndex, visited} = nextState;
if (visited.indexOf(stepIndex) === -1) {
this.setState({visited: visited.concat(stepIndex)});
}
}
handleNext = () => {
const {stepIndex} = this.state;
if (stepIndex < 2) {
this.setState({stepIndex: stepIndex + 1});
}
};
handlePrev = () => {
const {stepIndex} = this.state;
if (stepIndex > 0) {
this.setState({stepIndex: stepIndex - 1});
}
};
getStepContent(stepIndex) {
switch (stepIndex) {
case 0:
return 'Select campaign settings...';
case 1:
return 'What is an ad group anyways?';
case 2:
return 'This is the bit I really care about!';
default:
return 'Click a step to get started.';
}
}
render() {
const {stepIndex, visited} = this.state;
const styles = getStyles();
return (
);
}
}
class CustomIcon extends React.Component<{}, {stepIndex?: number}> {
state = {
stepIndex: 0,
};
handleNext = () => {
const {stepIndex} = this.state;
if (stepIndex < 2) {
this.setState({stepIndex: stepIndex + 1});
}
};
handlePrev = () => {
const {stepIndex} = this.state;
if (stepIndex > 0) {
this.setState({stepIndex: stepIndex - 1});
}
};
getStepContent(stepIndex) {
switch (stepIndex) {
case 0:
return 'Select campaign settings...';
case 1:
return 'What is an ad group anyways?';
case 2:
return 'This is the bit I really care about!';
default:
return 'You\'re a long way from home sonny jim!';
}
}
render() {
return (
Select campaign settings
}
style={{color: red500}}
>
Create an ad group
Create an ad
);
}
}
// "http://www.material-ui.com/#/components/subheader"
// Included in ListExampleChat and ListExampleFolder
// "http://www.material-ui.com/#/components/table"
const TableExampleSimple = () => (
ID
Name
Status
1
John Smith
Employed
2
Randal White
Unemployed
3
Stephanie Sanders
Employed
4
Steve Brown
Employed
);
const tableData: {name: string, status: string, selected?: boolean}[] = [
{
name: 'John Smith',
status: 'Employed',
selected: true,
},
{
name: 'Randal White',
status: 'Unemployed',
},
{
name: 'Stephanie Sanders',
status: 'Employed',
selected: true,
},
{
name: 'Steve Brown',
status: 'Employed',
},
{
name: 'Joyce Whitten',
status: 'Employed',
},
{
name: 'Samuel Roberts',
status: 'Employed',
},
{
name: 'Adam Moore',
status: 'Employed',
},
];
interface TableExampleComplexState {
fixedHeader?: boolean,
fixedFooter?: boolean,
stripedRows?: boolean,
showRowHover?: boolean,
selectable?: boolean,
multiSelectable?: boolean,
enableSelectAll?: boolean,
deselectOnClickaway?: boolean,
showCheckboxes?: boolean,
height?: string,
}
class TableExampleComplex extends React.Component<{}, TableExampleComplexState> {
constructor(props) {
super(props);
this.state = {
fixedHeader: true,
fixedFooter: true,
stripedRows: false,
showRowHover: false,
selectable: true,
multiSelectable: false,
enableSelectAll: false,
deselectOnClickaway: true,
showCheckboxes: true,
height: '300px',
};
}
handleToggle = (event, toggled) => {
this.setState({
[event.target.name]: toggled,
});
};
handleChange = (event) => {
this.setState({height: event.target.value});
};
render() {
return (
Super Header
ID
Name
Status
{tableData.map( (row, index) => (
{index}
{row.name}
{row.status}
))}
ID
Name
Status
Super Footer
Table Properties
TableBody Properties
Multiple Properties
);
}
}
// "http://www.material-ui.com/#/components/tabs"
function handleActive(tab) {
alert(`A tab with this value property ${tab.props.value} was activated.`);
}
const TabsExampleSimple = () => (
Tab One
This is an example tab.
You can put any sort of HTML or react component in here. It even keeps the component state!
Tab Two
This is another example tab.
Tab Three
This is a third example tab.
);
class TabsExampleControlled extends React.Component<{}, {value?: string}> {
constructor(props) {
super(props);
this.state = {
value: 'a',
};
}
handleChange = (value) => {
this.setState({
value: value,
});
};
render() {
return (
Controllable Tab A
Tabs are also controllable if you want to programmatically pass them their values.
This allows for more functionality in Tabs such as not
having any Tab selected or assigning them different values.
Controllable Tab B
This is another example of a controllable tab. Remember, if you
use controllable Tabs, you need to give all of your tabs values or else
you wont be able to select them.
);
}
}
const TabsExampleIcon = () => (
} />
} />
favorite} />
);
const TabsExampleIconText = () => (
phone}
label="RECENTS"
/>
favorite}
label="FAVORITES"
/>
}
label="NEARBY"
/>
);
// "http://www.material-ui.com/#/components/text-field"
const TextFieldExampleSimple = () => (
);
const TextFieldExampleError = () => (
);
const TextFieldExampleCustomize = () => (
);
const TextFieldExampleDisabled = () => (
);
class TextFieldExampleControlled extends React.Component<{}, {value?: string}> {
constructor(props) {
super(props);
this.state = {
value: 'Property Value',
};
}
handleChange = (event) => {
this.setState({
value: event.target.value,
});
};
render() {
return (
);
}
}
// "http://www.material-ui.com/#/components/time-picker"
const TimePickerExampleSimple = () => (
);
class TimePickerExampleComplex extends React.Component<{}, {value24?: Date, value12?: Date}> {
constructor(props) {
super(props);
this.state = {value24: null, value12: null};
}
handleChangeTimePicker24 = (event, date) => {
this.setState({value24: date});
};
handleChangeTimePicker12 = (event, date) => {
this.setState({value12: date});
};
render() {
return (
);
}
}
const TimePickerInternational = () => (
);
// "http://www.material-ui.com/#/components/toolbar"
class ToolbarExamplesSimple extends React.Component<{}, {value?: number}> {
constructor(props) {
super(props);
this.state = {
value: 3,
};
}
handleChange = (event, index, value) => this.setState({value});
render() {
return (
}
>
);
}
}
const componentWithWidth = withWidth()(ToolbarExamplesSimple);
interface MaterialUiTestsState {
}
class MaterialUiTests extends React.Component<{}, MaterialUiTestsState> {
render () {
return (
);
}
}
// "http://www.material-ui.com/#/get-started/usage"
ReactDOM.render(
,
document.getElementById('app')
);