screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, width=device-width" /> <title>My Page</title> <!-- Material-UI CSS --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <!-- React and Material-UI scripts --> <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script> <!-- Babel for JSX --> <script src="https://unpkg.com/@babel/standalone@latest/babel.min.js" crossorigin="anonymous"></script> </head> <body> <div id="root"></div> <script type="text/babel"> function App() { const [openSuccess, setOpenSuccess] = React.useState(true); const [openWarning, setOpenWarning] = React.useState(true); const [openError, setOpenError] = React.useState(true); const [openInfo, setOpenInfo] = React.useState(true); return ( <Container maxWidth="md" sx={{ boxShadow: 1, p: 2 }}> <Typography variant="h4" component="h1" gutterBottom> React Material UI Alert with Remove Button </Typography> <Stack sx={{ width: '100%' }} spacing={2}> {openSuccess && ( <div> <Alert onClose={() => setOpenSuccess(false)} severity="success"> This is a success alert — check it out! </Alert> </div> )} {openWarning && ( <div> <Alert onClose={() => setOpenWarning(false)} severity="warning"> This is a warning alert — please be cautious. </Alert> </div> )} {openError && ( <div> <Alert onClose={() => setOpenError(false)} severity="error"> This is an error alert — something went wrong! </Alert> </div> )} {openInfo && ( <div> <Alert onClose={() => setOpenInfo(false)} severity="info"> This is an information alert — here's some important info. </Alert> </div> )} </Stack> </Container> ); } </script> <script type="text/babel"> const { colors, CssBaseline, ThemeProvider, Typography, Container, createTheme, Stack, Alert, } = MaterialUI; const theme = createTheme({ palette: { primary: { main: '#556cd6', }, secondary: { main: '#19857b', }, error: { main: colors.red.A400, }, }, }); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <ThemeProvider theme={theme}> <CssBaseline /> <App /> </ThemeProvider> ); </script> </body> </html>