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 = () => (
);
// "http://www.material-ui.com/#/components/raised-button"
const RaisedButtonExampleSimple = () => (
);
const RaisedButtonExampleComplex = () => (
);
const RaisedButtonExampleIcon = () => (
);
// "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/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 (
);
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 = [
The actions in this window were passed in as an array of React objects.
);
}
}
class DialogExampleModal extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
Only actions can close this dialog.
);
}
}
class DialogExampleCustomWidth extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
This dialog spans the entire width of the screen.
);
}
}
class DialogExampleDialogDatePicker extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
Open a Date Picker dialog from within a dialog.
);
}
}
class DialogExampleScrollable extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
{radios}
);
}
}
class DialogExampleAlert extends React.Component<{}, {open?: boolean}> {
state = {
open: false,
};
handleOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
const actions = [
Discard draft?
);
}
}
// "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 (
Menu Item
Menu Item 2
);
}
}
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})}
>
Menu Item
Menu Item 2
);
}
}
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) => (
);
// "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
Previous chats
);
const ListExampleContacts = () => (
A
}
rightAvatar={
);
const ListExampleFolder = () => (
Folders
Files
);
const ListExampleNested = () => (
Nested List Items
);
const ListExampleSettings = () => (
General
Hangout Notifications
Priority Interruptions
Hangout Notifications
);
const ListExamplePhone = () => (
);
const iconButtonElement = (
);
const rightIconMenu = (
Reply
Forward
Delete
);
const ListExampleMessages = () => (
Today
Brendan Lim --
I'll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
}
secondaryTextLines={2}
/>
Summer BBQ 4
}
secondaryText={
to me, Scott, Jennifer --
Wish I could come, but I'm out of town this weekend.
}
secondaryTextLines={2}
/>
Grace Ng --
Do you have Paris recommendations? Have you ever been?
}
secondaryTextLines={2}
/>
Kerem Suer --
Do you have any ideas what we can get Heidi for her birthday? How about a pony?
}
secondaryTextLines={2}
/>
Raquel Parrado --
We should eat this: grated squash. Corn and tomatillo tacos.
}
secondaryTextLines={2}
/>
Today
Brunch this weekend?
}
secondaryTextLines={2}
/>
Summer BBQ
}
secondaryTextLines={2}
/>
Oui oui
}
secondaryTextLines={2}
/>
Birthday gift
}
secondaryTextLines={2}
/>
Recipe to try
}
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
);
// "http://www.material-ui.com/#/components/menu"
const MenuExampleSimple = () => (
);
const MenuExampleDisable = () => (
);
const MenuExampleIcons = () => (
settings} />
settings
}
/>
¶} />
§} />
);
const MenuExampleSecondary = () => (
);
const MenuExampleNested = () => (
);
// "http://www.material-ui.com/#/components/icon-menu"
const IconMenuExampleSimple = () => (
);
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 (
);
}
}
const IconMenuExampleScrollable = () => (
);
// "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(
{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)}
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 = () => (
);
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 = [
{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 = () => (
{'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 = () => (
);
// "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 (
);
}
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 (
);
}
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
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"
/>
);
// "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 (
);
}
}
interface MaterialUiTestsState {
}
class MaterialUiTests extends React.Component<{}, MaterialUiTestsState> {
render () {
return (
);
}
}
// "http://www.material-ui.com/#/get-started/usage"
ReactDOM.render(