@material-ui/icons#Settings TypeScript Examples
The following examples show how to use
@material-ui/icons#Settings.
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-different-variants.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
withDifferentVariants = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const navGroupItems: NavItem[] = [
{
title: 'Settings',
itemID: '1',
icon: <Settings />,
onClick: (): void => setSelected('1'),
},
{
title: 'Legal',
itemID: '2',
icon: <Gavel />,
onClick: (): void => setSelected('2'),
},
];
return (
<Drawer
open={boolean('open', true)}
variant={select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent')}
condensed={boolean('condensed (rail only)', false)}
ModalProps={{
disableEnforceFocus: true,
}}
activeItem={selected}
>
<DrawerHeader icon={<Menu />} title={'Drawer with variants'} />
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
</Drawer>
);
}
Example #2
| 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 #3
| 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 #4
| Source File: useDialogOpener.tsx From flect-chime-sdk-demo with Apache License 2.0 | 6 votes |
|
DialogOpenerSettings: { [key in DialogType]: DialogOpenerSetting } = {
SettingDialog: {
icon: <Settings />,
tooltip: "Setting",
},
LeaveDialog: {
icon: <ExitToApp />,
tooltip: "Exit",
},
}
Example #5
| Source File: with-full-config.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withFullConfig = (): StoryFnReactReturnType => {
const classes = useStyles();
const direction = getDirection();
const appBarGroupId = 'AppBar';
const threeLinerGroupId = 'ThreeLiner';
// AppBar props
const animationDuration = number('animationDuration', 300, {}, appBarGroupId);
const showBackgroundImage = boolean('show backgroundImage', true, appBarGroupId);
const collapsedHeight = number('collapsedHeight', 64, {}, appBarGroupId);
const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
const scrollThreshold = number('scrollThreshold', 136, {}, appBarGroupId);
const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap', appBarGroupId);
// ThreeLiner props
const title = text('title', 'title', threeLinerGroupId);
const subtitle = text('subtitle', 'subtitle', threeLinerGroupId);
const info = text('info', 'info', threeLinerGroupId);
return (
<AppBar
expandedHeight={expandedHeight}
collapsedHeight={collapsedHeight}
scrollThreshold={scrollThreshold}
animationDuration={animationDuration}
backgroundImage={showBackgroundImage ? bgImage : undefined}
variant={variant}
classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
>
<Toolbar classes={{ gutters: direction === 'rtl' ? classes.toolbarGuttersRTL : classes.toolbarGutters }}>
<IconButton onClick={action('home icon clicked...')} color={'inherit'} edge={'start'}>
<Menu />
</IconButton>
<Spacer />
<ThreeLiner
classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
className={clsx([classes.liner, direction === 'rtl' ? classes.linerRTL : ''])}
title={title}
subtitle={subtitle}
info={info}
animationDuration={animationDuration}
/>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<IconButton onClick={action('home icon clicked...')} color={'inherit'}>
<Home />
</IconButton>
<IconButton onClick={action('work icon clicked...')} color={'inherit'}>
<Work />
</IconButton>
<IconButton onClick={action('settings icon clicked...')} color={'inherit'}>
<Settings />
</IconButton>
</div>
</Toolbar>
</AppBar>
);
}
Example #6
| Source File: with-footer.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withFooter = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const navGroupItems: NavItem[] = [
{
title: 'Settings',
itemID: '1',
icon: <Settings />,
onClick: (): void => setSelected('1'),
},
{
title: 'Legal',
itemID: '2',
icon: <Gavel />,
onClick: (): void => setSelected('2'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader icon={<Menu />} title={'Footer Example'} />
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
<DrawerFooter
backgroundColor={color('backgroundColor', Colors.white[50])}
hideContentOnCollapse={boolean('hideContentOnCollapse', true)}
divider={boolean('divider', true)}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
padding: 16,
}}
>
<img
src={useDarkMode() ? EatonFooterLogoDark : EatonFooterLogoLight}
alt="Eaton Logo"
height={28}
width={'auto'}
/>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography
variant={'caption'}
>{`Copyright \u00A9 Eaton ${new Date().getFullYear()}`}</Typography>
<Typography variant={'caption'}>All Rights Reserved</Typography>
</div>
</div>
</DrawerFooter>
</Drawer>
);
}
Example #7
| Source File: with-multiple-DrawerNavGroups.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withMultipleNavGroups = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const navGroupItems1: NavItem[] = [
{
title: 'Identity Management',
itemID: '1',
icon: <Person />,
onClick: (): void => setSelected('1'),
},
{
title: 'Calendar',
itemID: '2',
icon: <Today />,
onClick: (): void => setSelected('2'),
},
{
title: 'Accessibility',
itemID: '3',
icon: <Accessibility />,
onClick: (): void => setSelected('3'),
},
{
title: 'Notifications',
itemID: '4',
icon: <NotificationsActive />,
onClick: (): void => setSelected('4'),
},
];
const navGroupItems2: NavItem[] = [
{
title: 'Settings',
itemID: '2-1',
icon: <Settings />,
onClick: (): void => setSelected('2-1'),
},
{
title: 'Legal',
itemID: '2-2',
icon: <Gavel />,
onClick: (): void => setSelected('2-2'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader
icon={<Menu />}
title={'Brightlayer UI Drawer'}
subtitle={'with multiple navigation groups'}
/>
<DrawerBody>
<DrawerNavGroup
title={text('navGroup[0].title', 'First DrawerNavGroup')}
titleDivider={boolean('titleDivider', true)}
items={navGroupItems1}
/>
{boolean('Add Spacer', true) && <Spacer />}
<DrawerNavGroup
title={text('navGroup[1].title', 'Second DrawerNavGroup')}
titleDivider={boolean('titleDivider', true)}
items={navGroupItems2}
/>
</DrawerBody>
</Drawer>
);
}
Example #8
| Source File: with-blui-app-bar.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withBluiAppBar = (): StoryFnReactReturnType => {
const classes = useStyles();
const direction = getDirection();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
const appBarGroupId = 'AppBar';
const threeLinerGroupId = 'ThreeLiner';
const toolbarMenuGroupId = 'ToolbarMenu';
// AppBar props
const animationDuration = number('animationDuration', 300, {}, appBarGroupId);
const showBackgroundImage = boolean('show backgroundImage', true, appBarGroupId);
const collapsedDesktopHeight = number('collapsedDesktopHeight', 64, {}, appBarGroupId);
const collapsedMobileHeight = number('collapsedMobileHeight', 56, {}, appBarGroupId);
const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
const scrollThreshold = number('scrollThreshold', 136, {}, appBarGroupId);
const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap', appBarGroupId);
// ThreeLiner props
const title = text('title', 'title', threeLinerGroupId);
const info = text('info', 'info', threeLinerGroupId);
// ToolbarMenu props
const toolbarLabel = text('label', 'Subtitle', toolbarMenuGroupId);
return (
<>
<AppBar
expandedHeight={expandedHeight}
collapsedHeight={!isMobile ? collapsedDesktopHeight : collapsedMobileHeight}
scrollThreshold={scrollThreshold}
animationDuration={animationDuration}
backgroundImage={showBackgroundImage ? bgImage : undefined}
variant={variant}
classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
>
<Toolbar
classes={{ gutters: direction === 'rtl' ? classes.toolbarGuttersRTL : classes.toolbarGutters }}
>
<IconButton onClick={action('home icon clicked...')} color={'inherit'} edge={'start'}>
<Menu />
</IconButton>
<Spacer />
<ThreeLiner
classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
className={clsx([classes.liner, direction === 'rtl' ? classes.linerRTL : ''])}
title={title}
subtitle={
<ToolbarMenu
classes={{ root: classes.toolbarMenuRoot }}
label={toolbarLabel}
menuGroups={menuGroups}
></ToolbarMenu>
}
info={info}
animationDuration={animationDuration}
/>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<IconButton onClick={action('home icon clicked...')} color={'inherit'}>
<Home />
</IconButton>
<IconButton onClick={action('work icon clicked...')} color={'inherit'}>
<Work />
</IconButton>
<IconButton onClick={action('settings icon clicked...')} color={'inherit'}>
<Settings />
</IconButton>
</div>
</Toolbar>
</AppBar>
<div>{getBodyFiller()}</div>
</>
);
}
Example #9
| 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 #10
| 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 #11
| 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 #12
| 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 #13
| 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}
/>
);
}
Example #14
| Source File: ResponsiveDrawer.tsx From UsTaxes with GNU Affero General Public License v3.0 | 4 votes |
|
function ResponsiveDrawer(props: DrawerItemsProps): ReactElement {
const classes = useStyles({ isMobile })
const theme = useTheme()
const { sections, isOpen, setOpen } = props
const drawer = (
<>
{/* {isMobile && <Toolbar />} */}
{sections.map(({ title, items }) => (
<Fragment key={`section ${title}`}>
<List
subheader={<ListSubheader disableSticky>{title}</ListSubheader>}
className={classes.list}
>
{items.map((item) => (
<ListItem
button
classes={{}}
key={item.title}
component={NavLink}
selected={location.pathname === item.url}
to={item.url}
>
<ListItemText primary={`${item.title}`} />
</ListItem>
))}
</List>
<Divider />
</Fragment>
))}
<List className={classes.listSocial}>
<ListItem className={classes.listItemSocial}>
<Link to={Urls.help}>
<IconButton color="secondary" aria-label="help, support, feedback">
<HelpOutlineRounded />
</IconButton>
</Link>
<IconButton
color="secondary"
aria-label="github, opens in new tab"
component="a"
href={`https://github.com/ustaxes/UsTaxes`}
target="_blank"
rel="noreferrer noopener"
>
<GitHubIcon />
</IconButton>
</ListItem>
<ListItem className={classes.listItemSocial}>
<IconButton
color="secondary"
aria-label="twitter, opens in new tab"
component="a"
href={`https://www.twitter.com/ustaxesorg`}
target="_blank"
rel="noreferrer noopener"
>
<TwitterIcon />
</IconButton>
</ListItem>
<ListItem className={classes.listItemSocial}>
<Link to={Urls.settings}>
<IconButton color="secondary" aria-label="site user settings">
<Settings />
</IconButton>
</Link>
</ListItem>
</List>
</>
)
return (
<nav className={classes.drawer} aria-label="primary">
<SwipeableDrawer
variant={!isMobile ? 'persistent' : undefined}
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
open={isOpen}
onOpen={() => setOpen(true)}
onClose={() => setOpen(false)}
classes={{
root: classes.drawerContainer,
paper: classes.drawerPaper
}}
ModalProps={{
BackdropProps: {
classes: { root: classes.drawerBackdrop }
}
// Disabling for the time being due to scroll position persisting
// keepMounted: isMobile ? true : false // Better open performance on mobile.
}}
>
{drawer}
</SwipeableDrawer>
</nav>
)
}
