« Material-UI » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(Page créée avec « = Links = * [https://mui.com MUI] ») |
|||
(31 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
[[Category:React]] | |||
= Links = | = Links = | ||
* [https://mui.com | * [https://mui.com Material-UI] | ||
* [https://github.com/mui/material-ui/blob/master/examples/material-ui-vite-ts Example project Material-UI, Vite, TypeScript] | |||
= Layout = | |||
== [https://mui.com/material-ui/react-box Box] == | |||
Generic container for grouping other components like the {{boxx|div}} tag.<br> | |||
It has access to the theme and the {{boxx|sx}} property. | |||
<kode lang='tsx'> | |||
import { Box } from '@mui/material'; | |||
<Box component="section" sx={{ p: 2, border: '1px dashed grey' }}> | |||
This Box renders as an HTML section element. | |||
</Box> | |||
</kode> | |||
== [https://mui.com/material-ui/react-container Container] == | |||
Allows to control the maximum width by being responsive based on the viewport size. | |||
{| class="wikitable wtp wtmono1" | |||
! Value | |||
! Description | |||
|- | |||
| xs || Extra small (up to 600px) | |||
|- | |||
| sm || Small (up to 960px) | |||
|- | |||
| md || Medium (up to 1280px) | |||
|- | |||
| lg || Large (up to 1920px) | |||
|- | |||
| xl || Extra large (up to 1536px by default, although this can vary based on your theme settings) | |||
|} | |||
<kode lang='tsx'> | |||
import { Box, Container } from '@mui/material'; | |||
<Container maxWidth="sm"> | |||
<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} /> | |||
</Container> | |||
</kode> | |||
== [https://mui.com/material-ui/react-grid2 Grid v2] == | |||
Allows to define columns that scale and resize content. A page is splitted in 12 points. | |||
<kode lang='tsx'> | |||
import Grid from '@mui/material/Grid2'; | |||
<Grid container spacing={2}> | |||
<Grid size={{ xs: 6, md: 8 }}> | |||
<Item>xs=6 md=8</Item> | |||
</Grid> | |||
<Grid size={{ xs: 6, md: 4 }}> | |||
<Item>xs=6 md=4</Item> | |||
</Grid> | |||
<Grid size={{ xs: 6, md: 4 }}> | |||
<Item>xs=6 md=4</Item> | |||
</Grid> | |||
<Grid size={{ xs: 6, md: 8 }}> | |||
<Item>xs=6 md=8</Item> | |||
</Grid> | |||
</Grid> | |||
</kode> | |||
== [https://mui.com/material-ui/react-stack Stack] == | |||
One-dimensional layouts along the vertical or horizontal axis, with optional spacing and dividers between each element. | |||
<kode lang='tsx'> | |||
import { Stack } from '@mui/material'; | |||
<Stack direction="row" spacing={2}> | |||
<Item>Item 1</Item> | |||
<Item>Item 2</Item> | |||
<Item>Item 3</Item> | |||
</Stack> | |||
</kode> | |||
= Surfaces = | |||
== [https://mui.com/material-ui/react-paper Paper] == | |||
Displays content on an elevated surface.<br> | |||
The elevation varies from 0 to 24 (default 1). | |||
<kode lang='tsx'> | |||
import { Paper } from '@mui/material'; | |||
<Paper elevation={3} /> | |||
</kode> | |||
= Data Display = | |||
== [https://mui.com/material-ui/material-icons Material Icons] == | |||
<kode lang='tsx'> | |||
import AddIcon from '@mui/icons-material/Add'; | |||
<AddIcon /> | |||
</kode> | |||
<kode lang='bash'> | |||
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react | |||
</kode> | |||
== [https://mui.com/material-ui/react-table Table] == | |||
<kode lang='tsx'> | |||
import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; | |||
<TableContainer component={Paper}> | |||
<Table sx={{ minWidth: 600 }} aria-label="table"> | |||
<TableHead> | |||
<TableRow> | |||
<TableCell align="right">Name</TableCell> | |||
</TableRow> | |||
</TableHead> | |||
<TableBody> | |||
{rows.map((row) => ( | |||
<TableRow | |||
key={row.name} | |||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }} | |||
> | |||
<TableCell component="th" scope="row"> | |||
{row.name} | |||
</TableCell> | |||
</TableRow> | |||
))} | |||
</TableBody> | |||
</Table> | |||
</TableContainer> | |||
</kode> | |||
== [https://mui.com/material-ui/react-typography Typography] == | |||
* [https://mui.com/material-ui/api/typography API] | |||
<kode lang='tsx'> | |||
import { Typography } from '@mui/material'; | |||
<Typography variant="h4" gutterBottom sx={{ mt: 2 }}> | |||
Title | |||
</Typography> | |||
</kode> | |||
= Inputs = | |||
== [https://mui.com/material-ui/react-button/ Button] == | |||
<kode lang='tsx'> | |||
import { IconButton } from '@mui/material'; | |||
import AddIcon from '@mui/icons-material/Add'; | |||
<IconButton aria-label="add" color="primary"> | |||
<AddIcon /> | |||
</IconButton> | |||
</kode> | |||
= Styling = | |||
<filebox fn='App.tsx' lang='html'> | |||
<div sx={{ display: flex }}></div> | |||
</filebox> | |||
= [https://mui.com/material-ui/customization/theming Theme] = | |||
* [https://mui.com/material-ui/customization/dark-mode Dark mode] | |||
<filebox fn='src/main.tsx'> | |||
import { ThemeProvider } from '@mui/material/styles'; | |||
import theme from './theme'; | |||
createRoot(document.getElementById('root')!).render( | |||
<StrictMode> | |||
<ThemeProvider theme={theme}> | |||
<App /> | |||
</ThemeProvider> | |||
</StrictMode>, | |||
) | |||
</filebox> | |||
<filebox fn='src/theme.tsx'> | |||
import { createTheme } from '@mui/material/styles'; | |||
import { red } from '@mui/material/colors'; | |||
const theme = createTheme({ | |||
cssVariables: true, | |||
palette: { | |||
mode: 'dark', | |||
primary: { | |||
main: '#556cd6', | |||
}, | |||
error: { | |||
main: red.A400, | |||
}, | |||
background: { | |||
default: 'rgb(50, 51, 61)', | |||
}, | |||
}, | |||
}); | |||
export default theme; | |||
</filebox> | |||
= Installation = | |||
<kode lang='bash'> | |||
npm install @mui/material @emotion/react @emotion/styled | |||
npm install @mui/icons-material | |||
npm install @fontsource/roboto | |||
</kode> | |||
<filebox fn='main.tsx'> | |||
import '@fontsource/roboto/300.css'; | |||
import '@fontsource/roboto/400.css'; | |||
import '@fontsource/roboto/500.css'; | |||
import '@fontsource/roboto/700.css'; | |||
</filebox> |
Dernière version du 27 octobre 2024 à 23:14
Links
Layout
Box
Generic container for grouping other components like the div tag.
It has access to the theme and the sx property.
import { Box } from '@mui/material'; <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}> This Box renders as an HTML section element. </Box> |
Container
Allows to control the maximum width by being responsive based on the viewport size.
Value | Description |
---|---|
xs | Extra small (up to 600px) |
sm | Small (up to 960px) |
md | Medium (up to 1280px) |
lg | Large (up to 1920px) |
xl | Extra large (up to 1536px by default, although this can vary based on your theme settings) |
import { Box, Container } from '@mui/material'; <Container maxWidth="sm"> <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} /> </Container> |
Grid v2
Allows to define columns that scale and resize content. A page is splitted in 12 points.
import Grid from '@mui/material/Grid2'; <Grid container spacing={2}> <Grid size={{ xs: 6, md: 8 }}> <Item>xs=6 md=8</Item> </Grid> <Grid size={{ xs: 6, md: 4 }}> <Item>xs=6 md=4</Item> </Grid> <Grid size={{ xs: 6, md: 4 }}> <Item>xs=6 md=4</Item> </Grid> <Grid size={{ xs: 6, md: 8 }}> <Item>xs=6 md=8</Item> </Grid> </Grid> |
Stack
One-dimensional layouts along the vertical or horizontal axis, with optional spacing and dividers between each element.
import { Stack } from '@mui/material'; <Stack direction="row" spacing={2}> <Item>Item 1</Item> <Item>Item 2</Item> <Item>Item 3</Item> </Stack> |
Surfaces
Paper
Displays content on an elevated surface.
The elevation varies from 0 to 24 (default 1).
import { Paper } from '@mui/material'; <Paper elevation={3} /> |
Data Display
Material Icons
import AddIcon from '@mui/icons-material/Add'; <AddIcon /> |
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react |
Table
import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; <TableContainer component={Paper}> <Table sx={{ minWidth: 600 }} aria-label="table"> <TableHead> <TableRow> <TableCell align="right">Name</TableCell> </TableRow> </TableHead> <TableBody> {rows.map((row) => ( <TableRow key={row.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }} > <TableCell component="th" scope="row"> {row.name} </TableCell> </TableRow> ))} </TableBody> </Table> </TableContainer> |
Typography
import { Typography } from '@mui/material'; <Typography variant="h4" gutterBottom sx={{ mt: 2 }}> Title </Typography> |
Inputs
Button
import { IconButton } from '@mui/material'; import AddIcon from '@mui/icons-material/Add'; <IconButton aria-label="add" color="primary"> <AddIcon /> </IconButton> |
Styling
App.tsx |
<div sx={{ display: flex }}></div> |
Theme
src/main.tsx |
import { ThemeProvider } from '@mui/material/styles'; import theme from './theme'; createRoot(document.getElementById('root')!).render( <StrictMode> <ThemeProvider theme={theme}> <App /> </ThemeProvider> </StrictMode>, ) |
src/theme.tsx |
import { createTheme } from '@mui/material/styles'; import { red } from '@mui/material/colors'; const theme = createTheme({ cssVariables: true, palette: { mode: 'dark', primary: { main: '#556cd6', }, error: { main: red.A400, }, background: { default: 'rgb(50, 51, 61)', }, }, }); export default theme; |
Installation
npm install @mui/material @emotion/react @emotion/styled npm install @mui/icons-material npm install @fontsource/roboto |
main.tsx |
import '@fontsource/roboto/300.css'; import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; |