A}
>
Letter Avatar
A
}
>
Letter Avatar with custom colors
);
//image avatar
element = A ;
//Letter avatar with custom colors
element =
// "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 = () => (
);
// "http://www.material-ui.com/#/components/raised-button"
const RaisedButtonExampleSimple = () => (
);
const RaisedButtonExampleComplex = () => (
);
// "http://www.material-ui.com/#/components/floating-action-button"
const FloatingActionButtonExampleSimple = () => (
);
// "http://www.material-ui.com/#/components/icon-button"
const IconButtonExampleSimple = () => (
);
const IconButtonExampleComplex = () => (
);
const IconButtonExampleTooltip = () => (
);
const IconButtonExampleTouch = () => (
);
//Method 1: muidocs-icon-github is defined in a style sheet.
element =
;
//Method 3: Manually creating a mui.FontIcon component within IconButton
element =
;
//Method 4: Using Google material-icons
element = settings_system_daydream ;
// "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.
);
// "http://www.material-ui.com/#/components/date-picker"
const DatePickerExampleSimple = () => (
);
const DatePickerExampleInline = () => (
);
element = (
);
element =
The actions in this window are created from the json that's passed in.
;
//Custom Actions
let customActions = [
The actions in this window were passed in as an array of react objects.
;
element =
Really long content
;
// "http://www.material-ui.com/#/components/divider"
const DividerExampleForm = () => (
);
const DividerExampleList = () => (
);
const DividerExampleMenu = () => (
);
// "http://www.material-ui.com/#/components/grid-list"
const tilesData = [
{
img: 'images/grid-list/00-52-29-429_640.jpg',
title: 'Breakfast',
author: 'jill111',
featured: false,
}];
const GridListExampleSimple = () => (
{tilesData.map(tile => (
by {tile.author} }
actionIcon={
)) }
);
const GridListExampleComplex = () => (
{tilesData.map(tile => (
);
element = GridTile}
actionPosition="left"
titlePosition="top"
titleBackground="rgba(0, 0, 0, 0.4)"
cols={2}
rows={1}
style={{ color: 'red' }}>
Children are Required!
;
// "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 = () => (
);
element = home ;
// "http://www.material-ui.com/#/components/left-nav"
element = (
Menu Item
Menu Item 2
);
element = (
this.setState(Object.assign({}, this.state, { open })) }
>
Menu Item
Menu Item 2
);
element = (
);
// "http://material-ui.com/#/components/lists"
const ListExampleSimple = () => (
);
const ListExampleChat = () => (
);
const ListExampleNested = () => (
);
const iconButtonElement = (
);
const rightIconMenu = (
Reply
Forward
Delete
);
const ListExampleMessages = () => (
Brunch this weekend?
}
secondaryTextLines={2}
/>
);
const ListExampleSelectable = () => (
);
// "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 = () => (
);
element = (
);
const IconMenuExampleScrollable = () => (
;
const menuItems = [
{menuItems}
);
element = (
);
// "http://material-ui.com/#/components/paper"
const PaperExampleSimple = () => (
);
const PaperExampleRounded = () => (
);
const PaperExampleCircle = () => (
);
// "http://www.material-ui.com/#/components/popover"
element = (
);
element = (
);
// "http://www.material-ui.com/#/components/circular-progress"
const CircularProgressExampleSimple = () => (
);
element = (
);
// "http://www.material-ui.com/#/components/linear-progress"
const LinearProgressExampleSimple = () => (
);
const RefreshIndicatorExampleLoading = () => (
);
// "http://www.material-ui.com/#/components/select-field"
element = (
);
element = (
{menuItems}
);
element = (
);
element = (
{menuItems}
{menuItems}
);
const {value} = this.state;
const night = value === 2 || value === 3;
element = (
{menuItems}
{menuItems}
);
// "http://www.material-ui.com/#/components/slider"
const SliderExampleSimple = () => (
);
const SliderExampleDisabled = () => (
);
const SliderExampleStep = () => (
);
// "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"
element = (
);
element = (
);
// "http://www.material-ui.com/#/components/table"
element = (
ID
Name
Status
1
John Smith
Employed
2
Randal White
Unemployed
3
Stephanie Sanders
Employed
4
Steve Brown
Employed
);
const tableData = [
{
name: 'John Smith',
status: 'Employed',
selected: true,
},
];
element = (
Super Header
ID
Name
Status
{tableData.map( (row, index) => (
{index}
{row.name}
{row.status}
))}
ID
Name
Status
Super Footer
Table Properties
TableBody Properties
);
// "http://www.material-ui.com/#/components/tabs"
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.
);
element = (
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} />
);
// "http://www.material-ui.com/#/components/text-field"
const TextFieldExampleSimple = () => (
);
const TextFieldExampleError = () => (
);
const TextFieldExampleCustomize = () => (
);
const TextFieldExampleDisabled = () => (
);
element =
);
element = (
this.picker12hr = t}
format="ampm"
hintText="12hr Format"
onChange={this.handleChangeTimePicker12}
/>
this.picker24hr = t}
format="24hr"
hintText="24hr Format"
onChange={this.handleChangeTimePicker24}
/>
);
// "http://www.material-ui.com/#/components/toolbar"
const ToolbarExamplesSimple = () => (
);
return element;
}
}