« Material-UI » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(→Layout) |
(→Layout) |
||
Ligne 41 : | Ligne 41 : | ||
</kode> | </kode> | ||
== Grid v2 == | == [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> | |||
== Stack == | == Stack == |
Version du 27 octobre 2024 à 21:21
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'; <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
Button
import IconButton from '@mui/material/IconButton'; import AddIcon from '@mui/icons-material/Add'; <IconButton aria-label="add" color="primary"> <AddIcon /> </IconButton> |
Table
import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableContainer'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; <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> |
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', }, secondary: { main: '#19857b', }, error: { main: red.A400, }, }, }); 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'; |