@material-ui/icons#Email TypeScript Examples
The following examples show how to use
@material-ui/icons#Email.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: with-basic-usage.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
withBasicUsage = (): StoryFnReactReturnType => {
const value = text('Avatar.value', 'AB');
const avatar = <Avatar>{value}</Avatar>;
return (
<UserMenu
avatar={avatar}
menuGroups={[
{
items: [
{
title: 'Settings',
icon: <Settings />,
onClick: action("click 'Settings'"),
},
{
title: 'Contact Us',
icon: <Email />,
onClick: action("click 'Contact Us'"),
},
{
title: 'Log Out',
icon: <ExitToApp style={getLeftToRightIconTransform()} />,
onClick: action("click 'Log Out'"),
},
],
},
]}
onOpen={action('open')}
onClose={action('close')}
/>
);
}
Example #2
| Source File: with-menu-header.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
withMenuHeader = (): StoryFnReactReturnType => {
const avatar = <Avatar>EM</Avatar>;
const menuTitle = text('menuTitle', 'Menu Title');
const menuSubtitle = text('menuSubtitle', 'Menu Subtitle');
return (
<UserMenu
avatar={avatar}
menuGroups={[
{
items: [
{
title: 'Settings',
icon: <Settings />,
onClick: action("click 'Settings'"),
},
{
title: 'Contact Us',
icon: <Email />,
onClick: action("click 'Contact Us'"),
},
{
title: 'Log Out',
icon: <ExitToApp style={getLeftToRightIconTransform()} />,
onClick: action("click 'Log Out'"),
},
],
},
]}
menuTitle={menuTitle}
menuSubtitle={menuSubtitle}
onOpen={action('open')}
onClose={action('close')}
/>
);
}
Example #3
| Source File: with-custom-colors.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withCustomColors = (): StoryFnReactReturnType => {
const useStyles = makeStyles({
root: {
color: color('fontColor', Colors.white[50], 'Avatar'),
backgroundColor: color('backgroundColor', Colors.blue[800], 'Avatar'),
},
paper: {
backgroundColor: color('backgroundColor', Colors.white[50], 'Menu'),
},
});
const classes = useStyles();
const avatar = <Avatar classes={{ root: classes.root }}>CD</Avatar>;
return (
<UserMenu
avatar={avatar}
menuGroups={[
{
items: [
{
title: 'Settings',
icon: <Settings />,
onClick: action("click 'Settings'"),
},
{
title: 'Contact Us',
icon: <Email />,
onClick: action("click 'Contact Us'"),
},
{
title: 'Log Out',
icon: <ExitToApp style={getLeftToRightIconTransform()} />,
onClick: action("click 'Log Out'"),
},
],
fontColor: color('menuGroups.fontColor', Colors.black[500], 'Menu'),
iconColor: color('menuGroups.iconColor', Colors.black[500], 'Menu'),
},
]}
MenuProps={{ classes: { paper: classes.paper } }}
onOpen={action('open')}
onClose={action('close')}
/>
);
}
Example #4
| Source File: with-menu-placement-options.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withMenuPlacementOptions = (): StoryFnReactReturnType => {
const anchorOriginHorizontal = select(
'MenuProps.anchorOrigin.horizontal',
['left', 'center', 'right'],
'left',
'Menu'
);
const anchorOriginVertical = select('MenuProps.anchorOrigin.vertical', ['top', 'center', 'bottom'], 'top', 'Menu');
const transformOriginHorizontal = select(
'MenuProps.transformOrigin.horizontal',
['left', 'center', 'right'],
'left',
'Menu'
);
const transformOriginVertical = select(
'MenuProps.transformOrigin.vertical',
['top', 'center', 'bottom'],
'top',
'Menu'
);
return (
<UserMenu
avatar={<Avatar>CD</Avatar>}
menuGroups={[
{
items: [
{
title: 'Settings',
icon: <Settings />,
onClick: action("click 'Settings'"),
},
{
title: 'Contact Us',
icon: <Email />,
onClick: action("click 'Contact Us'"),
},
{
title: 'Log Out',
icon: <ExitToApp style={getLeftToRightIconTransform()} />,
onClick: action("click 'Log Out'"),
},
],
},
]}
MenuProps={{
anchorOrigin: { horizontal: anchorOriginHorizontal, vertical: anchorOriginVertical },
transformOrigin: { horizontal: transformOriginHorizontal, vertical: transformOriginVertical },
}}
onOpen={action('open')}
onClose={action('close')}
/>
);
}
Example #5
| Source File: with-non-text-avatar.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withNonTextAvatar = (): StoryFnReactReturnType => {
const tRexAvatar = <Avatar src={tRex} alt={'User Avatar'} />;
const iconAvatar = (
<Avatar>
<Pets />
</Avatar>
);
return (
<div style={{ display: 'flex', width: '100px', justifyContent: 'space-between' }}>
<UserMenu
avatar={tRexAvatar}
menuGroups={[
{
items: [
{
title: 'Settings',
icon: <Settings />,
onClick: action("click 'Settings'"),
},
{
title: 'Contact Us',
icon: <Email />,
onClick: action("click 'Contact Us'"),
},
{
title: 'Log Out',
icon: <ExitToApp style={getLeftToRightIconTransform()} />,
onClick: action("click 'Log Out'"),
},
],
},
]}
onOpen={action('open')}
onClose={action('close')}
/>
<UserMenu
avatar={iconAvatar}
menuGroups={[
{
items: [
{
title: 'Settings',
icon: <Settings />,
onClick: action("click 'Settings'"),
},
{
title: 'Contact Us',
icon: <Email />,
onClick: action("click 'Contact Us'"),
},
{
title: 'Log Out',
icon: <ExitToApp style={getLeftToRightIconTransform()} />,
onClick: action("click 'Log Out'"),
},
],
},
]}
onOpen={action('open')}
onClose={action('close')}
/>
</div>
);
}
Example #6
| Source File: within-a-toolbar.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withinToolbar = (): StoryFnReactReturnType => {
const useStyles = makeStyles({
root: {
height: 40,
minHeight: 'initial',
},
title: {
color: Colors.gray[600],
fontSize: 12,
textAlign: getDirection() === 'rtl' ? 'left' : 'right',
},
});
const menuItems: UserMenuItem[] = [
{
itemID: '1',
title: 'Settings',
icon: <Settings />,
onClick: action("click 'Settings'"),
},
{
itemID: '2',
title: 'Contact Us',
icon: <Email />,
onClick: action("click 'Contact Us'"),
},
{
itemID: '3',
title: 'Log Out',
divider: true,
icon: <ExitToApp style={getLeftToRightIconTransform()} />,
onClick: action("click 'Log Out'"),
},
{
itemID: '4',
title: 'v1.03.54',
InfoListItemProps: {
classes: useStyles(),
},
},
];
const menuGroups = [
{
items: menuItems,
},
];
return (
<div style={{ width: '80%', height: 150 }}>
<AppBar position={'relative'} color={'primary'} style={{ marginTop: -32 }}>
<Toolbar style={{ padding: '0 16px', minHeight: 'unset', height: '4rem' }}>
<Typography variant={'h6'}>Toolbar Title</Typography>
<Spacer flex={1} />
<UserMenu
avatar={<Avatar />}
menuGroups={menuGroups}
menuTitle={'Jane Doe'}
menuSubtitle={'Account Manager'}
onOpen={action('open')}
onClose={action('close')}
/>
</Toolbar>
</AppBar>
<div
style={{
height: '100%',
backgroundColor: useDarkMode() ? Colors.black[900] : Colors.white[50],
padding: 16,
}}
>
<Typography variant={'subtitle1'}>Body Content Goes Here</Typography>
</div>
</div>
);
}
Example #7
| Source File: with-full-config.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 4 votes |
|
withFullConfig = (): StoryFnReactReturnType => {
const useStyles = makeStyles({
root: {
color: color('fontColor', Colors.white[50], 'Avatar'),
backgroundColor: color('backgroundColor', Colors.blue[800], 'Avatar'),
},
paper: {
backgroundColor: color('backgroundColor', Colors.white[50], 'Menu'),
},
});
const classes = useStyles();
const avatar = <Avatar classes={{ root: classes.root }}>{text('Avatar.value', 'AB', 'Avatar')}</Avatar>;
const menuTitle = text('menuTitle', 'Menu Title', 'Menu');
const menuSubtitle = text('menuSubtitle', 'Menu Subtitle', 'Menu');
const anchorOriginHorizontal = select(
'MenuProps.anchorOrigin.horizontal',
['left', 'center', 'right'],
'left',
'Menu'
);
const anchorOriginVertical = select('MenuProps.anchorOrigin.vertical', ['top', 'center', 'bottom'], 'top', 'Menu');
const transformOriginHorizontal = select(
'MenuProps.transformOrigin.horizontal',
['left', 'center', 'right'],
'left',
'Menu'
);
const transformOriginVertical = select(
'MenuProps.transformOrigin.vertical',
['top', 'center', 'bottom'],
'top',
'Menu'
);
const useBottomSheetAt = number(
'useBottomSheetAt',
600,
{
range: true,
min: 0,
max: 1000,
step: 50,
},
'Menu'
);
return (
<UserMenu
avatar={avatar}
menuGroups={[
{
items: [
{
title: 'Settings',
icon: <Settings />,
onClick: action("click 'Settings'"),
},
{
title: 'Contact Us',
icon: <Email />,
onClick: action("click 'Contact Us'"),
},
{
title: 'Log Out',
icon: <ExitToApp style={getLeftToRightIconTransform()} />,
onClick: action("click 'Log Out'"),
},
],
fontColor: color('menuGroups.fontColor', Colors.black[500], 'Menu'),
iconColor: color('menuGroups.iconColor', Colors.blue[800], 'Menu'),
title: text('menuGroups[0].title', 'Account Management', 'Menu'),
},
]}
menuTitle={menuTitle}
menuSubtitle={menuSubtitle}
MenuProps={{
classes: { paper: classes.paper },
anchorOrigin: { horizontal: anchorOriginHorizontal, vertical: anchorOriginVertical },
transformOrigin: { horizontal: transformOriginHorizontal, vertical: transformOriginVertical },
}}
onOpen={action('open')}
onClose={action('close')}
useBottomSheetAt={useBottomSheetAt}
/>
);
}
