-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[material-ui][docs] Open Material UI template with CodeSandbox/StackB…
…litz (#43604)
- Loading branch information
1 parent
4977aa0
commit ff9406a
Showing
107 changed files
with
2,045 additions
and
6,856 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 45 additions & 66 deletions
111
docs/data/material/getting-started/templates/dashboard/Dashboard.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,81 +1,60 @@ | ||
| import * as React from 'react'; | ||
| import { createTheme, ThemeProvider, alpha } from '@mui/material/styles'; | ||
|
|
||
| import { alpha } from '@mui/material/styles'; | ||
| import CssBaseline from '@mui/material/CssBaseline'; | ||
| import Box from '@mui/material/Box'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import getDashboardTheme from './theme/getDashboardTheme'; | ||
| import AppNavbar from './components/AppNavbar'; | ||
| import Header from './components/Header'; | ||
| import MainGrid from './components/MainGrid'; | ||
| import SideMenu from './components/SideMenu'; | ||
| import TemplateFrame from './TemplateFrame'; | ||
|
|
||
| export default function Dashboard() { | ||
| const [mode, setMode] = React.useState('light'); | ||
| const [showCustomTheme, setShowCustomTheme] = React.useState(true); | ||
| const dashboardTheme = createTheme(getDashboardTheme(mode)); | ||
| const defaultTheme = createTheme({ palette: { mode } }); | ||
| // This code only runs on the client side, to determine the system color preference | ||
| React.useEffect(() => { | ||
| // Check if there is a preferred mode in localStorage | ||
| const savedMode = localStorage.getItem('themeMode'); | ||
| if (savedMode) { | ||
| setMode(savedMode); | ||
| } else { | ||
| // If no preference is found, it uses system preference | ||
| const systemPrefersDark = window.matchMedia( | ||
| '(prefers-color-scheme: dark)', | ||
| ).matches; | ||
| setMode(systemPrefersDark ? 'dark' : 'light'); | ||
| } | ||
| }, []); | ||
|
|
||
| const toggleColorMode = () => { | ||
| const newMode = mode === 'dark' ? 'light' : 'dark'; | ||
| setMode(newMode); | ||
| localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage | ||
| }; | ||
| import AppTheme from '../shared-theme/AppTheme'; | ||
| import { | ||
| chartsCustomizations, | ||
| dataGridCustomizations, | ||
| datePickersCustomizations, | ||
| treeViewCustomizations, | ||
| } from './theme/customizations'; | ||
|
|
||
| const toggleCustomTheme = () => { | ||
| setShowCustomTheme((prev) => !prev); | ||
| }; | ||
| const xThemeComponents = { | ||
| ...chartsCustomizations, | ||
| ...dataGridCustomizations, | ||
| ...datePickersCustomizations, | ||
| ...treeViewCustomizations, | ||
| }; | ||
|
|
||
| export default function Dashboard(props) { | ||
| return ( | ||
| <TemplateFrame | ||
| toggleCustomTheme={toggleCustomTheme} | ||
| showCustomTheme={showCustomTheme} | ||
| mode={mode} | ||
| toggleColorMode={toggleColorMode} | ||
| > | ||
| <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}> | ||
| <CssBaseline enableColorScheme /> | ||
| <Box sx={{ display: 'flex' }}> | ||
| <SideMenu /> | ||
| <AppNavbar /> | ||
| {/* Main content */} | ||
| <Box | ||
| component="main" | ||
| sx={(theme) => ({ | ||
| flexGrow: 1, | ||
| backgroundColor: alpha(theme.palette.background.default, 1), | ||
| overflow: 'auto', | ||
| })} | ||
| <AppTheme {...props} themeComponents={xThemeComponents}> | ||
| <CssBaseline enableColorScheme /> | ||
| <Box sx={{ display: 'flex' }}> | ||
| <SideMenu /> | ||
| <AppNavbar /> | ||
| {/* Main content */} | ||
| <Box | ||
| component="main" | ||
| sx={(theme) => ({ | ||
| flexGrow: 1, | ||
| backgroundColor: theme.vars | ||
| ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)` | ||
| : alpha(theme.palette.background.default, 1), | ||
| overflow: 'auto', | ||
| })} | ||
| > | ||
| <Stack | ||
| spacing={2} | ||
| sx={{ | ||
| alignItems: 'center', | ||
| mx: 3, | ||
| pb: 10, | ||
| mt: { xs: 8, md: 0 }, | ||
| }} | ||
| > | ||
| <Stack | ||
| spacing={2} | ||
| sx={{ | ||
| alignItems: 'center', | ||
| mx: 3, | ||
| pb: 10, | ||
| mt: { xs: 8, md: 0 }, | ||
| }} | ||
| > | ||
| <Header /> | ||
| <MainGrid /> | ||
| </Stack> | ||
| </Box> | ||
| <Header /> | ||
| <MainGrid /> | ||
| </Stack> | ||
| </Box> | ||
| </ThemeProvider> | ||
| </TemplateFrame> | ||
| </Box> | ||
| </AppTheme> | ||
| ); | ||
| } |
119 changes: 48 additions & 71 deletions
119
docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,63 @@ | ||
| import * as React from 'react'; | ||
| import { | ||
| PaletteMode, | ||
| createTheme, | ||
| ThemeProvider, | ||
| alpha, | ||
| } from '@mui/material/styles'; | ||
| import type {} from '@mui/x-date-pickers/themeAugmentation'; | ||
| import type {} from '@mui/x-charts/themeAugmentation'; | ||
| import type {} from '@mui/x-data-grid/themeAugmentation'; | ||
| import type {} from '@mui/x-tree-view/themeAugmentation'; | ||
| import { alpha } from '@mui/material/styles'; | ||
| import CssBaseline from '@mui/material/CssBaseline'; | ||
| import Box from '@mui/material/Box'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import getDashboardTheme from './theme/getDashboardTheme'; | ||
| import AppNavbar from './components/AppNavbar'; | ||
| import Header from './components/Header'; | ||
| import MainGrid from './components/MainGrid'; | ||
| import SideMenu from './components/SideMenu'; | ||
| import TemplateFrame from './TemplateFrame'; | ||
|
|
||
| export default function Dashboard() { | ||
| const [mode, setMode] = React.useState<PaletteMode>('light'); | ||
| const [showCustomTheme, setShowCustomTheme] = React.useState(true); | ||
| const dashboardTheme = createTheme(getDashboardTheme(mode)); | ||
| const defaultTheme = createTheme({ palette: { mode } }); | ||
| // This code only runs on the client side, to determine the system color preference | ||
| React.useEffect(() => { | ||
| // Check if there is a preferred mode in localStorage | ||
| const savedMode = localStorage.getItem('themeMode') as PaletteMode | null; | ||
| if (savedMode) { | ||
| setMode(savedMode); | ||
| } else { | ||
| // If no preference is found, it uses system preference | ||
| const systemPrefersDark = window.matchMedia( | ||
| '(prefers-color-scheme: dark)', | ||
| ).matches; | ||
| setMode(systemPrefersDark ? 'dark' : 'light'); | ||
| } | ||
| }, []); | ||
|
|
||
| const toggleColorMode = () => { | ||
| const newMode = mode === 'dark' ? 'light' : 'dark'; | ||
| setMode(newMode); | ||
| localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage | ||
| }; | ||
| import AppTheme from '../shared-theme/AppTheme'; | ||
| import { | ||
| chartsCustomizations, | ||
| dataGridCustomizations, | ||
| datePickersCustomizations, | ||
| treeViewCustomizations, | ||
| } from './theme/customizations'; | ||
|
|
||
| const toggleCustomTheme = () => { | ||
| setShowCustomTheme((prev) => !prev); | ||
| }; | ||
| const xThemeComponents = { | ||
| ...chartsCustomizations, | ||
| ...dataGridCustomizations, | ||
| ...datePickersCustomizations, | ||
| ...treeViewCustomizations, | ||
| }; | ||
|
|
||
| export default function Dashboard(props: { disableCustomTheme?: boolean }) { | ||
| return ( | ||
| <TemplateFrame | ||
| toggleCustomTheme={toggleCustomTheme} | ||
| showCustomTheme={showCustomTheme} | ||
| mode={mode} | ||
| toggleColorMode={toggleColorMode} | ||
| > | ||
| <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}> | ||
| <CssBaseline enableColorScheme /> | ||
| <Box sx={{ display: 'flex' }}> | ||
| <SideMenu /> | ||
| <AppNavbar /> | ||
| {/* Main content */} | ||
| <Box | ||
| component="main" | ||
| sx={(theme) => ({ | ||
| flexGrow: 1, | ||
| backgroundColor: alpha(theme.palette.background.default, 1), | ||
| overflow: 'auto', | ||
| })} | ||
| <AppTheme {...props} themeComponents={xThemeComponents}> | ||
| <CssBaseline enableColorScheme /> | ||
| <Box sx={{ display: 'flex' }}> | ||
| <SideMenu /> | ||
| <AppNavbar /> | ||
| {/* Main content */} | ||
| <Box | ||
| component="main" | ||
| sx={(theme) => ({ | ||
| flexGrow: 1, | ||
| backgroundColor: theme.vars | ||
| ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)` | ||
| : alpha(theme.palette.background.default, 1), | ||
| overflow: 'auto', | ||
| })} | ||
| > | ||
| <Stack | ||
| spacing={2} | ||
| sx={{ | ||
| alignItems: 'center', | ||
| mx: 3, | ||
| pb: 10, | ||
| mt: { xs: 8, md: 0 }, | ||
| }} | ||
| > | ||
| <Stack | ||
| spacing={2} | ||
| sx={{ | ||
| alignItems: 'center', | ||
| mx: 3, | ||
| pb: 10, | ||
| mt: { xs: 8, md: 0 }, | ||
| }} | ||
| > | ||
| <Header /> | ||
| <MainGrid /> | ||
| </Stack> | ||
| </Box> | ||
| <Header /> | ||
| <MainGrid /> | ||
| </Stack> | ||
| </Box> | ||
| </ThemeProvider> | ||
| </TemplateFrame> | ||
| </Box> | ||
| </AppTheme> | ||
| ); | ||
| } |
Oops, something went wrong.