-
-
Notifications
You must be signed in to change notification settings - Fork 253
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add DashboardLayout component to @toolpad/core #3554
Changes from all commits
bebb82e
03786bd
fd68ff0
4d04649
8630f2a
235116a
1311f6f
8f6c9db
e6d436b
4807db7
926102f
f0c6180
4175348
8f19dde
f44f5a0
d250929
06da40c
f0a17e4
3dab0a8
eb8a6f1
b8fdf8d
229dffc
1c777d3
9efd2f5
c31fe20
7fd54d4
c6819a5
c4da025
e105c15
0327c4f
4b59fc0
cbc3045
6508899
34e9255
fa9b64f
c21a36e
83e99e2
effcabf
0de2030
dd39264
65acf1d
67f724b
4b033f7
6da38cb
1c4f46b
a154f6f
c939d98
b56c288
69f2db0
661c6ad
291c78f
c355188
701187e
fef1864
deb85ea
b3346b9
f7a9cbb
31a4af8
1c996a7
631afc1
5682085
ce8102e
22cfa4f
8fa6300
8ac56cb
09a4741
4e7d81c
dbc0e1b
59e4121
9e26e6e
6277b31
36651ce
c270c76
51f58e0
6449ab9
9465e74
180ed30
fb188ca
4f8b5a6
2db6dff
d8b9838
21d5f64
b15f7c1
1e8708c
56d268f
c789e14
126ecd7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# Dashboard Layout API | ||
|
||
<p class="description">DashboardLayout API reference</p> |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
import * as React from 'react'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Was this hand-written? I think we should port the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I hadn't noticed that, I guess I can include it in this PR if it's simple. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've added it here, seems to work fine 9465e74 |
||
import Box from '@mui/material/Box'; | ||
import Typography from '@mui/material/Typography'; | ||
import DashboardIcon from '@mui/icons-material/Dashboard'; | ||
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; | ||
import BarChartIcon from '@mui/icons-material/BarChart'; | ||
import DescriptionIcon from '@mui/icons-material/Description'; | ||
import LayersIcon from '@mui/icons-material/Layers'; | ||
import { AppProvider } from '@toolpad/core/AppProvider'; | ||
import { DashboardLayout } from '@toolpad/core/DashboardLayout'; | ||
|
||
const NAVIGATION = [ | ||
{ | ||
kind: 'header', | ||
title: 'Main items', | ||
}, | ||
{ | ||
title: 'Dashboard', | ||
icon: <DashboardIcon />, | ||
}, | ||
{ | ||
title: 'Orders', | ||
icon: <ShoppingCartIcon />, | ||
}, | ||
{ | ||
kind: 'divider', | ||
}, | ||
{ | ||
kind: 'header', | ||
title: 'Analytics', | ||
}, | ||
{ | ||
title: 'Reports', | ||
icon: <BarChartIcon />, | ||
children: [ | ||
{ | ||
title: 'Sales', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ | ||
title: 'Traffic', | ||
icon: <DescriptionIcon />, | ||
}, | ||
], | ||
}, | ||
{ | ||
title: 'Integrations', | ||
icon: <LayersIcon />, | ||
}, | ||
]; | ||
|
||
export default function DashboardLayoutBasic() { | ||
return ( | ||
<AppProvider navigation={NAVIGATION}> | ||
<DashboardLayout> | ||
<Box | ||
sx={{ | ||
py: 4, | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}} | ||
> | ||
<Typography>Dashboard content goes here.</Typography> | ||
</Box> | ||
</DashboardLayout> | ||
</AppProvider> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import * as React from 'react'; | ||
import Box from '@mui/material/Box'; | ||
import Typography from '@mui/material/Typography'; | ||
import DashboardIcon from '@mui/icons-material/Dashboard'; | ||
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; | ||
import BarChartIcon from '@mui/icons-material/BarChart'; | ||
import DescriptionIcon from '@mui/icons-material/Description'; | ||
import LayersIcon from '@mui/icons-material/Layers'; | ||
import { AppProvider } from '@toolpad/core/AppProvider'; | ||
import { DashboardLayout } from '@toolpad/core/DashboardLayout'; | ||
import type { Navigation } from '@toolpad/core'; | ||
|
||
const NAVIGATION: Navigation = [ | ||
{ | ||
kind: 'header', | ||
title: 'Main items', | ||
}, | ||
{ | ||
title: 'Dashboard', | ||
icon: <DashboardIcon />, | ||
}, | ||
{ | ||
title: 'Orders', | ||
icon: <ShoppingCartIcon />, | ||
}, | ||
{ | ||
kind: 'divider', | ||
}, | ||
{ | ||
kind: 'header', | ||
title: 'Analytics', | ||
}, | ||
{ | ||
title: 'Reports', | ||
icon: <BarChartIcon />, | ||
children: [ | ||
{ | ||
title: 'Sales', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ | ||
title: 'Traffic', | ||
icon: <DescriptionIcon />, | ||
}, | ||
], | ||
}, | ||
{ | ||
title: 'Integrations', | ||
icon: <LayersIcon />, | ||
}, | ||
]; | ||
|
||
export default function DashboardLayoutBasic() { | ||
return ( | ||
<AppProvider navigation={NAVIGATION}> | ||
<DashboardLayout> | ||
<Box | ||
sx={{ | ||
py: 4, | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}} | ||
> | ||
<Typography>Dashboard content goes here.</Typography> | ||
</Box> | ||
</DashboardLayout> | ||
</AppProvider> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import * as React from 'react'; | ||
import Box from '@mui/material/Box'; | ||
import Typography from '@mui/material/Typography'; | ||
import DashboardIcon from '@mui/icons-material/Dashboard'; | ||
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; | ||
import { AppProvider } from '@toolpad/core/AppProvider'; | ||
import { DashboardLayout } from '@toolpad/core/DashboardLayout'; | ||
|
||
const NAVIGATION = [ | ||
{ | ||
title: 'Dashboard', | ||
icon: <DashboardIcon />, | ||
}, | ||
{ | ||
title: 'Orders', | ||
icon: <ShoppingCartIcon />, | ||
}, | ||
]; | ||
|
||
const BRANDING = { | ||
logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />, | ||
title: 'MUI', | ||
}; | ||
|
||
export default function DashboardLayoutBranding() { | ||
return ( | ||
<AppProvider navigation={NAVIGATION} branding={BRANDING}> | ||
<DashboardLayout> | ||
<Box | ||
sx={{ | ||
py: 4, | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}} | ||
> | ||
<Typography>Dashboard content goes here.</Typography> | ||
</Box> | ||
</DashboardLayout> | ||
</AppProvider> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import * as React from 'react'; | ||
import Box from '@mui/material/Box'; | ||
import Typography from '@mui/material/Typography'; | ||
import DashboardIcon from '@mui/icons-material/Dashboard'; | ||
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; | ||
import { AppProvider } from '@toolpad/core/AppProvider'; | ||
import { DashboardLayout } from '@toolpad/core/DashboardLayout'; | ||
import type { Navigation, Branding } from '@toolpad/core'; | ||
|
||
const NAVIGATION: Navigation = [ | ||
{ | ||
title: 'Dashboard', | ||
icon: <DashboardIcon />, | ||
}, | ||
{ | ||
title: 'Orders', | ||
icon: <ShoppingCartIcon />, | ||
}, | ||
]; | ||
|
||
const BRANDING: Branding = { | ||
logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />, | ||
title: 'MUI', | ||
}; | ||
|
||
export default function DashboardLayoutBranding() { | ||
return ( | ||
<AppProvider navigation={NAVIGATION} branding={BRANDING}> | ||
<DashboardLayout> | ||
<Box | ||
sx={{ | ||
py: 4, | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}} | ||
> | ||
<Typography>Dashboard content goes here.</Typography> | ||
</Box> | ||
</DashboardLayout> | ||
</AppProvider> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
import * as React from 'react'; | ||
import Box from '@mui/material/Box'; | ||
import Typography from '@mui/material/Typography'; | ||
import DescriptionIcon from '@mui/icons-material/Description'; | ||
import FolderIcon from '@mui/icons-material/Folder'; | ||
import { AppProvider } from '@toolpad/core/AppProvider'; | ||
import { DashboardLayout } from '@toolpad/core/DashboardLayout'; | ||
|
||
const NAVIGATION = [ | ||
{ | ||
title: 'Item 1', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ | ||
title: 'Item 2', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ | ||
title: 'Folder 1', | ||
icon: <FolderIcon />, | ||
children: [ | ||
{ | ||
title: 'Item A1', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ | ||
title: 'Item A2', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ | ||
title: 'Folder A1', | ||
icon: <FolderIcon />, | ||
children: [ | ||
{ | ||
title: 'Item B1', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ | ||
title: 'Item B2', | ||
icon: <DescriptionIcon />, | ||
}, | ||
], | ||
}, | ||
], | ||
}, | ||
{ kind: 'divider' }, | ||
{ | ||
kind: 'header', | ||
title: 'Header 1', | ||
}, | ||
{ | ||
title: 'Item A', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ | ||
kind: 'header', | ||
title: 'Header 2', | ||
}, | ||
{ | ||
title: 'Item B', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ | ||
title: 'Folder 2', | ||
icon: <FolderIcon />, | ||
children: [ | ||
{ | ||
kind: 'header', | ||
title: 'Header A1', | ||
}, | ||
{ | ||
title: 'Item C1', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ | ||
title: 'Item C2', | ||
icon: <DescriptionIcon />, | ||
}, | ||
{ kind: 'divider' }, | ||
{ | ||
kind: 'header', | ||
title: 'Header A2', | ||
}, | ||
{ | ||
title: 'Item C3', | ||
icon: <DescriptionIcon />, | ||
}, | ||
], | ||
}, | ||
]; | ||
|
||
export default function DashboardLayoutNavigation() { | ||
return ( | ||
<AppProvider navigation={NAVIGATION}> | ||
<DashboardLayout> | ||
<Box | ||
sx={{ | ||
py: 4, | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
}} | ||
> | ||
<Typography>Dashboard content goes here.</Typography> | ||
</Box> | ||
</DashboardLayout> | ||
</AppProvider> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For the API, let's port the docs generator from X?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can do that in this separate PR, right? #3536
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, the X one, I was checking the Base one, will take a look.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah yes, base may be better