Skip to content

Commit

Permalink
docs: add Fab
Browse files Browse the repository at this point in the history
  • Loading branch information
alisasanib committed May 2, 2022
1 parent 923c502 commit a5841a3
Showing 1 changed file with 73 additions and 0 deletions.
73 changes: 73 additions & 0 deletions docs/pages/experiments/material-ui/fab.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import * as React from 'react';
import {
Experimental_CssVarsProvider as CssVarsProvider,
useColorScheme,
} from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import Moon from '@mui/icons-material/DarkMode';
import Sun from '@mui/icons-material/LightMode';
import Fab from '@mui/material/Fab';
import Stack from '@mui/material/Stack';

const ColorSchemePicker = () => {
const { mode, setMode } = useColorScheme();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}

return (
<Button
variant="outlined"
onClick={() => {
if (mode === 'light') {
setMode('dark');
} else {
setMode('light');
}
}}
>
{mode === 'light' ? <Moon /> : <Sun />}
</Button>
);
};

export default function CssVarsTemplate() {
return (
<CssVarsProvider>
<CssBaseline />
<Container sx={{ my: 5 }}>
<Box sx={{ pb: 2 }}>
<ColorSchemePicker />
</Box>
<Box
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))',
gridAutoRows: 'minmax(160px, auto)',
gap: 2,
'& > div': {
placeSelf: 'center',
},
}}
>
<Stack spacing={2} direction="row">
<Fab />
<Fab color="secondary" />
<Fab color="success" />
<Fab color="error" />
<Fab color="info" />
<Fab color="warning" />
<Fab color="inherit" />
</Stack>
</Box>
</Container>
</CssVarsProvider>
);
}

0 comments on commit a5841a3

Please sign in to comment.