@mui/material#Breadcrumbs TypeScript Examples
The following examples show how to use
@mui/material#Breadcrumbs.
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: FireCMSAppBar.tsx From firecms with MIT License | 4 votes |
|
export function FireCMSAppBar({
title,
handleDrawerToggle,
toolbarExtraWidget
}: CMSAppBarProps) {
const classes = useStyles();
const breadcrumbsContext = useBreadcrumbsContext();
const { breadcrumbs } = breadcrumbsContext;
const authController = useAuthController();
const { mode, toggleMode } = useModeState();
const initial = authController.user?.displayName
? authController.user.displayName[0].toUpperCase()
: (authController.user?.email ? authController.user.email[0].toUpperCase() : "A");
return (
<Slide
direction="down" in={true} mountOnEnter unmountOnExit>
<AppBar
className={classes.appbar}
position={"relative"}
elevation={1}>
<Toolbar>
<IconButton
color="inherit"
aria-label="Open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
size="large">
<MenuIcon/>
</IconButton>
<Hidden lgDown>
<Box mr={3}>
<Link
underline={"none"}
key={"breadcrumb-home"}
color="inherit"
component={ReactLink}
to={"/"}>
<Typography variant="h6" noWrap>
{title}
</Typography>
</Link>
</Box>
</Hidden>
<Box mr={2}>
<Breadcrumbs
separator={<NavigateNextIcon
htmlColor={"rgb(0,0,0,0.87)"}
fontSize="small"/>}
aria-label="breadcrumb">
{breadcrumbs.map((entry, index) => (
<Link
underline={"none"}
key={`breadcrumb-${index}`}
color="inherit"
component={ReactLink}
to={entry.url}>
<Chip
classes={{ root: classes.breadcrumb }}
label={entry.title}
/>
</Link>)
)
}
</Breadcrumbs>
</Box>
<Box flexGrow={1}/>
{toolbarExtraWidget &&
<ErrorBoundary>
{
toolbarExtraWidget
}
</ErrorBoundary>}
<Box p={1} mr={1}>
<IconButton
color="inherit"
aria-label="Open drawer"
edge="start"
onClick={() => toggleMode()}
size="large">
{mode === "dark"
? <Brightness3Icon/>
: <Brightness5Icon/>}
</IconButton>
</Box>
<Box p={1} mr={1}>
{authController.user && authController.user.photoURL
? <Avatar
src={authController.user.photoURL}/>
: <Avatar>{initial}</Avatar>
}
</Box>
<Button variant="text"
color="inherit"
onClick={authController.signOut}>
Log Out
</Button>
</Toolbar>
</AppBar>
</Slide>
);
}
Example #2
| Source File: FileManager.tsx From Cromwell with MIT License | 4 votes |
|
render() {
const breadcrumbsPath = this.currentPath.split('/').filter(pathChunk => pathChunk !== '').join('/');
return (
<Modal
className={styles.FileManager}
open={this.state.isActive}
blurSelector="#root"
onClose={this.handleClose}
disableEnforceFocus
>
<div className={styles.header}>
<div className={styles.headerLeft}>
<Tooltip title="Back">
<span>
<IconButton className={styles.action}
disabled={this.previousPaths.length === 0}
onClick={this.goBack}
>
<ArrowBackIcon />
</IconButton>
</span>
</Tooltip>
<Tooltip title="Forward">
<span>
<IconButton className={styles.action}
disabled={this.nextPaths.length === 0}
onClick={this.goForward}
>
<ArrowForwardIcon />
</IconButton>
</span>
</Tooltip>
<Tooltip title="Create folder">
<IconButton className={styles.action}
onClick={this.handleCreateFolder}
ref={this.createFolderBtn}
>
<CreateNewFolderIcon />
</IconButton>
</Tooltip>
<div
ref={this.createFolderWindow}
className={styles.createFolderWindow}
style={{ display: 'none' }}
>
<TextField variant="standard" id="create-new-folder-input" />
<IconButton
onClick={this.handleApplyCreateFolder}
>
<CheckCircleOutlineIcon />
</IconButton>
<IconButton
onClick={this.handleCloseCreateFolder}
>
<CancelIcon />
</IconButton>
</div>
<Tooltip title="Upload file">
<IconButton
onClick={this.handleUploadFile}
className={styles.action}>
<PublishIcon />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton className={styles.action}
ref={this.deleteItemBtn}
style={{ opacity: '0.5' }}
onClick={this.handleDeleteItem}
>
<DeleteForeverIcon />
</IconButton>
</Tooltip>
<Tooltip title="Download file">
<IconButton className={styles.action}
ref={this.downloadItemBtn}
style={{ opacity: '0.5' }}
onClick={this.handleDownloadItem}
>
<ArrowDownwardIcon />
</IconButton>
</Tooltip>
</div>
<div className={styles.headerRight}>
{this.state.isSelecting && (
<Button variant="contained" color="primary"
className={styles.selectBtn}
size="small"
onClick={this.handleApplySelect}
ref={this.selectButton}
style={{ opacity: '0.5' }}
role="button"
>Select</Button>
)}
<Tooltip title="Close">
<IconButton className={styles.action}
onClick={this.handleClose}
>
<CancelIcon />
</IconButton>
</Tooltip>
</div>
</div>
<div className={styles.breadcrumbs}>
<Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="breadcrumb">
<div className={styles.pathChunk}
onClick={() => this.openPath('/')}
key={'/'}><HomeIcon style={{ fontSize: '21px' }} /></div>
{breadcrumbsPath.split('/').map((pathChunk, index) => {
const fullPath = breadcrumbsPath.split('/').slice(0, index + 1).join('/');
return (
<p className={styles.pathChunk}
onClick={() => this.openPath(fullPath)}
key={index}>{pathChunk}</p>
)
})}
</Breadcrumbs>
</div>
<div className={styles.listContainer} ref={this.listRef} id="file-list-container">
<div className={styles.dragAreaHighlight}></div>
{this.currentItems && (
<CList
className={styles.list}
cssClasses={{ page: styles.content }}
id={this.listId}
dataList={this.currentItems}
ListItem={FileItem}
pageSize={this.pageSize}
usePagination
listItemProps={{
currentPath: this.currentPath,
getItemType: this.getItemType,
normalize: this.normalize,
onItemClick: this.onItemClick,
openPreview: this.openPreview,
selectedFileName: this.selectedFileName,
}}
elements={{
pagination: Pagination,
}}
/>
)}
{this.state.isLoading && (
<LoadBox absolute />
)}
</div>
<div
style={{ display: 'none' }}
ref={this.photoPreviewContainer}
className={styles.photoPreviewContainer}>
<IconButton className={styles.photoPreviewCloseBtn}
onClick={this.closePreview}
>
<CancelIcon className={styles.photoPreviewCloseIcon} />
</IconButton>
<img
className={styles.photoPreview}
ref={this.photoPreview}
/>
</div>
<div style={{ display: 'none' }}>
<input type="file" id="hidden-file-upload-input" multiple />
</div>
<LoadingStatus isActive={this.state?.hasLoadingStatus} />
</Modal>
);
}
Example #3
| Source File: index.tsx From Search-Next with GNU General Public License v3.0 | 4 votes |
|
SettingPage: React.FC<SettingPageProps> = ({
children,
route,
...props
}) => {
const history = useNavigate();
const location = useLocation();
const params = useParams();
const [menuList, setMenuList] = React.useState<Router[] | undefined>([]);
const [breads, setBreads] = React.useState<Router[]>([]);
const getBreadCrumbs = (routes: Router[], parentPath: string = '') => {
let breadCrumbs: Router[] = [];
const findRoute = (
routes: Router[] | undefined,
parentPath: string = '',
) => {
if (!routes) return routes;
const loc = location;
routes.forEach((i) => {
const fullPath = `${parentPath}/${i.path}`;
const splitPath = fullPath.split(':');
const paramsPath =
splitPath[0] +
Object.values(params)
.filter((u) => u !== '')
.join('/');
if (
loc.pathname.indexOf(i.path) !== -1 ||
loc.pathname === paramsPath
) {
breadCrumbs.push(i);
}
if (i.routes) {
findRoute(i.routes, fullPath);
}
});
};
findRoute(routes, parentPath);
return breadCrumbs;
};
React.useEffect(() => {
if (location.pathname === '/setting') {
history(route?.routes?.[0].path || '/setting', { replace: true });
}
setMenuList(route?.routes);
}, []);
React.useEffect(() => {
const breads = getBreadCrumbs(route.routes || [], '/setting');
setBreads(breads);
}, [location]);
return (
<div className="flex flex-row h-screen bg-gray-70">
<div className="w-72 p-4 h-full">
<div className="flex gap-1">
<Tooltip title="回到首页" arrow>
<IconButton
size="small"
onClick={() => {
history('/');
}}
>
<Home />
</IconButton>
</Tooltip>
<Tooltip title="返回上级" arrow>
<IconButton
size="small"
onClick={() => {
history(-1);
}}
>
<KeyboardBackspace />
</IconButton>
</Tooltip>
</div>
<div className="flex flex-col gap-1 my-4">
{menuList?.map((i) => (
<div
key={i.path}
className={classNames(
'hover:bg-gray-150',
'transition-all',
'px-2.5',
'py-1.5',
'cursor-pointer',
'rounded',
'text-sm',
'text-gray-800',
{
'bg-gray-150': location.pathname.indexOf(i.path) > -1,
},
)}
onClick={() => {
history(i.path);
}}
>
{i.title}
</div>
))}
</div>
</div>
<div className="h-full overflow-hidden flex flex-col w-full px-6 py-4">
<Breadcrumbs separator="›" aria-label="breadcrumb" className="mb-4">
{breads.map((i, index) => (
<div
className={classNames('text-2xl cursor-pointer mb-0', {
'font-semibold': index === breads.length - 1,
})}
key={i.path}
onClick={() => {
const path =
'/setting/' +
breads
.map((i) => i.path)
.filter((_, ji) => ji <= index)
.join('/');
index !== breads.length - 1 ? history(path) : null;
}}
>
<div className="flex items-center gap-1">
{i.title}
{i?.status === 'process' && (
<Chip
color="warning"
label={i?.status}
size="small"
variant="outlined"
/>
)}
</div>
</div>
))}
</Breadcrumbs>
<div className="flex-grow overflow-y-auto w-full">
<div className="max-w-4xl">
<Outlet />
</div>
</div>
<div className="text-center max-w-4xl">
<Copyright />
</div>
</div>
</div>
);
}
